Note that there are some explanatory texts on larger screens.

plurals
  1. POridonkulous large-font display issue. fontSize shatters words all over
    primarykey
    data
    text
    <p>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.</p> <p>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.</p> <p>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).</p> <p>A good looking slide looks like the first one on this page: <a href="http://bbby.org/share/so_pics.html" rel="nofollow noreferrer">bbby.org/share/so_pics.html</a></p> <p>(I can add only one link).</p> <p>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).</p> <p>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).</p> <p>Has anyone ever seen anything like this before?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload