Mark Stephens Mark has been working with Java and PDF since 1999 and is a big NetBeans fan. He enjoys speaking at conferences. He has an MA in Medieval History and a passion for reading.

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.

 

 

 

IDRsolutions develop a Java PDF Viewer and SDK, an Adobe forms to HTML5 forms converter, a PDF to HTML5 converter and a Java ImageIO replacement. On the blog our team post anything interesting they learn about.

Mark Stephens Mark has been working with Java and PDF since 1999 and is a big NetBeans fan. He enjoys speaking at conferences. He has an MA in Medieval History and a passion for reading.

Enabling SVG Gzip Compression on Apache and NGINX

Gzip compression is a widely supported method of reducing the size of the content sent from a web server in order to improve the...
Leon Atherton
47 sec read

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

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 *

IDRsolutions Ltd 2019. All rights reserved.