Can you use OpenType features in HTML5?
Yes, most modern browsers support OpenType features such as ligatures:
Does QuarkXPress allow you to use OpenType features in HTML5?
Yes, starting with QuarkXPress 2018, OpenType features such as ligatures can also be used in live text in Digital layouts. Before QX2018 this was restricted.
If you haven’t tried it, QuarkXPress can create pixel perfect Digital layouts that you can export as HTML5 and create a flip-book style HTML5 Publication. Either static or with rich interactivity. You can also easily convert Print layouts to Digital layouts.
It’s easy to apple OpenType in Digital layouts:
- Create a Digital layout via “File > New > Project” (Command+N) and choose “Digital”.
(Alternatively you can convert a Print layout to a Digital layout.)
- In Preferences make sure that you enabled “OpenType support for Digital”.
- Use a font that has OpenType features such as ligatures.
- Export as HTML5 (or ePub or native app)
In QuarkXPress create a text box and use a font that offers OpenType features. This example uses the Vollkorn font, a free typeface: http://vollkorn-typeface.com/
This is how it looks like in QuarkXPress 2018.
Top of the table: On the left side the ligature feature has been applied in QuarkXPress, on the right side it hasn’t.
Lower part of the table: See other features like kerning applied or Oldstyle numbers and real fractions.
When you export, this is how it will look like (here: Safari 11.1):
(Please note in above screenshot that you can select the individual letters of the ligature!)
Of course this will work in other browsers too, like Chrome or Firefox, on Android, iOS, MacOS and Windows.
If you want to see the live example in your own browser, please click here:
Does it work in your browser? Let me know please.
Now that all modern browser and QuarkXPress support OpenType functionality in HTML5, you can use rich typography both in Print and HTML5 publications. Use it in Web Apps (HTML5 Publications), ePubs or native apps (that use HTML5 for content).
Nice side effect: If you plan to replicate your print layout as a digital layout and you have used OpenType features, then your HTML5 Publication will look the same as the print layout and stays live text (searchable, no image).