Fragments, Columns, Regions, Pages

Background/overview Notes and examples in support of discussion on Regions and paged view

See Paged View for use cases and proposals

Layout Engine with Fragmentation Support

Implementations of regions, columns and paginations will vary but in most general situation it is reasonable to assume that there is a layout engine that takes formatted content in DOM as input and fills one or more container with that content:

<html>

<div class=“figure” style=“border:thin solid silver; width:35em; margin:auto; padding:1em;”>

  <div class="legend" style="font-style:italic">Content</div>
  <div class="" style="background:silver">. . . Lorem ipsum dolor sit amet, consectetur . . . </div>
  <div style="margin:1em"></div>
  
  <div class="centerbox" style="width:10em;margin:auto;border:1px solid black;padding:0.5em;text-align:center;">
      Layout engine
  </div>
  <div style="margin:0.5em"></div>
  	
  <div class="legend" style="font-style:italic">Containers</div>
  <div style="text-align:center">
      <div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
      </div>
      <div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:3em;height:2em; margin-bottom:1.5em;">
      </div>
      <div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
      </div>
      <div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
      </div>
      <div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:3em;height:2em; margin-bottom:1.5em;">
      </div>
  </div>

</div> </html>

That's what all layout engines do, the most common cases being

  • Layout for screen

<html> <div class=“figure” style=“border:thin solid silver; width:35em; margin:auto; padding:1em; font-size:66%; -float:right; clear:right;”>

  <div class="legend" style="font-style:italic">Content</div>
  <div class="" style="background:silver">. . . Lorem ipsum dolor sit amet, consectetur . . . </div>
  <div style="margin:1em"></div>
  	
  <div class="centerbox" style="width:10em;margin:auto;border:1px solid black;padding:0.5em;text-align:center;">
      Layout engine
  </div>
  <div style="margin:0.5em"></div>
  	
  <div class="legend" style="font-style:italic">Containers</div>
  <div style="text-align:center">
      <div class="box" style="display:block;margin:0.5em;border:1px dashed black;padding:0.5em; border-bottom-style:none;height:3em;">
      </div>
  </div>

</div> </html>

(there is only one container, usually with auto height) and

  • printing

<html> <div class=“figure” style=“border:thin solid silver; width:35em; margin:auto; padding:1em; font-size:66%; -float:right; clear:right;”>

  <div class="legend" style="font-style:italic">Content</div>
  <div class="" style="background:silver">. . . Lorem ipsum dolor sit amet, consectetur . . . </div>
  <div style="margin:1em"></div>
  	
  <div class="centerbox" style="width:10em;margin:auto;border:1px solid black;padding:0.5em;text-align:center;">
      Layout engine
  </div>
  <div style="margin:0.5em"></div>
  	
  <div class="legend" style="font-style:italic">Containers</div>
  <div style="text-align:center">
      <div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
      </div>
      <div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
      </div>
      <div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
      </div>
      <div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
      </div>
      <div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
      </div>
  </div>

</div> </html>

(a sequence of containers, usually all of the same size)

This doesn't yet show what layout engine do, it just shows some possible situations. It could be noted that if containers exist before layout engine has done any work, we must be assuming that containers are exernal to layout engine. That is not necessarily so, we are just trying to keep these general illustrations simple.

Fragmentation

When layout engine actually does its work, it outputs pieces of content that are laid out to fit into given containers. For the purposes of describing the layout process, let's call filling multiple containers with content “fragmentation”. Then the containers can be called “space fragments” and visual representation of portions of content will be “fragment boxes”.

Note: This is not an attempt to introduce formal definitions or terminology for fragmentation (fragmentation will have a dedicated module). The purpose of this summary is to visualize possible relationships between content, conainers and layout results, which, hopefully, will be useful for evaluation of proposed solution in this space. Feel free to correct any trems or concepts if they look inconsistent with formal definitions elsewhere

