Reply To: Display Element As Table Without Border

[Derek Read]

You can get pretty close to what they have there I think. Because there is no element surrounding each pair of

and

and you want the pairs to appear on the same line they need to have display:inline set (that's actually the default). At the same time you don't want multiple pairs all on the same line. So we need to introduce a little bit of Unicode character escaping trickery to achieve that. XMetaL does not support “float” because the product really is about authoring content (and we currently feel that letting people place elements arbitrarily inside a document's flow would be disruptive to understanding the relationship between elements). Inserting Unicode characters this way is an unofficial feature and not documented.

/* Note: when display is not defined the default is display:inline */
dl {
display: block;
border: 3px solid #ccc;
}

dt {
font-weight: bold;
color: green;
}

dt:before {
/*000d = carriage return*/
content: "00d";
}

dt:after {
/*00a0 = non-breaking space*/
content: ":0a0";
}

I use the non-breaking space in dt:after because it needs to use display:inline to keep it on the same line and XMetaL doesn't render padding or margin for inline elements.

---

If the model was like this (another element wrapping each pair) then the CSS would be simpler:

In that case you could use the standard normal methods for styling lists (ELEM would just use display:list-item in that case with list-style set to whatever you want including nothing), or set dl and ELEM to both use display:block with some indenting if you like.

---

If the client does not care that the elements appear on the same line then you could do the following instead. This might be more acceptable to authors, particularly in Tags On view where the first method might prove confusing due to the way opening tags are handled.

dl {
display: block;
border: 3px solid #ccc;
}

dt {
display: block;
font-weight: bold;
color: green;
}

dt:after {
content: ":";
}

dd {
display: block;
padding-left: 2em;
}

Reply