How to access proxies of new tabular data on a web page?
The problem is that Proxima Nova numbers are not monospaced by default. Therefore, a simple price list table does not line up. (see figure 1)
Figure 1. Inappropriate numbers
The question arises:
- is there a CSS rule for accessing monospaced numbers?
- Is there some HTML code trick so I can access monospaced numbers as characters? (sth like
∑
) - or should I use
<span class="figure">1</span><span class="figure">2</span>
...?
Hooray!
source to share
CSS3 Fontsfont-variant-numeric
. This allows you to toggle Opentype features. In your case, it would be:
.my-element { font-variant-numeric: tabular-nums; }
Proxima Nova lists tabular numeric support , so that's fine, but I'm not sure about browser support for font-variant-numeric. If that doesn't work, you can try font-feature-settings
, which should give you the same effect with (possibly) more support :
.my-element { font-feature-settings: "tnum" on; }
The spec states that:
Authors should generally use "font-variant" and its associated sub-properties whenever possible.
source to share
I found a solution. CSS
.tabular-numbers {
-moz-font-feature-settings:"tnum" 1; /* Firefox 31+ */
-moz-font-feature-settings:"tnum=1";
-webkit-font-feature-settings: 'tnum' 1; /* Chrome 31+, Android 4.4+, Opera 24+ */
font-feature-settings: 'tnum' 1; /* IE10+ */
}
Links: http://clagnut.com/sandbox/css3/ and http://caniuse.com/#feat=font-feature
Contrary to answers to: No support for font preferences in Safari? I've seen no support on Mac Safari 7.1.
So, the only universally working solution currently is:
.tabular-figure {
display: inline-block;
width: 7px;
text-align: center;
}
and <span class="tabular-figure">5</span><span class="tabular-figure">6</span><span class="tabular-figure">7</span><span class="tabular-figure">1</span>
which is shit so more like
.number{
font-family: "Helvetica Neue";
}
<span class="number">5671</span>
Looks like Apple Safari is becoming the new Internet Explorer ...: @@@
source to share