<html> <div class=“figure” style=“border:thin solid silver; width:35em; margin:auto; padding:1em;”>

  <div class="legend" style="font-style:italic">Content</div>
  <div class="" style="background:silver">. . . Lorem ipsum dolor sit amet, consectetur . . . </div>
  	
  <div class="down-arrow" style="width:2em;margin:0.5em auto;">
  <div style="width:1em; height:1.5em; margin:auto; background:lightgray;"></div>
  <div style="width:0; height:0; border-width:1em 1em 0; border-style:solid; border-color:lightgray transparent;"></div>
  </div>
  
  <div class="centerbox" style="width:10em;margin:auto;border:1px solid black;padding:0.5em;text-align:center;">
      Layout engine
  </div>
  	
  <div class="down-arrow" style="width:2em;margin:0.5em auto;">
  <div style="width:1em; height:1.5em; margin:auto; background:lightgray;"></div>
  <div style="width:0; height:0; border-width:1em 1em 0; border-style:solid; border-color:lightgray transparent;"></div>
  </div>
  
  <div class="legend" style="font-style:italic">Fragment boxes</div>
  <div style="text-align:center">
      <div class="fragment" style="display:inline-block;margin:0.5em;background:silver;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
      Lorem
      </div>
      <div class="fragment" style="display:inline-block;margin:0.5em;background:silver;border:1px dashed black;padding:0.5em;width:3em;height:2em; margin-bottom:1.5em;">
      ipsum
      </div>
      <div class="fragment" style="display:inline-block;margin:0.5em;background:silver;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
      dolor
      </div>
      <div class="fragment" style="display:inline-block;margin:0.5em;background:silver;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
      sit
      </div>
      <div class="fragment" style="display:inline-block;margin:0.5em;background:silver;border:1px dashed black;padding:0.5em;width:3em;height:2em; margin-bottom:1.5em;">
      amet
      </div>
  </div>
  
  <div class="legend" style="font-style:italic">Containers</div>
  <div style="text-align:center">
      <div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
      </div>
      <div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:3em;height:2em; margin-bottom:1.5em;">
      </div>
      <div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
      </div>
      <div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
      </div>
      <div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:3em;height:2em; margin-bottom:1.5em; ">
      </div>
  </div>

</div>

</html>

Note that as layout engine fills containers with content, there may be content than there is space in containers:

<html> <div class=“figure” style=“border:thin solid silver; width:35em; font-size:66%; margin:auto; padding:1em;”>

  <div class="legend" style="font-style:italic">Content</div>
  <div class="" style="background:silver">. . . Lorem ipsum dolor sit amet, consectetur . . . </div>
  	
  <div class="down-arrow" style="width:2em;margin:0.5em auto;">
  <div style="width:1em; height:1.5em; margin:auto; background:lightgray;"></div>
  <div style="width:0; height:0; border-width:1em 1em 0; border-style:solid; border-color:lightgray transparent;"></div>
  </div>
  
  <div class="centerbox" style="width:10em;margin:auto;border:1px solid black;padding:0.5em;text-align:center;">
      Layout engine
  </div>
  	
  <div class="down-arrow" style="width:2em;margin:0.5em auto;">
  <div style="width:1em; height:1.5em; margin:auto; background:lightgray;"></div>
  <div style="width:0; height:0; border-width:1em 1em 0; border-style:solid; border-color:lightgray transparent;"></div>
  </div>
  
  <div class="legend" style="font-style:italic">Fragment boxes</div>
  <div style="text-align:center">
      <div class="fragment" style="display:inline-block;margin:0.5em;background:silver;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
      Lorem
      </div>
      <div class="fragment" style="display:inline-block;margin:0.5em;background:silver;border:1px dashed black;padding:0.5em;width:3em;height:2em; margin-bottom:1.5em;">
      ipsum
      </div>
      <div class="fragment" style="display:inline-block;margin:0.5em;background:silver;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
      dolor
      </div>
      <div class="fragment" style="display:inline-block;margin:0.5em;background:silver;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
      sit
      </div>
      <div class="fragment" style="display:inline-block;margin:0.5em;background:#ff8888;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
      amet
      </div>
  </div>
  
  <div class="legend" style="font-style:italic">Containers</div>
  <div style="text-align:center">
      <div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
      </div>
      <div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:3em;height:2em; margin-bottom:1.5em;">
      </div>
      <div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
      </div>
      <div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
      </div>
      <div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:3em;height:2em; margin-bottom:1.5em; visibility:hidden;">
      </div>
  </div>

</div> </html>

… and there may be more space than content:

