Rendering: default style for <figure>

The spec contains the following defaults for <figure>:

   div, dl, dt, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr,
   html, layer, legend, listing, menu, multicol, nav, ol, p, plaintext,
   pre, rp, section, ul, xmp { display: block; }

   blockquote, figure { margin-left: 40px; margin-right: 40px; }

   th, figure > legend { text-align: center; }

    -- http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#rendering


Let's it...

http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0D%0A%3Cstyle%3E%0D%0A%20figure%20%7B%20display%3Ablock%3B%20margin%3A0%2040px%20%7D%0D%0A%20div%20%7B%20text-align%3Acenter%20%7D%0D%0A%3C%2Fstyle%3E%0D%0A%3Cbody%3E%0D%0A%3Cfigure%3E%3Cimg%20src%3Dimage%3E%3Cdiv%3EFoo%20bar%3C%2Fdiv%3E%3C%2Ffigure%3E%0D%0A%3Cp%3ELorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipisicing%20elit%2C%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%2C%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.%20Duis%20aute%20irure%20dolor%20in%20reprehenderit%20in%20voluptate%20velit%20esse%20cillum%20dolore%20eu%20fugiat%20nulla%20pariatur.%20Excepteur%20sint%20occaecat%20cupidatat%20non%20proident%2C%20sunt%20in%20culpa%20qui%20officia%20deserunt%20mollit%20anim%20id%20est%20laborum.%3C%2Fp%3E%0D%0A%3Cfigure%3E%3Cimg%20src%3Dimage%3E%3Cdiv%3ELorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipisicing%20elit%2C%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%3C%2Fdiv%3E%3C%2Ffigure%3E%0D%0A%3Cp%3ELorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipisicing%20elit%2C%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%2C%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.%20Duis%20aute%20irure%20dolor%20in%20reprehenderit%20in%20voluptate%20velit%20esse%20cillum%20dolore%20eu%20fugiat%20nulla%20pariatur.%20Excepteur%20sint%20occaecat%20cupidatat%20non%20proident%2C%20sunt%20in%20culpa%20qui%20officia%20deserunt%20mollit%20anim%20id%20est%20laborum.%3C%2Fp%3E

Hmm, not really satisfying for me. The captions are off. If you try figure { float:right } the first one looks ok but the second looks weird.


I think <figure>s need a shrink-wrap width applied that ignores the <legend>.


I thought the following rules would do what I want:

   figure { display:table; margin-left:40px; margin-right:40px }
   figure > legend { display:table-caption; caption-side:bottom }
   figure > legend:first-child { caption-side:top }

But the :first-child matches in this case which is not expected:

   <figure>
    foo
    <legend>bar</legend>
   </figure>

One might think that the following solves this problem:

   figure > legend:first-child:not(:only-child) { caption-side:top }

...but then the reverse problem appears:

   <figure>
    <legend>bar</legend>
    foo
   </figure>

-- 
Simon Pieters
Opera Software

Received on Friday, 6 February 2009 13:47:13 UTC