tor-browser

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

1117210-1-vertical-baseline-snap.html (2217B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <meta charset="utf-8">
      5 <style>
      6 @font-face {
      7  font-family: ahem;
      8  src: url(../fonts/Ahem.ttf);
      9 }
     10 
     11 div {
     12  font-family: ahem;
     13  font-size: 10px;
     14 }
     15 
     16 .lr {
     17  writing-mode: vertical-lr;
     18  text-orientation: sideways-right;
     19  height: 40px;
     20 }
     21 .rl {
     22  writing-mode: vertical-rl;
     23  text-orientation: sideways-right;
     24  height: 40px;
     25 }
     26 
     27 .a { position: relative; top: 10px; left: 10px; }
     28 .b { position: relative; top: 10px; left: 10px; }
     29 .c { position: relative; top: 10px; left: 10px; }
     30 .d { position: relative; top: 10px; left: 10px; }
     31 .e { position: relative; top: 10px; left: 10px; }
     32 
     33 /* resolution-dependent offsets: we want CSS px values that will correspond
     34   to less that 0.5 device pixels either side of where 10px falls, so they
     35   all snap to the same device-pixel value */
     36 
     37 /* XXX For higher-than-retina density, we punt; the test becomes a no-op */
     38 
     39 @media (max-resolution: 2dppx) {
     40  .a { left: 9.8px; }
     41  .b { left: 9.9px; }
     42  .c { left: 10px; }
     43  .d { left: 10.1px; }
     44  .e { left: 10.2px; }
     45 }
     46 
     47 @media (max-resolution: 1.5dppx) {
     48  .a { left: 9.7px; }
     49  .b { left: 9.85px; }
     50  .c { left: 10px; }
     51  .d { left: 10.15px; }
     52  .e { left: 10.3px; }
     53 }
     54 
     55 @media (max-resolution: 1dppx) {
     56  .a { left: 9.6px; }
     57  .b { left: 9.8px; }
     58  .c { left: 10px; }
     59  .d { left: 10.2px; }
     60  .e { left: 10.4px; }
     61 }
     62 
     63 </style>
     64 </head>
     65 
     66 <body>
     67 <div class="lr a">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
     68 <div class="lr b">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
     69 <div class="lr c">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
     70 <div class="lr d">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
     71 <div class="lr e">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
     72 
     73 <br>
     74 
     75 <div class="rl a">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
     76 <div class="rl b">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
     77 <div class="rl c">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
     78 <div class="rl d">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
     79 <div class="rl e">abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc<br>abc</div>
     80 
     81 </body>
     82 </html>