Untitled

dabblet.css

.tbl ,body{display:table;margin:0 auto;padding:0;text-shadow:1px 1px 1px pink;background:#333;color:#777;font-family:arial;}

.ib , .ib li  {display:inline-block;}
.itbl {display:inline-table;}

.tbl li , .itbl li, div {display:table-cell;}

.rtl {direction:rtl;background:yellow;}
.ltr {direction:ltr;background:turquoise;}

ul , li , div, body {margin:0;padding:0;border:solid 1px #777;border-spacing:0.25em;margin:0.25em auto;;padding:0.25em;}

[lang="fr"] li {direction:ltr;}

h1 {display:table-caption;}

dabblet.html

<h1>Flux & direction</h1>
<div class="ltr">
<h2>direction ltr</h2>
<h3> format table</h3>
<ul class="tbl"><li>Lorem ipsum dolor sit amet</li><li>consectetuer adipiscing elit.</li><li>Aliquam tincidunt<br/> mauris eu risus.</li><li>Vestibulum auctor dapibus neque.</li></ul>
<h3>format inline-block</h3>
<ul class="ib"><li>Lorem ipsum dolor sit amet</li><li>consectetuer adipiscing elit.</li><li>Aliquam tincidunt <br/> mauris eu risus.</li><li>Vestibulum auctor dapibus neque.</li></ul>
<h3>format inline-table</h3>
<ul class="itbl"><li>Lorem ipsum dolor sit amet</li><li>consectetuer adipiscing elit.</li><li>Aliquam tincidunt<br/>  mauris eu risus.</li><li>Vestibulum auctor dapibus neque.</li></ul>
</div>
<div class="rtl" lang="fr">
<h2>direction rtl</h2>
<h3> format table</h3>
<ul class="tbl"><li>Lorem ipsum dolor sit amet</li><li>consectetuer adipiscing elit.</li><li>Aliquam tincidunt<br/>  mauris eu risus.</li><li>Vestibulum auctor dapibus neque.</li></ul>
<h3>format inline-block</h3>
<ul class="ib"><li>Lorem ipsum dolor sit amet</li><li>consectetuer adipiscing elit.</li><li>Aliquam tincidunt <br/> mauris eu risus.</li><li>Vestibulum auctor dapibus neque.</li></ul>
<h3>format inline-table</h3>
<ul class="itbl"><li>Lorem ipsum dolor sit amet</li><li>consectetuer adipiscing elit.</li><li>Aliquam tincidunt<br/> mauris eu risus.</li><li>Vestibulum auctor dapibus neque.</li></ul></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}