Using OpenType in Web Typography

Idea

Recently an idea came up: why OpenType is not supported directly in modern browsers and how to get text that is susceptible to OpenType features but not at the same time a picture? Under the cut - my solution to this problem.

First, I’ll explain what OpenType is and why it was needed. In fact, OT is a technology that allows you to put a large amount of additional information into a regular font. For example, you can add alternative styles for letters or numbers, define ligatures, make “small uppercase” letters (capital), and much more. And, unfortunately, with normal HTML layout, most OT features cannot be set, and browsers even those that are (for example, small caps) support incorrectly. Thus, in web typography there remains a certain “vacuum”, or field for activity.

Using OT in the text of the page itself at the moment seems to me a bad idea. Firstly, few users have fonts rich in OT features on the computer. Secondly, it is unclear how search engines, for example, will recognize all new letters - because if the page has ligature fi instead of the letters f and i, the search engine will need to find out from somewhere that this is really a ligature. (Let me remind you that writing just two letters side by side and marking the block as using ligatures in HTML / CSS is not yet possible.)

I decided to choose a more modest goal - creating headers. For this, I have outlined the following requirements:

• Headers should use the OT functionality that I (the user) consider necessary
• Headers should use my font, not the user's font, even if the user does not have this font in the system
• Headers should print well and work with browser zoom
• All replacements of the usual typographic substitution should work (e.g. (s) to ©)

Implementation

For implementation, I chose SVG technology, and thereby the compartment is the majority of users - those who use IE. Since IE developers do not make any progress in terms of SVG, text is simply displayed for this browser. This works for the time being under Firefox and Opera, and although the Internet continues to feed us with rumors that SVG in IE is just around the corner, so far, alas, you have to do fallback. And now the technical details.

The algorithm for rendering text with OT features in SVG is simple: you need to take the source text, apply all the necessary OT features to it (including kerning, of course), translate it into a vector format and write it as SVG. And then just show it to users.

In order to get the “stuffing” FROM the file, I wrote my parser for OTF / TTF files. I wrote the parser as an XML + XQuery pair that generated C # code with all the OT structures described in the official specification . The resulting library just “stuck” in my ASP.NET application.

Having the OT parser, I wrote the following part of the system: a program that takes the text marked up with special OT markup (I invented the markup myself, because I did not find anything similar), and “applies” all the features to the text passed to it. Of course, I did not cover all the functionality, because this is not a single day task, but I wanted to get a solution quickly. Here is an approximate list of features for which I made support (links lead to Wikipedia):

• Ligatures
• Swash (did not find a translation into Russian)
• Different forms of writing numbers
• Capital
• Alternative forms for individual letters.

Further, he wrote a simple code that takes the transformed text and turns it into SVG. Actually, I did not write the code for pulling out vector data - I used a ready-made object FormattedTextfrom .NET 3.0 which, in addition to converting text to vector forms, also applied kerning (the correct distance between letters), thereby freeing me from its own implementation.

The final touch is putting the result on an ASP.NET page and creating an interface to use. In order for the search engines to find the headings correctly, I add to the page both a link to the SVG file and an invisible ( display: none) heading in regular HTML. It is also used to display the title in browsers like IE.

Discussion

In order to show the results, I posted a test page . I must say right away - there is a rather dank version of the code, and I'm still finishing the parser, because at the moment he does not know how to parse absolutely all OT files (I have a large enough sample for testing). And yet, my system does not yet know how to build files from text that uses more than one headset - a rather serious drawback, which, unfortunately, is unclear how to install without writing your vector data collector.

The main drawback of my approach in general is that all this does not work in IE. Another drawback is that it is written in C # under .NET 3.0 and is therefore not very useful for developers whose server uses, for example, Apache. Although, on the other hand, the OT parser itself (this is the most time-consuming part of the work) was written not in C # but in XML, so porting it to another system is not so difficult. Simply then you will also have to write code that will make vector rendering of the OT text and create an SVG file from it, because At the moment, I rely on the specific .NET functionality.

One of the unresolved issues remains rendering SVG in Google Chrome and also in IE with a plug-in from Adobe. I suspect that the problem is that these browsers cannot recognize the size of the file just by reading it and they need to be "helped." If so, then this shortcoming will be corrected in the near future.

Update: fixed for Chrome and IE.

And here’s another disclaimer: I’m not a typographer, so I use words like “font” instead of “headset”, and maybe I don’t quite use typographic terms, for which I ask the community to forgive me.