tailwindcss-typography

tailwindcss-typography copied to clipboard

Lots of fonts today support open type features, where one can toggle different font features. Adobe has a very good page explaining the features: https://helpx.adobe.com/fonts/using/open-type-syntax.html

Ligatures seem to have nice predetermined abbreviations that could be used as classnames.

The font-variant-* properties seem more suited with Tailwind's utility approach than the font-feature-settings property, because that would break as soon as you want to change more than one feature on the same element. Browser support isn't as good, but at least compared to the hanging-punctuation property, the spec is a "Candidate Recommendation" so less likely to change.

Some of the features such as caps, numeric glyphs, and superscript/subscript would be relatively straightforward to make utilities for:

.normal-caps {
    font-variant-caps: normal;
}

.small-caps {
    font-variant-caps: small-caps;
}

.all-small-caps {
    font-variant-caps: all-small-caps;
}

.petite-caps {
    font-variant-caps: petite-caps;
}

.unicase {
    font-variant-caps: unicase;
}

.titling-caps {
    font-variant-caps: titling-caps;
}

.normal-nums {
    font-variant-numeric: normal;
}

.ordinal-nums {
    font-variant-numeric: ordinal;
}

.slashed-zeros {
    font-variant-numeric: slashed-zero;
}

.lining-nums {
    font-variant-numeric: lining-nums;
}

.oldstyle-nums {
    font-variant-numeric: oldstyle-nums;
}

.proportional-nums {
    font-variant-numeric: proportional-nums;
}

.tabular-nums {
    font-variant-numeric: tabular-nums;
}

.diagonal-fractions {
    font-variant-numeric: diagonal-fractions;
}

.stacked-fractions {
    font-variant-numeric: stacked-fractions;
}

.not-sub, .not-super {
    font-variant-position: normal;
}

.sub {
    font-variant-position: sub;
}

.super {
    font-variant-position: super;
}

While others such as ligatures and alternate glyphs might be a bit trickier, because they can (and probably often do) take multiple keywords and/or functions. For instance, ligature utilities could be:

.normal-ligatures {
    font-variant-ligatures: normal;
}

.no-ligatures {
    font-variant-ligatures: none;
}

.common-ligatures {
    font-variant-ligatures: common-ligatures;
}

.no-common-ligatures {
    font-variant-ligatures: no-common-ligatures;
}

.discretionary-ligatures {
    font-variant-ligatures: discretionary-ligatures;
}

.no-discretionary-ligatures {
    font-variant-ligatures: no-discretionary-ligatures;
}

.historical-ligatures {
    font-variant-ligatures: historical-ligatures;
}

.no-historical-ligatures {
    font-variant-ligatures: no-historical-ligatures;
}

.contextual-ligatures {
    font-variant-ligatures: contextual;
}

.no-contextual-ligatures {
    font-variant-ligatures: no-contextual;
}

...but then you wouldn't be able to do like <span class="no-common-ligatures discretionary-ligatures historical-ligatures"> because all of these classes set the same property.

Thoughts?

@martinfjant I'm planning on adding support for caps, numeric, and ligatures as above. Do you have any feedback on the class names?

As for the other features, font-variant-position and font-variant-alternates don't seem well supported enough yet (only Firefox), and I am not familiar with East Asian scripts.

@martinfjant I'm planning on adding support for caps, numeric, and ligatures as above. Do you have any feedback on the class names?

As for the other features, font-variant-position and font-variant-alternates don't seem well supported enough yet (only Firefox), and I am not familiar with East Asian scripts.

I think the names you've chosen sounds pretty good :). As for ligatures, you would hardly ever have a reason to use the more than one of the classes anyway, so, I don't think they would pose an issue.

Thank you @martinfjant, I just released v2.2.0 with utilities for caps, nums, and ligatures. I will keep this issue open to discuss other OpenType features to implement in the future, such as position (super/subscript), alternates, and more.

+1

@felipepodesta Which OpenType feature(s) are you missing? Any suggestions on how to implement them (class names)?

Heads up: the classes for caps, nums, and ligatures will change in v3.0 of the plugin, because I'm adding them to the theme to allow customizing them (instead of just an option to enable/disable them globally). Therefore all utilities in the same "group" need to share a prefix, which will be caps-*, nums-*, and ligatures-*:

• normal-caps => caps-normal
• small-caps => caps-small
• unicase => caps-unicase
• normal-nums => nums-normal
• diagonal-fractions => nums-diagonal-fractions
• normal-ligatures => ligatures-normal
• no-ligatures => ligatures-none

I just published the next branch with these changes, take a look at the README or the CHANGELOG for more details.