Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2021-05-29 13:10:53

Vienuolis
Member
From: Vilnius, Lithuania
Registered: 2009-06-14
Posts: 309
Website GitHub GitLab Twitter

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 data

The 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

#2 2021-05-29 18:15:12

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,702
Website

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

#3 2021-05-29 18:58:14

Vienuolis
Member
From: Vilnius, Lithuania
Registered: 2009-06-14
Posts: 309
Website GitHub GitLab Twitter

Re: Run-in definition list

float requires width declaration, AFAIK. Too complex and unstable…

Offline

#4 2021-05-29 19:21:08

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,702
Website

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

#5 2021-05-29 20:37:39

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,702
Website

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

#6 2021-05-30 01:23:01

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,138
Website

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

#7 2021-05-30 08:27:02

Vienuolis
Member
From: Vilnius, Lithuania
Registered: 2009-06-14
Posts: 309
Website GitHub GitLab Twitter

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:
Floating dt
Fit to content width
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

#8 2021-05-30 09:11:17

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,138
Website

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

#9 2021-05-30 12:24:40

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,702
Website

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

#10 2021-05-30 12:55:40

Vienuolis
Member
From: Vilnius, Lithuania
Registered: 2009-06-14
Posts: 309
Website GitHub GitLab Twitter

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:
dl header

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}):
dl in grid layout

How to eliminate all the columns, named cells, its sizes, lengths, percentages, complex templates, and allow plain text flow in the grid layout?

Offline

#11 2021-05-30 13:37:13

Vienuolis
Member
From: Vilnius, Lithuania
Registered: 2009-06-14
Posts: 309
Website GitHub GitLab Twitter

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

#12 2021-05-31 00:51:52

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,138
Website

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

Board footer

Powered by FluxBB