HTML Tags expressiveness and regions

TLDR: In this demo, I show why limiting regions to sibling virtual elements (aka only allow "overflow: fragments") is reducing the expressiveness of the developer:

 <section id="content"><p>

The element sets a new line rhythm. The new baseline rhythm is established by finding the first baseline of the element by using the first available font specified on the 'font-family' property; thereafter the frequency of the rhythm is equal to the used value of 'line-height'. The new line rhythm is used to align the content of the element, including child elements. Child elements may, however, establish their own line rhythm, or indicate that they do not seek alignment with the established line rhythm.

 </p></section>

 <!-- ideally, the details tag would be a web component and therefore in the shadow dom -->
 <details id="content-followup">
  <summary>Read more</summary>
  <after-pseudo><!-- to make the demo work right now since ::after support looks wip --></after-pseudo>
 </details>

 <!-- css code -->
 <style type="text/css">

body {
    width: 320px;
    text-align: justify;
}

#content {
    max-height: 100px;
    -webkit-flow-from: article;
    -webkit-region-fragment: break;
    text-overflow: ellipsis; // would need spec upgrade though
}
#content > * {
    -webkit-flow-into: article;
}

#content-followup > summary { font-weight: bold; }
#content-followup[open] > summary { opacity: 0.25; }
#content-followup > after-pseudo {
    -webkit-flow-from: article;
}

//and layout tweaks

 </style>

// and maybe scripting stuff to hide the <details> tag whenever the #content region switch to the "fit" state (aka no content in the ::after pseudo), by listening to region events, if content is expected to eve fit.

Received on Monday, 27 January 2014 11:02:01 UTC