Inspector
Tools
Inspector
The inspector shows the boxes, glue, kerns and penalties of every block, as the browser has just laid them out. Hover a row to outline its node on the page, and select it to see what it is made of. As in Chrome’s, the outline follows the pointer: it goes when the pointer leaves the tree, and the arrow keys bring it back for the selected row. A glue shows the width it was stretched or shrunk to on its line, and a line its glue ratio and font expansion. Resize the window and the tree follows the new line breaks.
On this page the inspector is open from the start, on the example below, docked to the right of the window – or below the page when the window is taller than it is wide. The icons beside its close button float it over the page or dock it on the left, at the bottom or on the right; drag the edge facing the page to resize it. The browser remembers your choice for every page. Elsewhere, press Alt+Shift+I (Option+Shift+I on a Mac), click Inspect on an example’s result, or choose Inspect boxes and glue in the reading options.
The golden ratiois the positive root of, and its continued fraction is all ones:
Every line of this paragraph is broken in the browser, so the glue between its words is stretched or shrunk to fit whatever width it is given.
Things to try
A line. Expand the text segment, hover a line, and the page outlines every node on it: glyphs in blue, glue green and hatched, kerns purple. The line’s row gives its glue ratio – positive when stretched, negative when shrunk.
A fraction. Choose the picker (the arrow in a box, at the left of the inspector’s toolbar) and click theunder the square root. The tree opens at that glyph, inside the boxes TEX built for the radical, the numerator and the fraction; hover each in turn and watch the outline grow.
Vertical space. Between two paragraphs, a heading and its text, or text and a display, a vertical space row lists the glue TEX put there – a \vspace, a heading’s skip, \parskip, a display skip, and the interline \baselineskip glue – each drawn as a band in the space it takes.
Badness. Turn on Badness in the overlays menu (beside the picker) and every line gets a bar at its end: green where TEX would call it decent, amber loose or tight, red at 100 or more. Baselines draws the baseline of every line.
The baseline. Whatever you hover draws a guide along its baseline across the whole window, so you can see what sits on it and what does not.
A reflow. Make the window narrower. The lines re-break, and the open rows follow.
Fonts and glyphs. Switch to Resources and choose a font. The table shows every glyph in its file and marks the ones the page uses. Hover a glyph to outline where it is used; select it to see it drawn in the box TEX gave it. Search by the character, its code point (U+03C6) or its name: try phi in cmmi10.
Pictures and footnotes. Resources also lists the page’s pictures, its streams (a footnote opens its popover from there, and the popover’s boxes appear in the tree), and its links and labels.
Widgets and marks. Resources lists the page’s instances – every widget, aside and stream, with its kind, attributes and parts – the kinds a script has defined, and the marks made with \webspan (or \webid and \webclass). Hover one to outline it on the page.
Colours. Colours shows every colour map the page uses, one cell per colour and tint. Click a theme’s name to switch the page to it. Change a cell with its picker or type any CSS colour, and the page is redrawn at once; Escape in the picker puts the colour back. Export copies the maps as JSON and saves them to a file; Import and Paste load them back, and Reset returns to the page’s own.
On your own pages
The inspector ships with the viewer, in src/inspector/. Serve the folder as it is and include its script after the viewer’s; it does nothing until it is opened, and only then loads its panel. A page’s own controls open it through window.reflowtex.inspector.
<script src="latex-viewer.js"></script>
<script src="inspector/inspector.js"></script> <!-- the rest of src/inspector/ beside it -->
<script>
// open it on one block, e.g. from a button of your own
button.onclick = () => reflowtex.inspector.open(blockElement);
</script>