[whatwg] Easily formatting the <dialog> element

[David Latapie]

Hello,

I just wrote this article about how to format the dialog element. This 
is what I’m doing for one year now and, barring poor browser support, 
I’m fairly happy with it. It could be used for a sample stylesheet.

<http://blog.empyree.org/post/3049>

HTM5/Web Applications 1.0 proposes the dialog element.

It will add something on the semantic level (“the dt is the name of the 
person”). But on the presentational level (CSS), this is how I’m doing 
for more than one year:

CSS
dl.run-in, dl.run-in dd        {margin:0}
dl.run-in dt, dl.run-in dt:after    {font-weight:bold}
dl.run-in dt                        {display:run-in}
dl.run-in.colon dt:after            {content:": "}

XHTML
<dl class="run-in colon">
	<dt>Person</dt>
	<dd>Speech</dd>
	<dt>Other person</dt>
	<dd>Other speech</dd>
	[…]
</dl>

Preview
Luke: A certain point of view?
Obi-Wan: Luke, you’re going to find that many of the truths we cling to 
depend greatly on our own point of view.

And the addendum for a sample style sheet for <whatever the name will 
be>:
dialog, dialog dd              {margin:0}
dialog dt, dialog dt:after     {font-weight:bold}
dialog dt                      {display:run-in}
dialog dt:after                {content:": "}

For the record: Firefox doesn’t support it (I’m requesting it out 
loud), while Opera does for ages;So do Webkit’s nightly builds.
-- 
</david_latapie>             U+0F00
http://blog.empyree.org/fr (Français)
http://blog.empyree.org/en (English)
http://blog.empyree.org/sl (Slovene)