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.
Did you know...
IDRsolutions offers a whole range of online file converters to convert PDF and Microsoft Excel, Word and Office Documents to HTML5, SVG or image formats?
It is free to use for single file conversions and also includes Developer links if you want to use our commercial software for bulk conversions. Find out more on this page