1

We have this page with a bunch of definition lists. The guy making style mockups in Word came up with this brilliant idea to render the definition lists as "term - value" and hanging indents. I have to admit it actually is brilliant but it's difficult. I've been playing around with this quite a bit and the hanging indents really are necessary or the page becomes very ugly.

If I try to use grid (which is suboptimal anyway); the page rendering breaks down because of content before. But it appears that the hanging indent style on dd just isn't honored.

dl dd {
  display: inline;
  margin: 0;
  padding-top: .25em;
}
dl dd:after{
  display: block;
  content: '';
}
dl dt{
  display: inline-block;
  padding-top: .25em;
}
dl dd:before {
  content: "- ";
}
dl dd{
  text-indent: 3.5em hanging;
}
<dl>
  <dt>term</dt>
<dd>sentence sized definition belongs here</dd>
  <dt>term with long name</dt>
<dd>sentence sized definition belongs here</dd>
  <dt>term</dt>
<dd>paragraph sized definition paragraph sized definition paragraph sized definition paragraph sized definition I'm not going the really type it long but long enough to get hanging indent</dd>

</dl>

I had actually tried the opposed margin and text-indent method of saying hanging indent before using the hanging keyword and it was glitchy; like the rendering believed I was trying to do something else.

dl dd {
  display: inline;
  margin: 0;
  padding-top: .25em;
}
dl dd:after{
  display: block;
  content: '';
}
dl dt{
  display: inline-block;
  padding-top: .25em;
}
dl dd:before {
  content: "- ";
}
dl dd{
  text-indent: -3.5em;
  margin-left: 3.5em;
}
<dl>
  <dt>term</dt>
<dd>sentence sized definition belongs here</dd>
  <dt>term with long name</dt>
<dd>sentence sized definition belongs here</dd>
  <dt>term</dt>
<dd>paragraph sized definition paragraph sized definition paragraph sized definition paragraph sized definition I'm not going the really type it long but long enough to get hanging indent</dd>

</dl>

2
  • If I try to use grid --> how? Mar 29, 2021 at 15:20
  • @TemaniAfif: The box model comes out wrong. On researching that I determined it's asking grid to be something that isn't a grid. Maybe if each dt/dd pair was its own two-cell grid ...
    – Joshua
    Mar 29, 2021 at 15:22

1 Answer 1

2

Your dd elements are display: inlinetext-indent won't work on those.

Now that grouping terms and descriptions using divs is allowed, doing that lets you use hanging indents quite straightforwardly by applying text-indent to the divs instead. I strongly recommend not using the hanging keyword right now as the few browsers that support it only do so with experimental features enabled. For now, use padding, and a negative text-indent to simulate the hanging indent:

dl dt, dl dd {
  display: inline;
  margin: 0;
}
dl dd::before {
  content: "- ";
}
dl div {
  text-indent: -3.5em;
  padding-top: .25em;
  padding-left: 3.5em;
}
<dl>
  <div>
    <dt>term</dt>
    <dd>sentence sized definition belongs here</dd>
  </div>
  <div>
    <dt>term with long name</dt>
    <dd>sentence sized definition belongs here</dd>
  </div>
  <div>
    <dt>term</dt>
    <dd>paragraph sized definition paragraph sized definition paragraph sized definition paragraph sized definition I'm not going the really type it long but long enough to get hanging indent</dd>
  </div>
</dl>

4
  • @Joshua: Yes, in browsers that support the hanging keyword. And that's why I recommend not using it. Let me know if you need a widely supported solution.
    – BoltClock
    Mar 29, 2021 at 15:31
  • I would indeed prefer one. I actually tried the margin-textindent solution first and it did something glitchy and only then tried hanging.
    – Joshua
    Mar 29, 2021 at 15:32
  • Oh. Padding instead of margin.
    – Joshua
    Mar 29, 2021 at 15:40
  • 1
    @Joshua: You could do it either way - in your case it's really the DDs being inline that's messing everything up (but also you're applying margins on every side and not just the left). By grouping each pair into simple blocks the DTs and margins won't interfere with one another.
    – BoltClock
    Mar 29, 2021 at 15:45

Not the answer you're looking for? Browse other questions tagged or ask your own question.