Implement auto-layout for reflowable EPUB

[JayPanoz]

With version 2 of ReadiumCSS, implementers are losing the responsive layout that can be mapped to the auto value in user-settings (typically with 1 column or 2 columns as the two other values for this setting).

As researched, developed, and tested in Readium Playground, such an “auto-layout mode” can be tied to a minimal and an optimal line-lengths (as a number of characters, based on the ch length), with the number of columns being determined from these 2 values.

The experimental implementation in Playground is relying on a canvas and measureText to compute these line-lengths depending on the font-family used, a sample of text (e.g. paragraph of content, description in metadata, etc.), letter-spacing and word-spacing, the padding/gap of the page, etc. Then it will check how many optimal line-lengths the current window can host.

Caveats are:

• word-spacing needs a text-sample to approximate the average of spaces per line;
• letter-spacing and word-spacing are not implemented for canvas in Safari at the moment;
• neither are writing-mode and text-orientation so there’s no support for CJK out of the box.

These two last issues can be solved using the same technique though (by rendering character per character, with an offset).

[chocolatkey]

@JayPanoz would the path forwards for you be to port your implementation in the playground to the ts-toolkit?

[JayPanoz]

@chocolatkey I guess so, although there’s some overlap with #75 at first sight. We should probably address some things in common e.g. breakpoint if that happens to be supported for a full-fledged “auto-layout” for FXL.

[JayPanoz]

This has evolved a little bit, so for the sake of documentation so that requests can surface before it’s implemented, here’s a summary:

• it’s still using a canvas, as described with caveats in the original post;
• preferences can be set for the minimal and optimal line-length, both in ch (character unit, based on its CSS definition):
  • minimum is not used for value auto, the algorithm will simply compute the number of columns based on the optimal line-length and the available width;
  • minimum is not used for a single column either;
  • for 2 (and more) columns:
    • if the value is set in ch, it serves as a floor: if the column’s width is less than the computed value, one column will be removed;
    • if undefined, the optimal line-length is the minimum line-length;
    • if set to null, it will be ignored, and the number of columns will be enforced, no matter what, even on very narrow screens – this allows implementers to disable the logic to implement their own.
• In addition, it now provides a breakpoint that is computed dynamically, from the optimal line-length so that app can be responsive to contents and their settings, instead of being a static value.
• It should also accept a constraint to size its container e.g. in Playground, if we have enough space, arrows are displayed on each side of the Navigator’s container instead of being overlaid on top of it, so the algorithm is fed with the sum of the two arrows’ width.