73283

Fake `display: run-in` with “correct” margin behavior

Question:

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

<ul><li><a href="https://stackoverflow.com/questions/22080141/display-run-in-dropped-in-chrome" rel="nofollow">display: run-in dropped in Chrome?</a></li> <li><a href="https://stackoverflow.com/questions/1577368/style-a-definitition-list-as-simple-key-value-set" rel="nofollow">Style a definitition list as simple key value set</a></li> <li><a href="https://stackoverflow.com/questions/14215939/css-method-instead-of-displayrun-in-to-position-a-block-inline/14217929#14217929" rel="nofollow">CSS method instead of display:run-in; to position a block inline?</a></li> </ul><hr />

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

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

This is essentially the <a href="http://www.w3.org/TR/css3-box/#run-in-boxes" rel="nofollow">same behavior as run-in</a> 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.”

<h3>CSS</h3> /* 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; } <h3>HTML</h3> <h4>Section</h4> <h5>Heading</h5>

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 display: run-in; might look.

<h5>Heading, but without immediately following text</h5> <h6><div>Subheading</div></h6>

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.

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

<a href="http://jsfiddle.net/47W2C/12/" rel="nofollow">Here is a jsfiddle containing the HTML and CSS.</a><br /><a href="http://jsfiddle.net/47W2C/14/" rel="nofollow">Here is one using run-in for browsers that still support it, like Safari.</a>

Here’s a <a href="http://www.cl.cam.ac.uk/~jf15/StyleTests/Fake-run-in.html" rel="nofollow">demo page</a> from 7 years ago I found that attempts (unsuccessfully) to fake the same behavior.

<h2>Screenshots of Safari</h2>

Faked:

<blockquote>

<img width="548" class="b-lazy" data-src="https://i.stack.imgur.com/WeGTJ.png" data-original="https://i.stack.imgur.com/WeGTJ.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

</blockquote>

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

<blockquote>

<img width="548" class="b-lazy" data-src="https://i.stack.imgur.com/FtrYs.png" data-original="https://i.stack.imgur.com/FtrYs.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

</blockquote>

Answer1:

Maybe i have a compromised you would like : <strong><a href="http://jsfiddle.net/47W2C/20/" rel="nofollow">DEMO</a></strong><br />

/* 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; }

Recommend

  • rasa core installation existing package found
  • Is there a way to create a `README.md` file for GitHub that compiles from other `.md` files?
  • Format and append JSON data to html div [closed]
  • How to merge several csv columns into one column using python 2.7?
  • Can I specify command line options in a Pandoc Markdown document?
  • How I can add attribute to img tag in Pelican
  • PyPandoc in combination with PyInstaller
  • urllib2 returns a different page the browser does?
  • Python Statsmodels: OLS regressor not predicting
  • Why does React.js' API warn against inserting raw HTML?
  • Read stdin in chunks in Bash pipe
  • Variant from android-autofittextview library : scaling makes strange behaviour
  • Using multiple input pipelines in TensorFlow
  • Accessing 3rd level of JSON with Angular ng-repeat
  • how to pass class attribute and value to markdown syntax
  • WP7 difficulties binding data to listbox itemssource - won't refresh
  • Quick Question About Get and Set
  • Find VMID for running instance
  • in batch how do i use taskkill properly
  • Ruby 1.8.6 Array#uniq not removing duplicate hashes
  • Local Development, Apache vs Developer - file permissions
  • Configure Spring's MappingJacksonHttpMessageConverter
  • How to autopopulate a field in SugarCRM form
  • AppleScript : find open tab in safari by name and open it
  • Clarification on min distance on LocationManager.requestLocationUpdates method, min Distance paramet
  • OOP Javascript - Is “get property” method necessary?
  • FileReader+canvas image loading problem
  • Insert into database using onclick function
  • Master page gives error
  • Deselecting radio buttons while keeping the View Model in synch
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • How to set/get protobuf's extension field in Go?
  • Cassandra Data Model
  • Trying to switch camera back to front but getting exception
  • Redux, normalised entities and lodash merge
  • Importing jscolor library in angular 2
  • How to get icons for entities from eclipse?
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • JaxB to read class hierarchy