Sashfold 0.0.7

The fourth pre-release of Sashfold, and the largest so far: forty-seven changes since 0.0.6. The theme of it is that a page no longer has to read left to right and across the page to be laid out correctly. The whole bidirectional algorithm is written and scored, so an Arabic or Hebrew page comes out with its boxes on the right side; the vertical writing modes are laid out, so a Japanese page can run down the page and across it; and the flow-relative properties modern stylesheets are actually written in — margin-inline, padding-block and the rest — are read at last, where before they gave a page no padding at all. Boxes that scroll became boxes you can scroll. The CSS reference tests went from 7215 of 13,477 to 8345 of 14,616, the count having grown because the writing-modes directory joined the scored set. Still every byte is written in this repository, and still it does not pretend to do what it cannot.

What's New

• Right-to-left pages — direction, the dir attribute, dir="auto", and unicode-bidi's embeddings, isolates and overrides, over the complete Unicode bidirectional algorithm — 861,948 conformance cases, all passing. A line is reordered as the algorithm says, a run that reads the other way has its characters reversed and its brackets mirrored, and the boxes follow: a flex container's two axes, a grid's columns, a table's columns, the first line's indent, the room a width leaves over, and where a box out of the flow stands when it names no offsets.
• Vertical writing — writing-mode: vertical-rl, vertical-lr, sideways-rl and sideways-lr. Lines stack across the page, text runs down it, every glyph of a horizontal script turns a quarter circle, and a box whose mode differs from the one around it is laid out in a frame of its own and turned back into the page when it is done.
• The flow-relative properties — margin-inline, padding-block, inset-inline-start, border-block-end, the logical sizes and the four-side shorthands. Modern stylesheets are written in these, and until now they were not read at all.
• Boxes that scroll — overflow: auto and scroll are scroll containers, not just clipping. A wheel over a pane moves the pane and passes the notch outward when the pane has no room left, exactly as a browser should; a pane that can only move across takes a plain wheel that way, which is what a wide table in a narrow column needs. Scrollbars are drawn, their thumbs can be dragged, the track beside them pages, the keyboard follows whatever you last moved, and find-in-page and #anchor links reach inside.
• See-through boxes — opacity between zero and one paints what it should. A box at half strength is composited as one group, so where two things inside it overlap the one underneath does not show through the one above.
• Highlighted spans join the stack — An inline box can now carry a z-index, a transparency, a transform or position: sticky, and its words travel with it instead of being buried under its own background.
• Boxes that stick — position: sticky holds a box inside what its offsets leave of the scrollport it is in, without letting it leave the block that contains it.
• :has() and :nth-child(… of S) — A selector can ask what an element holds, and count only the children that match a selector of its own.
• Lists that number themselves — Markers are placed as the specification asks, inside or outside; the automatic list-item counter carries start, an item's own value and an author's counter-reset through to the number that is drawn; counter() and counters() see what their scope can see.
• Justified text — text-align: justify shares out the room a line did not use, with text-align-last and justify-all for the line that ends the block.
• Text cased on the way out — text-transform: uppercase, lowercase and capitalize.
• Intrinsic sizes — min-content, max-content and fit-content as widths, so a box can be asked to be the size of what it holds.
• box-sizing: border-box — A written width can name the border box, which is how most stylesheets are written.
• Flex auto margins — margin-left: auto on a flex item takes the room the line has left, which is the "push this one to the far end" navigation bar idiom. flex-basis: content with it.
• A grid row shares a baseline — Items in a row are measured, the furthest baseline wins and the rest are pushed down to meet it.
• A picture sits on its line properly — An image in a line of text is placed against the line's baseline, and down a vertical page it is set astride the line rather than standing on it.

What's Fixed

• A modern stylesheet gave a page no padding — padding-inline: 1rem and its relatives were parsed as nothing at all, on an English page as much as an Arabic one.
• A relatively positioned <span> moved nothing — offsets on an inline box were dropped, which was also why most of the line-height reference tests failed.
• margin-left: auto did not push a box to the far end of its block.
• A table cell's written height now belongs to its row, so a row is at least as tall as the cell that asked for it.
• An absolutely positioned box beside a float began one float-width in and left what it was meant to cover showing. It now starts where its block's content starts.

What's Not Written Yet

• No scripting — Pages render as served; JavaScript is not run. Pages that build themselves with scripts arrive blank, their menus and banners do not toggle, and a benchmark that drives itself cannot start.
• Layout gaps — subgrid and masonry are passed over; a grid's columns do not share a baseline yet, and neither do a flex line's items; line-clamp; margin-trim. Scrollbars are drawn over the content rather than taking room from it, the way an overlay scrollbar does.
• Painting gaps — Shadows, outlines, filters, border-image; a transform can translate but not rotate or scale; background-attachment: fixed scrolls with the page.
• Text gaps — text-overflow, hyphenation, word-break, ligatures and complex-script shaping, so Arabic letters do not join and a combining mark in a reversed run lands on the wrong side. text-transform uses the simple case mappings, so sharp s stays sharp s. In vertical text, text-orientation and text-combine-upright are not written.
• Media gaps — WOFF fonts, WebP, AVIF and SVG pictures, animated GIF beyond the first frame, audio and video.
• Windows only for the window — The engine and its command line build and test on Linux and macOS in CI; there is no Linux or macOS window yet.

Measured

• CSS reference tests — 8345 of 14,616 over CSS 2 and sixteen CSS module directories, up from 7215 of 13,477; the count grew because the writing-modes directory joined the scored set. The table is at sashfold.com/wpt.html.
• At 100% — Both html5lib suites (7032 and 1784), WPT URL parsing (893), and the Unicode bidirectional conformance suites (861,948 cases).
• The Sashfold 100 — 88 of a hundred pages of the live web now render, up from 82. What each page asks for that is not written yet is listed at sashfold.com/sashfold100.
• Every one of these is held by CI: a test that stops passing fails the build.

Running It

• Unzip and run sashfold.exe — Keep themes beside it. sashfold.exe https://en.wikipedia.org opens the window on a page; with no address it opens the about page. Downloads go to your Downloads folder.
• Requirements — Windows 10 or 11, 64-bit. The binary is statically linked and imports only the operating system's own libraries, which is checked in CI.
• Source — Linux and macOS build from source with CMake and Ninja; the window itself is Windows for now.