html - Line break depends on font size -


browsers (i.e. chrome , firefox) break text differently depending on font size, if container size specified relatively font size

see fiddle

css

#main {     font-size: 12px;     width: 10em; }   <div id="main">     text </div> 

javascript

$('#main').animate({'font-size': '20px'}, 10000); 

you see words jump between lines.

similarly, depends on zoom level (but that's side issue):

normal size zoomed in

"share research" fits in line if zoom in.

this looks rounding error. there way prevent it? can fix line break positions?

of course, html not intended typesetting. need solution. converted page pdf wkhtmltopdf , html pdf2htmlex , worked, removes semantics html (paragraphs, lists etc.) , creates bitmaps list bullets.

i'm looking alternative solution zoom content. real constraint using html wysiwyg editor input.

i use solution. wherever want page break, put div instead of br

<div class="lnbreak"></div>  .lnbreak{    border-top : 10px solid #ccc; } 

Comments

Popular posts from this blog

Detect support for Shoutcast ICY MP3 without navigator.userAgent in Firefox? -

web - SVG not rendering properly in Firefox -

java - JavaFX 2 slider labelFormatter not being used -