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…