PDF to HTML5 conversion – Hyphen is a special character

A dash or hyphen is a special character in HTML5 and needs to be treated with care. The reason is that it is not just a character but an indicator of a line break which is picked up by the width properties of the div element. So if you have the div element

<div>party games</div>

a browser will give you the width of a single height text element of 11 characters.

But

<div>party-games</div>

returns a width of 6 characters by default and assumes it can be wrapped. If we are trying to adjust the text to get a best fit, this will obviously cause a lot of problems. In the screenshot you can see what can happen.

The HTML page contains a div element with a hyphen

The single div element contains the text “Der 63-jährigeCano, dessenrichtiger” but as far as the width is concerned, the div contents are “Der 63-“. So if we try to adjust the content to fit the space we get a mess with the text wrapped over the next line. Not pretty 🙁

The solution is to break this into 2 divs (with the – end the end of the first value)

and it looks much better!

I think it can be improved still further, but that is for another post…

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