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.

Simulating PDF features in HTML5 and SVG – Character spacing

53 sec read

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.

 

 

 

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.

Converting your PDF files to SVG with PDF2SVG

Last month we announced an updated product range for 2018. One of the changes is we have rebranded JPDF2HTML5 to BuildVu. This is because the...
Leon Atherton
1 min read

Converting your PDF files to HTML5 with BuildVu 

Recently we announced our updated product range for 2018 and are rebranding some existing products, like JPDF2HTML5 which has been renamed to BuildVu. It...
Georgia Ingham
3 min read

Favourite resources from our HTML development team

As the web progresses and grows, so do the technologies that come along with it. Trying to keep on top of everything you need...
Ovidijus Okinskas
1 min read

2 Replies to “Simulating PDF features in HTML5 and SVG – Character…”

  1. 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 *