<html> <div class=“figure” style=“border:thin solid silver; width:35em; font-size:66%; margin:auto; padding:1em;”>

  <div class="legend" style="font-style:italic">Content</div>
  <div class="" style="background:silver">. . . Lorem ipsum dolor sit amet, consectetur . . . </div>
  	
  <div class="down-arrow" style="width:2em;margin:0.5em auto;">
  <div style="width:1em; height:1.5em; margin:auto; background:lightgray;"></div>
  <div style="width:0; height:0; border-width:1em 1em 0; border-style:solid; border-color:lightgray transparent;"></div>
  </div>
  
  <div class="centerbox" style="width:10em;margin:auto;border:1px solid black;padding:0.5em;text-align:center;">
      Layout engine
  </div>
  	
  <div class="down-arrow" style="width:2em;margin:0.5em auto;">
  <div style="width:1em; height:1.5em; margin:auto; background:lightgray;"></div>
  <div style="width:0; height:0; border-width:1em 1em 0; border-style:solid; border-color:lightgray transparent;"></div>
  </div>
  
  <div class="legend" style="font-style:italic">Fragment boxes</div>
  <div style="text-align:center">
      <div class="fragment" style="display:inline-block;margin:0.5em;background:silver;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
      Lorem
      </div>
      <div class="fragment" style="display:inline-block;margin:0.5em;background:silver;border:1px dashed black;padding:0.5em;width:3em;height:2em; margin-bottom:1.5em;">
      ipsum
      </div>
      <div class="fragment" style="display:inline-block;margin:0.5em;background:silver;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
      dolor
      </div>
      <div class="fragment" style="display:inline-block;margin:0.5em;background:silver;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
      sit
      </div>
      <div class="fragment" style="display:inline-block;margin:0.5em;background:silver;border:1px dashed black;padding:0.5em;width:3em;height:2em; margin-bottom:1.5em; visibility:hidden;">
      amet
      </div>
  </div>
  
  <div class="legend" style="font-style:italic">Containers</div>
  <div style="text-align:center">
      <div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
      </div>
      <div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:3em;height:2em; margin-bottom:1.5em;">
      </div>
      <div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
      </div>
      <div class="box" style="display:inline-block;margin:0.5em;border:1px dashed black;padding:0.5em;width:2em;height:3em;">
      </div>
      <div class="box" style="display:inline-block;margin:0.5em;border:1px dashed red;padding:0.5em;width:3em;height:2em; margin-bottom:1.5em;">
      </div>
  </div>

</div>

</html>

Which gets us to the questions of “where do the containers come from?” and “how to get more?”

Containers

Considering that a target container for fragmentation is a rectangle or shape with size and possibly position, there are many ways to create and manage theem.

Some existing or anticipated ways to provide containers for fragmentation are

  • Columns
    • As defined in css3-multicol (CR)
    • With column selectors (ED)
  • Pages
    • Printing or print preview (built-in in browsers)
    • Automatic page view (ED)
    • Regions+script page view (ED, WD)
    • Page templates (EPub proposal)
  • Regions
    • Static (ED, WD)
    • Scripted (ED, WD)
    • Generated (discussion: ?)

Let's compare the different kinds of fragmenting containers, specifically looking at who is in control and how they are manated dynamically:

Container type how created dynamic ? details
Columns - CSS3 “columns:N”
multicol properties
partially new columns are added in overfrlow
Columns - new automatic dynamic control size & position sith column selectors:
article::column(2) {…}
Pages - print printing app or layout engine in print mode; hardcoded dynamic follows paged media spec; no reading UI defined beyond print preview
Pages - auto paged view “overflow:paged” dynamic by default all “pages” are same size; can be customized with page selectors (like columns); default UI
Pages - regions+script from script script all custom, no declarative page generation, no default UI, all in script
Pages - page templates automatic dynamic a set of templates and template selection rules; multiple flows can be supported; no default UI; can be combined with any other generated containers
Regions - static “flow-from:<flowname>” static current specs don't define declarative ways to generate regions
Regions - scripted regionOverflow, regionLayoutUpdate script regions spec adds minimal API for layout results and timing

Using fragmentation

 
spec/fragments-columns-regions-pages.txt · Last modified: 2014/12/09 15:48 by 127.0.0.1
Recent changes RSS feed Valid XHTML 1.0 Valid CSS Driven by DokuWiki