How to access alternates through CSS

Igor Petrovic
Igor Petrovic Posts: 297
in Font Technology
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
Tagged:

Comments

  • Thomas Phinney
    Thomas Phinney Posts: 2,883
    > 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
    John Hudson Posts: 3,186
    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
    Michael Rafailyk Posts: 146
    edited February 13
    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
    Christian Thalmann Posts: 1,983
    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
    Thomas Phinney Posts: 2,883
    They do.  :(
  • John Butler
    John Butler Posts: 290
    edited February 13
    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
    John Butler Posts: 290
    Also check SS11 vs ss11. Someone told me feature tags are case-sensitive.
  • John Hudson
    John Hudson Posts: 3,186
    All OpenType tags are case sensitive: script and langsys tags too, as are sfnt table tags.
  • Christian Thalmann
    Christian Thalmann Posts: 1,983
    edited February 14
    (I used "ss11" in lowercase in the html, but it doesn't matter if the fonts are mutilated...)

Categories