CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: display: run-in - alternatives?  (Read 422 times)

0xdeadbeef

  • Junior Member
  • *
  • Posts: 10
  • Karma: +1/-0
display: run-in - alternatives?
« on: 13 Jun 2022, 06:54:54 am »
Reading the CSS spec, I've stumbled on a section about Run-in Layout (https://www.w3.org/TR/css-display-3/#run-in-layout), and the use-case they provide for it (having a heading displayed inline along the paragraph while also keeping a neat semantic HTML structure) looks absolutely legit. For some reason, despite
Code: [Select]
display: run-in apparently being a thing since CSS2, browser vendors either never implemented it in the first place, or dropped support around 2014 (https://caniuse.com/run-in). So now I'm wondering:
  • How are we supposed to implement this styling, considering that the heading might have a bigger font-size and, therefore, simply floating it to the left might not work as expected?
  • What are the historical reasons of such poor support for this feature? It's still in the CSS3 spec, but there are no up-to-date browsers left that support it.

coothead

  • Sr. Member
  • ****
  • Posts: 390
  • Karma: +89/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: display: run-in - alternatives?
« Reply #1 on: 13 Jun 2022, 09:46:49 am »
Hi there 0xdeadbeef,

I was not aware of the run-in property
and would simply have coded it like this...

HTML
Code: [Select]
<h1>page title</h1>
<h2>
<span>Lorem ipsum:</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin ut turpis tortor. Pellentesque sodales vulputate
varius. Quisque placerat est id mauris euismod viverra.
In semper libero eget velit aliquam, nec luctus libero
porta. 
</p>
</h2>

CSS
Code: [Select]
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em  sans-serif;
 }
h1 {
    text-align:  center;
    text-transform: capitalize;
}
h2 > span{
    float: left;
    padding-right: 0.33em;
 }
h2 > p {
    font-size:  0.66em;
    font-weight: normal;
 }

coothead
~ the original bald headed old fart ~

0xdeadbeef

  • Junior Member
  • *
  • Posts: 10
  • Karma: +1/-0
Re: display: run-in - alternatives?
« Reply #2 on: 13 Jun 2022, 10:38:31 am »
Quote
Code: [Select]
<h2>
<span>Lorem ipsum:</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin ut turpis tortor. Pellentesque sodales vulputate
varius. Quisque placerat est id mauris euismod viverra.
In semper libero eget velit aliquam, nec luctus libero
porta. 
</p>
</h2>

But doesn't this go against the semantics of second-level headings? I don't want the whole paragraph to be a descendant of the heading; the heading should head its section, not contain it.

Quote
Code: [Select]
h2 > span{
    float: left;
    padding-right: 0.33em;
 }
h2 > p {
    font-size:  0.66em;
    font-weight: normal;
 }

Yes, floating the heading to the left was also my first intention, but that doesn't quite work. Since the paragraph has a smaller font size, there's a good chance the heading will "catch" several lines of paragraph text, resulting in what you can see on the screenshot: https://prnt.sc/2ZwjinfCNic2

coothead

  • Sr. Member
  • ****
  • Posts: 390
  • Karma: +89/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: display: run-in - alternatives?
« Reply #3 on: 13 Jun 2022, 11:01:28 am »
Hi there 0xdeadbeef,

your screenshot suggests that you must have omitted this...
Code: [Select]
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em  sans-serif;
 }

...from your test :-X

coothead
~ the original bald headed old fart ~

0xdeadbeef

  • Junior Member
  • *
  • Posts: 10
  • Karma: +1/-0
Re: display: run-in - alternatives?
« Reply #4 on: 13 Jun 2022, 11:16:45 am »
Well, I didn't test your exact code snippet, I went for a more semantic alternative (not counting the div wrapper, which would probably be a <section> in a real use-case scenario):

Code: [Select]
<h1>Site title</h1>
<div>
  <h2>Run-in heading</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas rerum ea dignissimos? Omnis natus iste eos numquam quos necessitatibus quo quisquam accusantium ipsa blanditiis obcaecati magni ut nulla officia fugit labore, delectus architecto nemo iusto saepe soluta sit eius esse. Ullam quos autem assumenda, adipisci quidem quisquam natus beatae perferendis doloremque nemo? Perspiciatis nihil animi nisi molestias ullam omnis harum, neque recusandae non iusto dolores ipsa in vitae optio quisquam id officiis hic quod voluptatum dicta nulla nam ut nostrum possimus. Sunt id optio perspiciatis, debitis asperiores laborum doloremque voluptas hic, qui autem cum. Veritatis doloribus possimus consequatur ullam deleniti!</p>
</div>

with the following CSS:

Code: [Select]
h2 {
  margin: 0;
  float: left;
}

Setting a background color and different font sizes on body and h2/p is irrelevant here, because the problem remains the same: baselines are not aligned, and more than one line of paragraph text appears to the right of the heading before the text wraps around it.

coothead

  • Sr. Member
  • ****
  • Posts: 390
  • Karma: +89/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: display: run-in - alternatives?
« Reply #5 on: 13 Jun 2022, 11:36:01 am »
Hi there 0xdeadbeef,

well, I didn't have to put the  p element within the h2 element8)

HTML
Code: [Select]
<h1>page title</h1>
<h2>Heading:</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin ut turpis tortor. Pellentesque sodales vulputate
varius. Quisque placerat est id mauris euismod viverra.
In semper libero eget velit aliquam, nec luctus libero
porta.
</p>

CSS
Code: [Select]
body {
    font: normal 1em / 1.5em  sans-serif;
 }
h1 {
    text-align:  center;
    text-transform: capitalize;
}
h2{
    float: left;
    margin: 0;
    padding-right: 0.33em;
 }

This is how it looks for me...



If you want same baseline for the  p element and h2 element,
no problem, just use this...

Code: [Select]
h2{
    float: left;
    margin: 0;
    padding-right: 0.33em;
    line-height: 0.66em;
 }

coothead
« Last Edit: 13 Jun 2022, 11:56:19 am by coothead »
~ the original bald headed old fart ~

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 787
  • Karma: +8/-0
    • Grumpy Young Man
Re: display: run-in - alternatives?
« Reply #6 on: 14 Jun 2022, 04:34:19 am »
I did think that float would be the equivalent to display: run-in
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: display: run-in - alternatives?
« Reply #7 on: 14 Jun 2022, 10:07:07 pm »
Float has the headache of vertical alignment and whilst there are tricks to try and deal with it -- like padding the top of the paragraph the difference in line-height -- another approach is to just make the heading and paragraph inline. If there's a block wrapper (section / article / header / footer) or a block element (paragraph, list) after the first paragraph, it works without the hassles of calculation. Just set vertical-align:bottom on the header.

https://codepen.io/jason-knight/pen/RwQvjMO

Of course this won't work if the next tag is also a H2, thus why SECTION, ARTICLE, or DIV wrapping each subsection is a good idea.

A big advantage is that it all being inline, it also doesn't cock-up if the heading word-wraps like floats do.
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

 

SMF spam blocked by CleanTalk

Advertisement