Pixel perfect typography in HTML : canvas or span?

The support for rich typographic features for Web is increasing continuously. Support for web fonts with @font-face rules and open type features was a big leap forward. For some beautiful examples see Awwwards typography section: https://www.awwwards.com/websites/typography/

But its still well behind the high end capabilities of page layout design and publishing desktop applications such as QuarkXPress, Adobe InDesign, Scribus, Serif PagePlus/Upcoming Affinity Publisher etc. Text with rich typographic control provided in these kind of applications cannot be represented on Web with simple mapping of objects to html elements and properties/attributes to css styles.

So I was tasked with a similar requirement: The rich typographic contents of the page layout and designs of the application must appear pixel-perfect in html browser and different e-readers.

The analysis narrowed down to a couple of ways

1. Having usual <p> and <span> elements and controlling their position and letter spacing & word spacing attributes in ways that emulates how these are rendered in the applications. This technique (or trick?) has been alluded to in a webkit bug also: https://bugs.webkit.org/show_bug.cgi?id=20606)
2. Using <canvas> element which provides a drawing surface on which we can draw text, shape or images.

At first glance, canvas appeared to suit the task given the level of control it provided. However the target of my task was not limited to html for web, it included eBooks (ePub, Mobi, HTML5 content based iOS & Android Apps). So the following reasons exposed the limitation of <canvas> when used for rendering text, especially in eBooks

1. Text is not selectable. Canvas is a drawing surface, but to do anything over top of that, you need to do event handling. For text selection mouse and key event handling is required to simulate the selection.
   See this question on Stackoverflow about text selection in <canvas>: How to Make <canvas> text selectable?
   The answers suggest its laborious to implement, and there are a few references on how to do that.
2. As text in <canvas> is not selectable, you cannot copy the text. Again event handling would be required for copy-paste. Selecting text, copying are a normal action for any eBook.
3. As its raster-based and not the native text, the quality is not good if we zoom in browser.
   See this question on Stackoverflow about the same: Zooming on HTML5 <canvas> and no pixelation for text? Answers even suggest to use <span> instead of <canvas>.
4. It won't work where Javascript is not supported, as <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics. If you are thinking this is not a big issue as all browsers support that, just think again of the eBook readers. Amazon kindle, the most popular one, does not support scripts and hence does not support <canvas> tag. This alone is the main reason for no longer considering <canvas> a choice for text. For Amazon Kindle supported tags see: https://kdp.amazon.com/en_US/help/topic/G200673180
5. Search doesn’t work. Similar to text selection and copying, searching may only be possible with additional event handling. Browser and eBook reader native support for searching won't do.
6. Other reader features e.g. dictionary, footnote popups in eBook readers such as iBooks or even in browser plugins don’t work.
7. For features such as hyperlinks, it requires rendering the underline as well as the navigation to url handling.

Considering above limitations of <canvas> for text selection, searching, hyperlinking etc., its very clear that using <canvas> for text in eBooks not only requires too much event handling, but also it makes it very hard for eBook reader applications and browsers to provide their normal text related services.

Probably its one of the reasons the Box and some other Web Apps use position controlled <span> elements to render the docx files in browsers that are pixel perfect match of how it shows up in MS Word desktop application.

That said, there are many uses of low level control provided by canvas for text rendering such as the web versions of traditional page layout and design applications. LucidPress is a great example which uses <canvas> and yet provides all text editing related operations in normal ways you do in any text editing application.

Disclaimer :  Opinions expressed are solely my own and do not express the views or opinions of my employer.