scrollwrap

Overview ¶

Command scrollwrap puts a scroll container around the elements that overflow a narrow screen.

<table>...</table>  ->  <div class="scroll" tabindex="0"><table>...</table></div>

A wide table or a long line of code makes a whole page scroll sideways, which is the thing that makes a site unusable on a phone. The fix is a container with overflow-x on it, and the container has to be focusable, because a region that scrolls and cannot be reached by keyboard is a new problem in place of the old one. The class is the caller's to style; this program only puts it there.

A wrapper is two insertions and the parser decides whether they wrap. Three things it decided, all measured in differential/wrap_test.go:

• A <div> closes an open paragraph. Wrapping something inside a <p> in a div takes it out of the paragraph, orphans the text that followed it and leaves an empty paragraph behind. A <span> does not.
• A <span> cannot hold an element that closes a paragraph by starting - a <pre>, or a <table> in standards mode - so the span comes out empty and the element is outside it. There, the div is the right wrapper: it leaves the paragraph with the element, which the element was leaving anyway.
• Which bucket a table is in depends on the doctype. Without one the document is in quirks mode, where a table does not close a paragraph, and the answer flips. The doctype arrives before any element, so this program can read it and does.

So inside a paragraph the wrapper is a span or a div depending on the element and the doctype, and outside one it is always a div. A wrapper element that is wrong for its position does not fail, and nothing in the output looks damaged: it just wraps nothing, or moves what it was wrapping.

The closing half is the end-tag rule. </div> goes at the element's own end tag, and an element whose end tag the document left out has no position to write at - so those are reported rather than wrapped, since a container closed in the wrong place is worse than none. See lolhtml.Element.OnEndTag.