Specifying, measuring and creating anonymous boxes

Hello,

I would like to share my ideas which I think are in the scope of project Houdini.
I would be glad to hear your opinions.


1. Specifying and measuring anonymous boxes

AFAIK there is currently no API to get anonymous boxes such as
one generated around a text that is sibling to a block,
a column in a multicolumn environment, a line box, etc.
Being able to access and measure such boxes from API is
very important for script authors to do layout/typography
experiments and write polyfills.
For example, information of line box dimensions are
indispensable for controlling fragmentation (page, column, region)
break, especially when widows and orphans are considered.

The idea of measure API shown on the project wiki page[1]
may be extended to be applicable to anonymous boxes,
given a way to get objects representing such boxes is provided.
Possible solutions in my mind are:

 a. Define selectors for several types of anonymous boxes
    and provide APIs to get box objects with them
    e.g. :nth-line() for line boxes, :nth-column() for columns etc.
    Since querySelector() only works for elements, we need
    new APIs to get the boxes with such selectors.

 b. Expose the box tree through API
    I imagine (very roughly) something like this:

    // get a box of an already laid-out element
    var containerBox = element.layoutBox;
    // or that of an element not attached to the DOM [1]
    var containerBox = measureBlock(element, {sizing-info}, {style-info});
    // get boxes laid out inside the containerBox
    var childBoxes = containerBox.childBoxes;
    // get a line box in a box
    var lineBox = childBoxes[0].lineBoxes[0];
    // or get a line box in the box with specified coordinates
    var lineBox = childBoxes[0].lineBoxFromPoint(x, y);


2. Creating a layout box and attaching a DOM range to it

As of now, polyfills trying to simulate fragmentations, such as
regions[3] and pages[4] are forced to break the DOM into pieces
to emulate fragmentainers with elements.
We want to avoid destroying the DOM, which may leads to
incompatibility with other scripts or difficulty with editing the document.

A solution to this would be to provide APIs to create a new box
not associated with an element, style and place it, and attach
a DOM range to be laid out inside it.
With such APIs, polyfills would be able to do layout experiments
much more easily without modifying the DOM.


[1] https://wiki.css-houdini.org/explaining-css-layout#measurebox-tree
[2] http://dev.w3.org/csswg/css-display/#the-display-inside
[3] https://github.com/FremyCompany/css-regions-polyfill
[4] https://github.com/fiduswriter/simplePagination.js

-- 
Toru Kawakubo
Vivliostyle Inc.
http://vivliostyle.com

Received on Tuesday, 3 February 2015 09:31:38 UTC