Troubles with html entities referred to specific glyphs (HTML, FontLab)

P. Galihutson's picture

Hello everyone,
I try to explain you the problem.

I created a typography that has both common (e.g. between "f" and "i") and custom (e.g. between "p" and "p") ligatures and used FontLab to export the font in ttf.
Now I want an HTML page to display the font and I write & #xFB01 for common ligature between "f" and "i".
But where should I operate to display custom ligature between "p" and "p"?

Thank you in advance for your attention!
Filippo

Frode Bo Helland's picture

This is most certainly not called “a typography”. I have no idea what that means.

Option 1: Give the pp ligature a unicode slot in the PUA area. This is the worst option, because it isn’t indexable, copyable or readable for the blind. So, some users may not be able to read it — but all users can see the decoration.

Option 2: Write an OT liga feature to substitute two p’s for a pp ligature, and reference it with CSS. This is a somewhat better option. Text remains indexable, copyable and readable for all. Unfortunately, OpenType features are still not supported by all browsers. So, some users may not see the decoration — but all users can read it.

Té Rowan's picture

I think, Frode, we can safely assume he meant typeface and font.

Filippo: MUFI (the Medieval Unicode Font Initiative) assigned the PUA slots uniEED6 to the pp ligature and uniEEDD to the PP ligature in its character lists. So, if you take the first route, these slots are slightly better than others. They would, in HTML, be  and  respectively.

But as Frode says, the second option is better. Doing both may be even better, though.

P. Galihutson's picture

Thank you guys and sorry for my English that is a bit unclear..! Yes I meant "typeface" instead of "typography".

Returning to the problem I tried with the second option and discarded the first one! I created the glyphs (and ligatures) and kerning pairs in Fontlab and then activated them by css properties @font-face, text-rendering, font-variant-ligatures and font-feature-settings.
The result?

Google Chrome on Mac: Ok but some kerning pairs are missing (e.g. between lowercase o and superscript 1).
Mozilla Firefox on Mac: Ok.
Opera on Mac: Ok but some kerning pairs are missing (e.g. between lowercase o and superscript 1).
Apple Safari on Mac: Fail, it does not render ligatures and, even more serious, kerning (!!!).
Internet Explorer: Still not tested.

Google Chrome on iPhone: Ok but some kerning pairs are missing (e.g. between lowercase a grave and z_z ligature).
Opera on iPhone: Fail, it does not download .ttf font.
Apple Safari on iPhone: Ok but some kerning pairs are missing (e.g. between lowercase a grave and z_z ligature).

As you can see, it is difficult to identify the problem because, where there are minor problems, only some kerning pairs are missing. Any suggestion to fix this problem in cross-browsing?
And what about desktop Apple Safari? Why doesn't it render kerning pairs?

Thank you in advance for your attention!
Filippo

P. Galihutson's picture

To try to solve the problems I think I should tell you something more about my process in Fontlab, a software that I do not control very well yet.

Here are the list of actions done:
1) Created glyphs in Illustrator and imported to Fontlab (only a few glyphs).
2) Specified the width of every glyph.
3) Set the settings in "Font Info".
4) Set the language system in the Open Type panel (languagesystem latn dflt;).
5) Created the ligatures features in the Open Type panel (and compiled).
6) Opened the Metrics panel and manually set the kerning between specific pairs of glyphs.
7) Saved and exported font in .otf e .ttf formats (the one I tried on the html+css page is the True Type .ttf).

I ask you experts if there is something wrong. Maybe the kerning problems in different browsers originates from the fact I set kerning in this way?

Thank you for the attention!
Filippo

Syndicate content Syndicate content