Re: css-shapes] Comments on CSS Shapes ED

Alan Stearns wrote:

 > >So, what would your code look like that would produce this example?
 > >
 > >  http://dev.w3.org/csswg/css-page-floats/exclusions-dropcap.png
 > 
 > That's my example, you know.

I know, I shamelessly stole it :-) But I couldn't find it in the ED so
I thought it was gone. But it's here, along with the sample code:

  http://wiki.csswg.org/ideas/css3-exclusions-use-cases

So, I guess the code needed to produce with an explicit shape is:

  <style>
    #dropMany{      
      wrap-flow: right;
      shape-outside: polygon(0px,0px 280px,0px 220px,125px 0px,125px);
    }  
  </style>
  <div>
     <p><span id="dropMany">Many</span> instances ...</p>
     <p>The text ....</p>
  </div>     

My preferred solution would be:

  <style>
    .dropcap {      
      float: left;
      exclude-level: 0.5;
      shape-margin: 0.2em; /* or something */
    }  
  </style>
  <div>
    <p><span id="dropcap">Many</span> instances ...</p>
    <p>The text ....</p>
  </div>     

First, I think my code is simpler to read, write and edit. Second,
there's a big saving in applying the same code to all glyphs -- in
your case you need to write glyph-specific code with few opportunities
for reuse.

I think we should ask authors what they prefer to write.

-h&kon
              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome

Received on Friday, 13 September 2013 14:05:13 UTC