Simulating PDF features in HTML5 and SVG – Character spacing

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

Text on PDF page

 

Attempting to write out is tricky in HTML5 is tricky because we cannot have individual spacing between glyfs.

html stringSo the best solution in this case is to put each glyf in its own div so we have full control over position.

html text

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.

 

 

 

Related Posts:

The following two tabs change content below.

Mark Stephens

System Architect and Lead Developer at IDRSolutions
Mark Stephens has been working with Java and PDF since 1999 and has diversified into HTML5, SVG and JavaFX. He also enjoys speaking at conferences and has been a Speaker at user groups, Business of Software, Seybold and JavaOne conferences. He has a very dry sense of humor and an MA in Medieval History for which he has not yet found a practical use.
Markee174

About Mark Stephens

Mark Stephens has been working with Java and PDF since 1999 and has diversified into HTML5, SVG and JavaFX.

He also enjoys speaking at conferences and has been a Speaker at user groups, Business of Software, Seybold and JavaOne conferences. He has a very dry sense of humor and an MA in Medieval History for which he has not yet found a practical use.

2 thoughts on “Simulating PDF features in HTML5 and SVG – Character spacing

  1. Zach

    Maybe I’m not understanding the problem correctly but couldn’t the css property letter-spacing and word-spacing do the same thing without the need to break up each letter? Just a thought.

  2. You can do so long as it is a uniform value across the div. We have quite a few files where the usages gets changed and the spacing is already being used to tweak the font positioning.

    We looked at the examples and the simple solution worked well on them so we used that route for this issue.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>