Options

How to access alternates through CSS

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

Comments

  • Options
    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.
  • Options
    John HudsonJohn Hudson Posts: 2,977
    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.
  • Options
    Michael RafailykMichael Rafailyk Posts: 141
    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.
  • Options
    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?
  • Options
    They do.  :(
  • Options
    John ButlerJohn Butler Posts: 246
    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.
  • Options
    Also check SS11 vs ss11. Someone told me feature tags are case-sensitive.
  • Options
    John HudsonJohn Hudson Posts: 2,977
    All OpenType tags are case sensitive: script and langsys tags too, as are sfnt table tags.
  • Options
    Christian ThalmannChristian Thalmann Posts: 1,941
    edited February 14
    (I used "ss11" in lowercase in the html, but it doesn't matter if the fonts are mutilated...)
Sign In or Register to comment.