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 Having usual <p> and <span> elements and controlling...