Sometimes, there is no direct conversion for a PDF feature in HTML5 or SVG, so a little ‘creative thinking’ is required. I came across an interesting example today which I thought would make a good blog post.
Generally, our strategy with text on a page is to try to group the glyfs together to reduce the filesize and improve speed. However, the PDF file format has a text spacing mode which allows you to put a unique gap between each letter on the page (Character spacing set by the Tc command).
Text in PDF file with a TC setting set to put a gap between the letters
Attempting to write out is tricky in HTML5 is tricky because we cannot have individual spacing between glyfs.
We could add some tracking to the text div but we have less flexibility in HTML5 so in this case we accept the slightly bigger file for total control over text position.
Like any translation activity, converting from PDF to HTML5 and SVG is about trying to convey the meaning as well as possible rather than just changing it a word at a time and I will be looking at some more examples soon.
This post is part of our “SVG Article Index” in these articles, we aim to help you build knowledge and understand SVG.