tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

block-padding-ref.html (3348B)

      1 <!DOCTYPE HTML>
      2 <!--
      3    Any copyright is dedicated to the Public Domain.
      4    http://creativecommons.org/licenses/publicdomain/
      5 -->
      6 <!DOCTYPE HTML>
      7 <html><head>
      8 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      9 <title>text-overflow: text-overflow block padding </title>
     10 <style type="text/css">
     11 @font-face {
     12  font-family: DejaVuSansMono;
     13  src: url(../fonts/DejaVuSansMono.woff);
     14 }
     15 html,body {
     16    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono; text-decoration-skip-ink: none;
     17 }
     18 body { width:24ch; overflow:hidden; }
     19 
     20 .test {
     21  overflow: hidden;
     22  white-space: nowrap;
     23  padding-left: 1ch;
     24  padding-right: 3ch;
     25  height: 3em;
     26  margin-bottom:1em;
     27 }
     28 .s {
     29  overflow: auto; position:relative;
     30  text-decoration: line-through;
     31 }
     32 .rel { position:relative; }
     33 span {
     34  text-decoration: underline overline;
     35  background:yellow;
     36 }
     37 .rtl {
     38  direction:rtl;
     39 }
     40 .ltr {
     41  direction:ltr;
     42 }
     43 .rlo span {
     44  unicode-bidi: bidi-override; direction: rtl;
     45 }
     46 .lro span {
     47  unicode-bidi: bidi-override; direction: ltr;
     48 }
     49 .overlay {
     50  position:absolute;
     51  border-color:transparent;
     52  text-decoration: line-through;
     53  z-index:1;
     54 }
     55 y {   background:yellow;}
     56 m {   background:yellow; position:absolute; right:0; padding-right:3ch; z-index:2;}
     57 mr {  background:yellow; position:absolute; left:0;padding-left:1ch; z-index:2;}
     58 </style>
     59 </head><body>
     60 
     61 <!-- LTR / LTR -->
     62 <div class="test ltr overlay"><r>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</r></div>
     63 <div class="test ltr"><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|</span><y>&#x2026;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</y></div>
     64 
     65 <div class="test ltr s"><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><m>&#x2026;</m></div>
     66 
     67 <!-- RTL / LTR -->
     68 <div class="test rtl rel"><span><div class="overlay"><r>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</r></div>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|</span><y style="padding-left:3ch">&#x2026;</y></div>
     69 
     70 <div class="test rtl s"><mr>&#x2026;</mr><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;</span></div>
     71 
     72 <!-- LTR / RTL -->
     73 <div class="test ltr rlo overlay"><r>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</r></div>
     74 <div class="test ltr rlo"  ><span>&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;</span><y style="padding-right:3ch">&#x2026;</y></div>
     75 
     76 <div class="test ltr rlo s"><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;</span><m>&#x2026;</m></div>
     77 
     78 <!-- RTL / RTL -->
     79 <div class="test rtl rlo rel"><span><div class="overlay"><r>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</r></div>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|</span><y>&#x2026;&nbsp;</y></div>
     80 
     81 <div class="test rtl rlo s"><mr>&#x2026;</mr><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;</span></div>
     82 
     83 </body></html>