CSS for
definition list in HTML5 #HTML #CSS


I would love to get ideas for presenting <dl> definition list in HTML5 as a :
  • as a table (I see but would love to hear other ideas)
  • as an expandable list - where the <dt> element is displayed, and when expanded shows the <dd> element(s) in the <dlentry> element
  • as a list - but with a way to show ideas for the presentation of the <dlehead> elements:
    <dlhead><dthd>Title DT</dthd><ddhd>Title DD</ddhd></dlhead>
Much thanks!

Jirka Kosek

On 19.11.2019 17:12, Katriel Reichman wrote:
* as an expandable list - where the <dt> element is displayed, and when expanded shows the <dd> element(s) in the <dlentry> element
For expandlable content it's natural to use details element in HTML:

Jirka Kosek e-mail: jirka@...
Professional XML and Web consulting and training services
DocBook/DITA customization, custom XSLT/XSL-FO document processing
Bringing you XML Prague conference


I guess this isn't exactly what you're looking for (not strictly a CSS solution), but we inherited a number of DLs that need to look like tables. 

We use oXygen CSS transforms to PDF, so we just hook into the custom XSL entry point in the transform and convert the DL into an HTML table there.  You could do the same for your HTML transform, matching a DL that has a given outputclass.  The transform itself is pretty straight forward -- I can share it if you like. 

For our HTML output, we do something similar to Don Day's approach that you referenced...  We transform the DL to produce divs for all the dl components (dl head, dl entry, etc.), and then use CSS to make them look like a table.  This transform is also straight forward.  We don't use the OT for our HTML transforms, so it might be easier for us to add that sort of tweak into our workflow...  We sort of own all our HTML transforms directly.  But I suspect you can inject these sorts of transforms into your workflow for the DLs you want to catch.

Given all that, making these into expanding lists is a cool idea -- never thought of it.  We have some docs where that might really make sense.  Since we're wrapping all the DL components in divs already, it should be straight forward to come up with a CSS/JS implementation for that.



Much appreciated!

One of my challenges is how to use the <dlhead> elements. They make sense in a table - but I don't think that we should render them when represented as expanding lists.


Katriel Reichman (katriel@...

check out breaking news on the DITA Project at the Method M Blog
Cellular: +972-50-693-6008


How to use <dlhead> elements in an expanding list?  There are lots of variables here.  Depending on how you visually format the expanding list, a head could make sense.  OTOH, if you present it more like a bullet list with expanding content underneath, then I see your problem.  Another factor is how important the head is.  If it just says TERM / DEFINITION, well then, who needs it?  But if you load something significant into the head, you have to work out a way to keep it.  Maybe have different outputclass values, where one formats the list in a way that makes the heads work, and the other just discards the head.  Maybe load alternative text into attributes in the head elements, and use that???

This is where it all gets to be fun, IMO.  Online docs have more than just a "look".  They have behavior, which is every bit as informative as the look.  It's a new dimension to play with, and you have to put everything into meaningful relationships.  (Sounds like a personal problem!!!)