Using OpenType in Web Typography

Idea

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

To begin, let me explain what OpenType is and why it is needed. In essence, 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), well, and a lot more. And, unfortunately, with the usual HTML layout, most OT features cannot be set, and browsers even support those that exist (for example, small caps) that support small caps incorrectly. Thereby, in web typography, a certain “vacuum” or field for activity remains.

The use of OT in the text of the page at the moment seems to me a bad idea. First, few users have computer fonts that are rich in OT-features on their computer. Secondly, it is unclear how the search engines, for example, will recognize all the new letters - because if the page has fi instead of f and i is a ligature fi, the search engine will need to find out from somewhere that it really is a ligature. (Let me remind you that it’s impossible to write just two letters side by side and mark a block as using ligatures in HTML / CSS.)
')
I decided to choose a more modest goal - creating headlines. For this, I outlined the following requirements:

• Headings should use the same 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.
• Headings should be well typed and work with the browser's zoom function.
• All replacements of the usual typographic substitution should work (for example (c) on ©)

Implementation

For implementation, I chose SVG technology, and thus the bay most users - those who use IE. Since the developers of IE do not make any progress in terms of SVG, for this browser just displays the text. This works so far under Firefox and Opera, and although the Internet continues to feed us with rumors that the SVG in IE is not far off, yet, alas, we have to make a fallback. And now the actual technical details.

The text rendering algorithm 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 users.

In order to get the “stuffing” from the OT file, I wrote my parser for OTF / TTF files. I wrote the parser as a pair of XML + XQuery which, on output, generated C # code with all OT structures described in the official specification . The resulting library simply stuck into 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 a special OT markup (I created the markup myself, because I did not find anything similar), and “apply” all features to the text passed to it. Of course, I didn’t cover all the functionality, because This is not a task of one day, but I wanted to get a solution quickly. Here is a rough list of features for which I made support (links lead to Wikipedia):

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

Next, I wrote a simple code that takes the transformed text and turns it into an SVG. Actually, I did not write the code for pulling out vector data - I used the ready-made FormattedText object from .NET 3.0 which besides translated the text into vector forms, I also used kerning (the correct distance between letters), thereby freeing me from my own implementation.

The final touch is to place the result on an ASP.NET page and create an interface to use. In order for search engines to correctly find the headers, I add to the page both a link to the SVG file and an invisible ( display: none ) header in plain 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 . At once I will say that there is a rather damp version of the code, and I am still finishing the parser, since at the moment he cannot parse the absolute OT files (I have a large enough sample for testing). And yet, my system is not yet able to build files from text that uses more than one headset - a rather serious drawback, which, unfortunately, is not clear how to install without writing your vector data collector.

The main disadvantage of my approach as a whole is that all this does not work in IE. Another drawback is that it is written in C # under .NET 3.0 and thus is 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 for another system is not that difficult. Then you just have to write code that will make vector rendering of OT-text and create an SVG file from it, since I currently rely on specific .NET functionality.

One of the unsolved problems is rendering SVG in Google Chrome as well as in IE with a plugin from Adobe. I suspect that the problem is that these browsers cannot recognize the file size simply by reading it and they need to “help”. If so, this flaw 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’m using words like “font” instead of “headset”, and maybe I’m not completely subtle about typographical terms, for which I ask the community to forgive me.