flux & direction ltr/rtl

dabblet.css

/* flux & direction ltr/rtl */
.tbl ,body{display:table;margin:0 auto;padding:0;text-shadow:1px 1px 1px white,1px 1px 2px pink, 0 0 15px white;;background:#D49442;color:#777;font-family:arial;}

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

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

.rtl {direction:rtl;background:#A0C366;}
.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;border-radius:0.25em;box-shadow:0 0 1px  1px  #def;}

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

h1 {display:table-caption;text-align:justify;margin-bottom:-1em;color:#6AC800;text-shadow:1px 1px 1px yellow,2px 2px 1px pink, 0 0 15px white;}
h1::after {content:'';display:inline-block;width:100%;}
h1 span {font-size:2em;padding:0 0 0 1.15em;display:inline-block;vertical-align:bottom;color:rgba(0,0,0,0.5);text-shadow:1px 1px 1px white  ,2px 2px 1px pink, 0 0 15px white;line-height:0.3em;

dabblet.html

<h1>Flux <span>&</span> 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":"result"}