IntroductioninfoGetting StartedConvenient UsageAdvanced UsageExamples
Reactive FormFocus StoreToolbar EllipsisHybrid Modal DialogWord ProcessorHydrationJSXProgrammatic Reactive LayoutRecursive ExampleAnimationDrawerFile SystemThemespaletteWord Processor
100%
2 pages
Temporal Signals on PaperA word processor laid out by cascade.printWhat you are looking atThis document is a model - a sequence of paragraphs, each referring to a paragraph style, each holdingspans of text with styles of their own. It is laid out onto a paper sequence: a render target with noDOM in it at all, where every length is a whole number of micrometers. What you see is that papersequence drawn: each paper at its real size, white on grey, and the text placed on it line by line.The browser is only asked how wide a piece of text is, and how far a font reaches above and belowits baseline. Everything else - which word goes on which line, which line goes on which paper - isdecided by cascade.print itself, so the layout is exactly the same whether it is shown on screen, sent toa printer, or tested without any browser at all.Two steps for every paragraphA paragraph is laid out in two steps, each a repeater of its own. The first breaks it into lines: its text ismeasured and divided for the width it is given. That step does not know, or care, where on the paperthe paragraph ends up.The second places the lines: it starts from wherever the paragraph before it left off, puts its linesdown one after another, and moves on to a new paper when one is full. It is the paragraph's render,onto the paper sequence - a temporal render target, where every paragraph sees the paper sequence asthe paragraphs before it left it.Typing in one paragraph breaks only that paragraph into lines again. The paragraphsafter it are only placed again - and only until one of them ends up exactly where it wasbefore. From there on, nothing is touched.Why it stopsWhat a paragraph leaves for the next is a frozen value: the paper it ended on, how far down it, andthe space it wants after itself. Frozen values are compared by content, not by identity. So when aparagraph is placed again and ends where it did before, the next paragraph reads the same value it readlast time - and has nothing to do.MicrometersEvery length on the paper sequence is an integer in micrometers, a thousandth of a millimeter. An A4paper is 210000 x 297000, a US Letter 215900 x 279400 - both exact. Whole numbers add upexactly, so whether a line still fits at the bottom of a paper never depends on a rounding error.Font sizes alone are kept in points, as typography does. Shown on screen, micrometers becomeCSS millimeters - so a paper is drawn at its real size, and zooming scales it as a whole.
PapersSwitch between A4 and Letter above: the section's paper changes, every paragraph gets a new width,and the whole document is broken into lines and placed again. Zoom in and out: nothing is laid outagain at all, it is only drawn at another scale.Print sends the papers to the browser's print dialog, one sheet per paper, each the size of its paperand nothing around it. What comes out of the printer is what is on the screen, because it is the samedrawing of the same paper sequence.TypingClick anywhere in this text and start typing. Every line placed on a paper knows the paragraph it camefrom and which part of its text it holds, so a click on a paper is turned into a place in the text, and thecaret's place in the text back into a place on a paper. An edit changes the model, the paragraph is laidout again - and the caret is drawn wherever the new layout puts it.What comes nextThe rules that look ahead - a heading that should never be the last thing on a paper, page numbers,"page 3 of 7". Those are the interesting ones for temporal signals, since a paragraph can only see whatcame before it.Until then, this is a fine place to try things. Open the code button above to see how the page is puttogether, or read cascade.print's own README for the model, the two steps, and the measurers.