OpenType features in HTML5 (ligatures etc.)
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:
- 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)
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).
Both an engineer and a layout artist, Matthias bridges the gap between technology and people.
Before joining Quark, Matthias pioneered print, Web, and multimedia products for multiple German publishing companies. Since 1997 he has played a central role in shaping Quark’s desktop and enterprise software.
Starting 2003 Matthias has focused on Quark’s interactive and digital publishing solutions. He is an active participant in design and publishing communities and represents Quark in the Ghent PDF Workgroup.
Since February 2014 Matthias heads Quark’s Desktop Publishing business unit and is therefore responsible for QuarkXPress.
Hi Matthias,
I always enjoy your training seminars on You Tube, however I would like to see one that would accomplish two things:
1. Build a magazine start to finish, and export to wordpress site with rich animations, fly in etc.
2. Export the wordpress magazine to an app that would play on a PC.
A bonus would be how to get a magazine to be able to be read on the Nook App, while retaining it’s rich animations.
Hi Juan, thank you, glad you like them. What I do not understand about your request is, why you want to export a WordPress site to an app? Can you explain please? If longer, please feel free to join our community ( https://www.facebook.com/groups/quarkxpress/ ) or send me an email mguenther at quark com. Thanks.