ridonkulous large-font display issue. fontSize shatters words all over

Question

I'm in the midst writing a Lessig-Method slideware object in javascript (so something fun, not important), and I keep encountering strange text layout anomalies, the likes of which I can't say I've ever seen. And yet, they are pervasive across my slides.

The background is straight-forward. Presentation has Slides, and Slides have Lines. A line, could be a word or a phrase, and in the images I'm linking, the slides have three Lines.

The presentation "screen" is the viewport of the browser window. The CSS line-height property of each Line is calculated by the viewport height divided by the number of lines. Each Line is a div with a font-size comfortably below the line-height (90%, but set in px).

A good looking slide looks like the first one on this page: bbby.org/share/so_pics.html

(I can add only one link).

Here's where it gets weird: Because everything calculates based on the viewport size, having the firebug console up, or switching to full-screen mode adjusts everything's size (upon refresh). In some cases, the first one to three letters of a word pushes all the way to the left of the screen, stacking on top of each other. The only thing different is that I went fullscreen and refreshed (and new sizes were calc'd).

Depending on the font-size modifier I set (90%, 80%, but again set in px), it could happen on a regular view (not full screen).

Has anyone ever seen anything like this before?

Answer 1

Funny that there are badges for trolling. I'd hate to see this site become the new youtube or failblog in our comments are issued.

That aside, the effect is controllable (though still not explained). By fine tuning the fontSize via script, I can see at what point certain letters in words fall apart.

For example, in a div with lineHeight=269 , the letters "ri" from the word "right" fly away as pictured in the original post with a fontSize >= 209 , but nothing under. The letter "l" in the word "left" has a higher number, possibly increased because "f" is also a tall letter.

For a currently consistent workaround to this very real and troubling problem (tyvm), I'm setting the fontSize attribute to be 73% of the lineHeight on the parent container.