font variant

The font-variant-numeric property

The font-variant-numeric property in CSS helps the OpenType font format by specifying which numeric glyphs to make use of on a category, together with variations for fractions, ordinal markers and styled variations amongst others.

#A Little Context

We have a tendency to consider numbers as a static glyph. It prints and that is the best way it’s. Nevertheless, numbers are much more like alphabet letters within the sense that they will have variants that, relying on the context, make it price modifying the fashion. We’re speaking about issues like fractions (e.g. 1/four), ordinals (e.g. 1st) and even the equal of uppercase and lowercase numerals. Nevertheless, not like letters, these variations don’t change the which means of the content material, although they do lend further context or have an effect on legibility.

The rub with this property is that it was designed to work with OpenType-enabled fonts, a brand new however rapidly growing font format that gives a extra in depth set of glyphs that may be focused to make use of in numerous contexts. You might usually right here OpenType known as variable fonts and that is as a result of they include an even bigger number of characters that make them extra versatile for quite a lot of makes use of. Variations for all of the issues!

The difficulty is that the supply of fonts which can be in a position to take full benefit of font-variant and font-variant-numeric is proscribed. There is a rising variety of OpenType-compatible fonts, however there is a a lot smaller subset of choices that make use of all of the options that font-variant-numeric provide and people are sometimes premium and costly. Richard Butler sums this up properly:

Now we have at our disposal ‘uppercase’ numbers referred to as lining or titling numerals, and ‘lowercase’ numerals referred to as old-style or textual content numerals. … It’s additionally the case that the overwhelming majority of fonts are neither trendy nor skilled, if trendy means OpenType-enabled means designed with each units of numerals.

The most important difficulty we’re usually involved with on the subject of CSS properties is browser help, however this property and all others associated to font-variant are additionally on the mercy of font designers to convey full help to the desk.

That is a bummer however we’re beginning to see extra “trendy” and “skilled” fonts pop up, even on the time of this writing. Adobe TypeKit announced it is work to help OpenType options and it has been rumored that Google Fonts is on board as effectively now that Chrome 62 supports them.

#Primary Utilization

That is probably the most primary utilization of the property:

.fraction 
	font-variant-numeric: diagonal-fractions;
" class="synonym">

Older browsers will not acknowledge that, however they do settle for font-feature-settings which unlock the identical options with totally different values. We will pair the 2 properties for deeper help:

.fraction 
	font-feature-settings: frac;
	font-variant-numeric: diagonal-fractions;
" class="synonym">

Or, we are able to tailor this to smell out browser help utilizing @helps in order that the brand new property is barely served to supporting browsers:

.fraction 
    font-feature-settings: frac;
" class="synonym">

@helps (font-variant-numeric: diagonal-fractions) 

#Values

The font-variant-numeric property accepts the next values. The corresponding font-feature-settings worth is famous for reference.

#Basic Values

Worth Description Function Setting
regular Not one of the options listed beneath are enabled. N/A
ordinal Applies letters to symbolize numeric order, usually within the type of a superscript. ordn
slashed-zero Shows an alternate type of zero with a diagonal line that runs via it. zero

#Numeric Determine Values

Worth Description Function Setting
lining-nums Strains numbers up with vertically in order that they adhere to the identical top are aligned on the identical aircraft. lnum
oldstyle-nums Permits an alternate vertical alignment the place numbers will not be at all times evenly displayed on the identical baseline. onum

#Numeric Fraction Values

Worth Description Function Setting
diagonal-fractions Shows fractions in a smaller format the place the numerator (prime quantity) and denominator (backside quantity) are divided by a diagonal slash. frac
stacked-fractions Shows fractions in a smaller format the place the numerator and denominator are stacked one on prime of the opposite and divided by a horizontal line. afrc

#Numeric Spacing Values

Worth Description Function Setting
proportional-nums Permits numbers to take up their very own quantity of house which aren’t essentially equal in width to different numerals. pnum
tabular-nums Shows numbers with equal sizing, proportional and spacing for clear formatting in tabular knowledge contexts. tnum

The spec features a particular observe on using ordinal as a result of it resembles the superscript sup factor however is marked up in a different way.

Leave a Reply

Your email address will not be published. Required fields are marked *