How to access alternates through CSS
Igor Petrovic
Posts: 291
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
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:
0
Comments
-
> 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.1 -
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.3 -
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.1 -
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?
0 -
They do.2
-
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.
1 -
Also check SS11 vs ss11. Someone told me feature tags are case-sensitive.
1 -
All OpenType tags are case sensitive: script and langsys tags too, as are sfnt table tags.2
-
(I used "ss11" in lowercase in the html, but it doesn't matter if the fonts are mutilated...)
0
Categories
- All Categories
- 40 Introductions
- 3.7K Typeface Design
- 795 Font Technology
- 1K Technique and Theory
- 613 Type Business
- 444 Type Design Critiques
- 539 Type Design Software
- 30 Punchcutting
- 136 Lettering and Calligraphy
- 83 Technique and Theory
- 53 Lettering Critiques
- 480 Typography
- 300 History of Typography
- 113 Education
- 67 Resources
- 495 Announcements
- 79 Events
- 105 Job Postings
- 148 Type Releases
- 162 Miscellaneous News
- 269 About TypeDrawers
- 53 TypeDrawers Announcements
- 116 Suggestions and Bug Reports