4

Previously on “let’s not support display: run-in because it’s complicated and nobody actually uses or wants to use it,” StackOverflow edition…

I would like the following behavior for h5 elements in my document:

  • It acts like run-in when followed by a paragraph (p)
  • It acts like block when followed by a heading (h1, …, h6) or something else (ul, etc.)

This is essentially the same behavior as run-in if the contents of headings are wrapped in (or contain) a block; i.e., by changing <h6>…</h6> to <h6><div>…</div></h6> or <h6>…<div /></h6>.

(However, I would prefer not to modify the HTML if possible: it’s generated from markdown via pandoc.)

Here’s what I have so far, using floating inline-blocks. Notice how the margin between the h5 and h6 gets “collapsed.”

CSS

/* Just some basic styles to start off */
body { line-height: 1.5; }
h4,h5,h6 { font-size: 1em; margin: 1em 0; }
h4 { background: #fee; }
h5 { background: #eef; }
h6 { background: #dfd; font-style: italic; font-weight: normal; }

/* Now let’s try to emulate `display: run-in`... */
h4,h5,h6 {
    clear: both;
}
h5 {
    float: left;
    display: inline-block;
    margin: 0 1em 0 0;
}

HTML

<h4>Section</h4>

<h5>Heading</h5>
<p>Paragraph here. This is some text to fill out the line and make it wrap,
so you can get a feel for how a heading with <code>display: run-in;</code>
might look.</p>

<h5>Heading, but without immediately following text</h5>

<h6><div>Subheading</div></h6>
<p>There should be as much space between the &lt;h5> and &lt;h6> as there is
between the &lt;h4> and &lt;h5>, but it gets “collapsed” because the
&lt;h5> floats.</p>

<h5>Heading followed by a list</h5>
<ul><li>A list item</li></ul>

Here is a jsfiddle containing the HTML and CSS.
Here is one using run-in for browsers that still support it, like Safari.

Here’s a demo page from 7 years ago I found that attempts (unsuccessfully) to fake the same behavior.

Screenshots of Safari

Faked:

Using run-in (expected behavior, with correct margins between the h5 and the h6 or ul):

Community
  • 1
  • 1
hftf
  • 97
  • 1
  • 9
  • does `h5 {float:left;} h5 + * {clear:left;} h5 + p {clear:none;}` would do ? cause in any case , CSS cannot climb up in the dom tree. – G-Cyrillus May 01 '14 at 15:59
  • [Without the `margin: 0 1em 0 0` declaration](http://jsfiddle.net/47W2C/15/), it doesn’t work because the floated h5 is taller than a line of the paragraph, and the h5 margins will not collapse with the previous p. [With it](http://jsfiddle.net/47W2C/16/), the only difference is that the ul is now pushed to the next line; the margin issue is still there. – hftf May 01 '14 at 16:08
  • The problem, to my opinion, is not the run-in display, it is the fact that ypu want to switch display behavior according to next element. CSS cannot do such a thing. Float kills display value cause it takes partially away the element from the flow of document. To me , the Safari behavior is odd to me, on W3C, it doesn't say, it behaves run-in ahead a paragraph but not ahead hx tags or ul : http://www.w3.org/TR/css3-box/#run-in-boxes – G-Cyrillus May 01 '14 at 16:28
  • I’m having a hard time parsing your comment, but to me, Safari’s behavior makes sense per the spec. In both the h6 and ul cases, the heading becomes the first inline box of the next block element. It just so happens that the following contents of the h6 and ul are displayed as block (div) or list-item (li), so the inlined h5 looks “blocky” as a result. – hftf May 01 '14 at 16:37
  • Here is what Safari renders : http://img4.hostingpics.net/pics/457234safarirunin.jpg , ul drops down. Sorry for my poor english :) – G-Cyrillus May 01 '14 at 16:41
  • oh yes, i checked in safari first with the float display . maybe this can be a compromise, adding a pseudo being hidden or not if content clears or not : http://jsfiddle.net/47W2C/20/ . i made an answer of it – G-Cyrillus May 01 '14 at 16:56

1 Answers1

0

Maybe i have a compromised you would like : DEMO

/* Just some basic styles to start off */
body { line-height: 1.5; }
h4,h5,h6 { font-size: 1em; margin: 1em 0; }
h4 { background: #fee; }
h5 { background: #eef; }
h6 { background: #dfd; font-style: italic; font-weight: normal; }

/* Now let’s try to emulate `display: run-in`... */
* {
 clear:left;
}
h5 {
    float:left;
    display: run-in;
    margin: 0 1em 0 0;

}
h5:after {
    content:'.';
    position:absolute;
    background:inherit;
    width:100%;
    right:0;
    z-index:-1;
}
body {
    position:relative; /* to include defaut margin of body to draw h5:after element within body */
}
p /* + any other phrasing tag you wish */ {
    clear:none;
    background:white;
}
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • this is just a work around from demo, if background are involved and relative positionning, it will need to be tuned – G-Cyrillus May 01 '14 at 16:58
  • Thanks for the answer, but this still leaves the margins between the h5 and the next “block” (h6 or ul) as collapsed, which was the main point of my question. The colored backgrounds are just intended to illustrate the boundaries of the elements, I’m not that worried about those. – hftf May 01 '14 at 17:06
  • the old border trick to fake emulate margins from floatting element ... this starts to be a lot of tuning. hard to maintain: http://jsfiddle.net/47W2C/24/ . still this a work around that can easily break :) (it could be transparent border and background-clip if bg involved in real) – G-Cyrillus May 01 '14 at 17:27