Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Run-in definition list
What the CSS rule replaced the former run-in box model?
How to make the simplest definition list ‹dl› with its ‹dt› and ‹dd› pairs in the same row? When a table style is not desired because of different column widths:
- short term := its very long description data
- wide definition formula := its short dataThe simple ‹p› handles that well, although without ‹dl› semantics. CSS display: inline-block joins all ‹dt›‹dd› rows to one line for entire ‹dl› list, though.
I find only one ugly solution by separating lines, thus producing many ‹dl› lists — for every ‹dt›‹dd› line.
Offline
Re: Run-in definition list
How about using CSS floats for the dt only, for example:
dt { float: left; }
dt::after { content: ":"; padding-right: 0.25rem; }If your dd elements contain sub items that break lines, you may need to br {display: none;} or make p tags run-in inline. Similarly, depending on how you want the left-indent to work, you may want to cancel out the left margin/padding.
TXP Builders – finely-crafted code, design and txp
Offline
Re: Run-in definition list
float requires width declaration, AFAIK. Too complex and unstable…
Offline
Re: Run-in definition list
Maybe I misunderstood what you’re trying to achieve, but I thought you didn’t want widths. Adding those directives via the webinspector to textile-lang.com turns this:
into this (with br display:none added):
The dt elements have variable width, and while the float only applies to the dt, it resets with each new instance.
TXP Builders – finely-crafted code, design and txp
Offline
Re: Run-in definition list
Here’s another solution (via stack overflow):
dt:before {
content: "";
display: block;
}
dt, dd {
display: inline;
}dt and dd are inline. To prevent them running on after each other in a long line, add an invisible content item set to display:block to force a new line at the beginning of each item.
TXP Builders – finely-crafted code, design and txp
Offline
Re: Run-in definition list
I would go with dl { display: grid; } and then (auto-)size the 2 columns and placing the respective items (dt and dd) based on grid-name. The CSS spec has an example for what I think you want to do (it is “Example26” in case the link works poorly). That can easily made to collapse to a one column display for small-screen devices.
Otherwise, you probably can find a working example here. And some more links included in the MDN guides.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: Run-in definition list
Sorry, jacob, I did not mention, that this ‹dl› is centered in European style and narrower than the width of the sheet — it is for a short summary in an article’s header.
float is not much suited in such cases:
The second <dl style="width:fit-content">.
The workaround dt:before {display: block; content: ""} or dd:after {content: '\0A'; white-space: pre} seems to be obsolete — a browser ignores it with no warning in an inspector. I did not find why, perhaps generated characters below U+0080 and ASCII are now deprecated?
Phiw13, I am worried about backwards compatibility of the grid style — for such minor goal, witch is achieved now by inline-blocks in separate ‹dl›s with a stable and quite clean code.
Thank you so much for the great support!
Offline
Re: Run-in definition list
Vienuolis wrote #330312:
Phiw13, I am worried about backwards compatibility of the grid style
How far in history do you go? Or said otherwise, Which browsers do you need to support? Support for CSS grid is quite solid in this day and age: caniuse. IE 11 and older Edge may be an issue, but the latter barely registers in the stats (mostly bots, who knows…).
@supports (display:grid) { /* your code */ }is your friend.
IE 6 remains the problem kid, naturally.
Last edited by phiw13 (2021-05-30 09:12:42)
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: Run-in definition list
Admittedly, I didn’t try a huge array of browsers, but this seems to work just fine in recent versions of Chrome, Safari and Firefox:
dl {
text-align: center;
}
dt, dd {
display: inline;
margin: 0;
}
dt::before {
content: "";
display: block;
}
dt:after {
content: ":"; /* optional: just for neatness */
}… but you can try it in your browsers with this codepen. It gives you this:
EDIT: Added your example to the codepen with all dt-dd pairs in a single dl.
TXP Builders – finely-crafted code, design and txp
Offline
Re: Run-in definition list
Sorry phiw13, I am new to the grid layout, and did not find even far similar example — all they are arranged to the grid template.
There is my public summary of an article in its header — gaps between ‹dt› and ‹dd› in very different positions are visible as double red pipes:
Unfortunately, this gap between ‹dt› and ‹dd› stands common for all rows in a grid layout, as a tab in table layout on my test page (with grid-template-columns:repeat(2, auto) and dt{justify-self:end} dd{justify-self:start}):
How to eliminate all the columns, named cells, its sizes, lengths, percentages, complex templates, and allow plain text flow in the grid layout?
Offline
Re: Run-in definition list
I am shocked: the problem was my display:inline-block instead of your display:inline — I still find it hard to believe that. Thank you very much, dear Julian!
Offline
Re: Run-in definition list
Vienuolis
Sorry I apparently misunderstood what you actually wanted to do. Julian’s solution is OK, although I would use inline-block myself.
Anyway, here is a basic illustration of using display: grid. Further refinements are left to the imagination of the user.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline