Floats, books and regions

TL/DR: CSS Regions can be used in both lame and great ways. My experience with regions is that it is an incredible tool and I do not think any other competing proposal can, on the long term, beat the expressive power of CSS Regions. In this mail, I’ll try to give a good example of the two sides.


== Lame ways of using CSS Regions ==

http://www.html5rocks.com/en/tutorials/regions/adobe/hlp3.png 

The complexity of this demo is high, it doesn’t resist very well to changes in font-size or viewport’s height. The same thing could be expressed in a much simpler way using multicols and a positioned float exclusion (that wouldn’t work in any non-IE browser though) or, if more control was necessary, maybe four column-like regions and the same float exclusion. 

I think this is Hakon's point, and I understand it. Then again, you can build shitty things using floats or using tables. Does it mean we shouldn't have floats and tables in the web platform? 



== How to make sure people use region correctly ==

By the way, if I can make a call here, we certainly need the Exclusion spec to be implemented in more browsers. It’s a shame, but too few web developers care about the features Microsoft is adding to IE. I think it’s a duty of this working group to make sure this kind of feature lands in the other browsers, too. This is really important if we want to progress further in layout from now on. Improving layout is something we have to do incrementally, and positioned floats is a good way to start.

I find it compelling to indicate that floats have been (and will continue for a few years) to be hacked for layout because flexbox and grids did not exist in css. Before floats, people were abusing data <table>. There's a lesson to this: provide people with the right tools, and they will not abuse the ones they have. In the meantime, we’re all happy to be able to hack some tools if that’s the only way to solve our use cases. Because we have to solve them. That's it.

This is why I’m a huge believer in the “prollyfill” concept, aka implementing in JavaScript the tools that one need to make the websites and web applications that should ship now but will only land in browsers a few years in the future, because at least it concentrates the weirdness into one point and let you do great work anywhere else. When people complain that CSS Regions require creating dummy elements, I disagree. Yes, people will use dummy elements, but the reason people will do it is that CSS does not provide an answer to this question, but the CSS Regions implementation is completely agnostic to that fact. People may use dummy elements now, and then what? If you believe this should not happen, it’s your duty to provide them with a better alternative, something that is totally orthogonal to regions, and let people that need to use regions right now the possibility to do so in what you think is a suboptimal way but is still the best way for them.


== Great ways you can use regions ==

Alright, now, even if some people may have a hard time being convinced, there are still cases you cannot possibly solve using the proposals people have been advocating as replacement for regions. In the previous demo, regions allow to extract quotations from a continuous document and display them in quotation blocks. We can also use regions to create table of contents, or display comments about a document on the side of the pages.

 <!-- not perfect but instructing example -->
 <article>
  
  <h1>Introduction</h1>
  <p>….<span class="quotation">...</span>...</p>
  <section class="comment">...</section>
  <p>...</p>
 
  <h1 name="main-title">Main title about ax<sup>2</sup>+bx+c <a href="#main-title">§</a></h1>
  <h2...>First subtitle...</h2>
  <p>...</p>
  <h2...>Second subtitle...</h2>
  <p>...
   <a name="myword-in-context-x">myword</a>
   <a class="myword-index-entry" href="#myword-in-context-x "> (context: <strong>x</strong>) </a>
  ...</p>
 
  <h1>Conclusion <small>but not the end</small></h1>
  <p>...</p>
  
  <h1 class=”not-in-toc”>Table of Contents</h1>
  <section id=”toc”></section>
  
  <h1 class="not-in-toc">Index</h1>
  <section id="index">
   <ul class="word-list">
    <li class="word-list-entry">
     <em>myword</em>
     <nav class="word-links" style="flow-from: myword-index"></nav>
    </li>
    ...
   </ul>
  </section>
   
 </article>

 // csswg-like style for inline anchor links
 (h1|h2|...) { position: relative; }
 (h1|h2|...) > a.anchor-link { display: none; }
 (h1|h2|...):hover > a.anchor-link { display: block; position: absolute; right: 0px; background: rgba(...); color: ...; ... }

 // things about comments and quotations not covered here for brevity
 ...

 // table of contents:
 #toc { flow-from: toc; }
 #toc::region > h1 { margin: ...; font-size: ...; ... }
 #toc::region > h2 { margin: ...; text-indent: 4em; font-size: ...; ... }
 #toc::region > h1 { margin: ...; font-size: ...; ... }
 #toc::region > (h1|h2|...) > a.anchor-link { display: block; position: static; ... }
 #toc::region > * small { opacity: 0.5; }

 h1:not(.not-in-toc), h2:not(.not-in-toc) { flow-into: toc, none; } //extension where you can put an element in multiple flows
 
 // index entries:
 .myword-index-entry {  flow-into: myword-index;   counter-increment: myword-counter;  }
 .myword-index-entry::before {  content: '[' counter(heading1) '.' counter(heading2) '-' counter(myword-counter) ']';  }
 
I don’t see how you would achieve pulled quotations with arbitrary content and formatting from a document using something else than regions (even if Regions L1 still lack some powerful tools in this domain, I don’t see how people at Adobe can progress further on this specification by creating a second level if the working group cannot even agree on L1). Stringsets is a counter-proposal in this domain which, sorry Hakon, is suboptimal and – I believe – does not belong to CSS at all. We’ve this full power of formatting expressivity here in CSS and it would be a shame if the only way you can propagate some content from one place to another in a document is to limit yourself to plain text. 

Additionally, defining the level of a bookmark in CSS like the "Books" specification is proposing us to do is a clear violation of SoC between style and content because, as far as I know, the hierarchy between anchors is content-related and not style-related.


I’ve also use cases for regions in relation to “break-before” and “break-after”. Right now, regions cannot be grouped but there have been discussion about giving “classes” to regions so that you can actually control what region you want to break on, the same way you can choose whether to break to the next column or the next page right now. There are times with complex layouts where you may wanna break to the next column that doesn't have an image, or the next column group, and being able to name groups in regions will be very powerful.

As it has been said before, regions can also be used as a great “overflow” technique. Using the regions primitive and implementation, we can finally get some true “text-overflow: ellipsis” for multiline elements and, even better, do something else with the text that overflows! Trust me, this is something the web really needs.


== To conclude ==

CSS Regions has a strength: it works the way people do work now and yet can evolve as people get to discover new tools. For now, it allows developers to take those fixed layouts they work on currently and make them work at multiple resolutions by allowing the text to flow seamlessly between boxes. In the future, people may simply using paging templates and flow content in the specific slots of the templates they care about. 

CSS Regions may be hard to implement, but it’s super simple to the user. You can reuse your knowledge of static positioning, let the browser wrap it all for your, do its job, and yet make some interesting magazine layouts. I’ve no problem to acknowledge that it would be cool if we could use page templates, better floats and position snapping: those things are necessary to make some things “just work”. But, at the same time, you can work around them easily once you have other tools like exclusions. However, you simply cannot work around regions easily. 

More advanced floats and "overflow: fragments" are great and worth pursuing, but do not, in my opinion, make css regions any irrelevant.

Received on Monday, 27 January 2014 00:44:07 UTC