Can you use OpenType features in HTML5?

Yes, most modern browsers support OpenType features such as ligatures:

https://caniuse.com/#search=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:

1. Create a Digital layout via “File > New > Project” (Command+N) and choose “Digital”.
   (Alternatively you can convert a Print layout to a Digital layout.)
2. In Preferences make sure that you enabled “OpenType support for Digital”.
3. Use a font that has OpenType features such as ligatures.
4. Export as HTML5 (or ePub or native app)

Example

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.

Live Example

If you want to see the live example in your own browser, please click here:

http://www.quarkforums.com/resources/2018/Ligatures

Does it work in your browser? Let me know please.

Bottom line

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).

Matthias Guenther

Both an engineer and a layout artist, Matthias bridges the gap between technology and people. Before joining Quark in 1997, Matthias pioneered print, Web, and multimedia products for multiple German publishing companies. He is an active participant in design and publishing communities and represented Quark in the Ghent PDF Workgroup.

From 1997 until 2019 Matthias played a central role in shaping Quark’s desktop, mobile and enterprise software. From February 2014 until January 2019 he headed Quark’s Desktop Publishing business unit; and was therefore responsible for QuarkXPress.

Matthias does not work for Quark anymore. If you want to connect with him, please visit his LinkedIn profile on https://www.linkedin.com/in/mguenther/