How to access alternates through CSS

Igor Petrovic

The case is specific, but the question is general:

I'd like to have italic text in Serbian Cyrillic on a website. The font supports it but the default italic introduces Russian forms that differ from Serbian (low б, г, д, п, and т). Is there an easy way to enable Serbian italic glyphs in the text? I assume Serbian forms are packed as stylistic alternates and accessed through the OT feature.

Thanks

Thomas Phinney

> I assume Serbian forms are packed as stylistic alternates and accessed through the OT feature.

They are generally handled via the OT 'locl' feature (not stylistic alternates, or at least not only), which allows them to be applied automatically by supporting apps such as browsers. For this to work, the person authoring the text needs to tag it appropriately, so the browser knows it is Serbian Cyrillic.

John Hudson

In CSS it is also possible to apply an OpenType langsys as an excplicit override to document language tagging. So even if a document is not correctly tagged, if you know how you want it to be presented, you can use font-language-override to invoke the SRB langsys behaviour (presuming this exists in the font and has appropriate locl feature substitutions).

The use case example given in the CSS Fonts Module spec is someone working with a font that supports SRB but not MKD, but wants to use Balkan glyph forms for Macedonian text. Even though the text is tagged as Macedonian, the CSS can provide SRB locl behaviour as a preference.

Another example I can think of is local preference to use the Balkan forms even when reading non-Balkan languages such as Russian.

Michael Rafailyk

HTML

<p lang="sr" class="locl">Text in Serbian</p>

CSS

.locl {
	font-feature-settings: "locl" 1;
}

If the locl feature in web browsers is active by default, then the CSS part is not needed, and it will be enough to just specify the lang attribute for the HTML element.

Christian Thalmann

Hmmm... I just tried to activate SS11 (Frankfurt-style Eszett) in Ysabeau like that, but it didn't work. I'm wondering whether it's just that Google Fonts strips away the stylistic sets?

Thomas Phinney

They do. 

John Butler

If you’re running Firefox, you can use the Inspect function to edit any style on the page and, for example, point it to a renamed local copy of Ysabeau to test your hypothesis. In my example below I change the body font on this page to ElstobD.

John Butler

Also check SS11 vs ss11. Someone told me feature tags are case-sensitive.

John Hudson

All OpenType tags are case sensitive: script and langsys tags too, as are sfnt table tags.

Christian Thalmann

(I used "ss11" in lowercase in the html, but it doesn't matter if the fonts are mutilated...)