robertknight/tex-linebreak

HTML justification does not handle floats

Opened this issue · 2 comments

robertknight commented

When calculating the available width of lines, the HTML element justification function justifyContent does not respect any floats which may exist on the page. The result is that the justified text "runs across" the floated content.

Steps to reproduce:

  1. Go to a Wikipedia article (eg. https://en.wikipedia.org/wiki/Yugoslav_destroyer_Dubrovnik)
  2. Install the bookmarklet in src/demos/bookmarklet.js
  3. Activate the bookmarklet

Expected: Justified text wraps around the image near the top of the page
Actual: Justified text runs through the floated image at the top of the page

gwern commented

Is this related to the buggy handling of lists? I tried out the bookmarklet to see whether it'd be good for mobile, but on the first page I tried in my FF, it broke the lists by setting them extremely widely and causing horizontal scrolling:

xwd-16372690271810490

robertknight commented

Is this related to the buggy handling of lists?

This looks like a new issue that depends on the browser and something (I don't know what yet) about the page. Testing the bookmarklet from src/demos/bookmarklet.js on this news article I see correct layout in Safari 15 but broken wide layout in Firefox 94 and Chrome 97. The layout is working correctly in all browsers on my blog.