tor-browser

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

line-breaking-014.html (2274B)

      1 <!doctype html>
      2 <html>
      3 <meta charset="utf-8">
      4 <title>CSS Text — line breaking (with word-break:break-all) of emoji sequences that should form single clusters</title>
      5 <meta name=assert content="A UA must use the extended grapheme cluster (not legacy grapheme cluster), as defined in [UAX29], as the basis for its typographic character unit.">
      6 <link rel=help href="https://www.w3.org/TR/css-text-3/#characters">
      7 <link rel=match href="reference/line-breaking-013-ref.html">
      8 <link rel=author title="Jonathan Kew" href="mailto:jkew@mozilla.com">
      9 <style>
     10 div {
     11    line-height: 1em;
     12    font-size: 30px;
     13 }
     14 .container {
     15    position: relative;
     16    margin: .5em;
     17 }
     18 .ref {
     19    background-color: white;
     20    padding: .25em;
     21 }
     22 .test {
     23    word-break: break-all;
     24    color: transparent;
     25    background-color: red;
     26    position: absolute;
     27    width: .5em;
     28    left: 0;
     29    top: 0;
     30    padding: .25em;
     31    z-index: -1;
     32 }
     33 </style>
     34 <body>
     35    <p>Each emoji should appear on a single line with no red background.</p>
     36    <div class=container>
     37        <div class=ref>&#x1F468;&#x200D;&#x1F4BB;</div><!-- man technologist -->
     38        <div class=test>&#x1F468;&#x200D;&#x1F4BB;</div>
     39    </div>
     40    <div class=container>
     41        <div class=ref>&#x1F469;&#x200D;&#x1F467;&#x200D;&#x1F466;</div><!-- family with mother, son and daughter -->
     42        <div class=test>&#x1F469;&#x200D;&#x1F467;&#x200D;&#x1F466;</div>
     43    </div>
     44    <div class=container>
     45        <div class=ref>&#x1F939;&#x200D;&#x2640;&#xFE0F;</div><!-- woman juggling -->
     46        <div class=test>&#x1F939;&#x200D;&#x2640;&#xFE0F;</div>
     47    </div>
     48    <div class=container>
     49        <div class=ref>&#x26F9;&#x1F3FF;&#x200D;&#x2640;&#xFE0F;</div><!-- woman basketball player (fitzpatrick type 6) -->
     50        <div class=test>&#x26F9;&#x1F3FF;&#x200D;&#x2640;&#xFE0F;</div>
     51    </div>
     52    <div class=container>
     53        <div class=ref>&#x1F3F3;&#xFE0F;&#x200D;&#x1F308;</div><!-- rainbow flag -->
     54        <div class=test>&#x1F3F3;&#xFE0F;&#x200D;&#x1F308;</div>
     55    </div>
     56    <div class=container>
     57        <div class=ref>&#x1F3F4;&#xE0067;&#xE0062;&#xE0077;&#xE006C;&#xE0073;&#xE007F;</div><!-- flag of Wales -->
     58        <div class=test>&#x1F3F4;&#xE0067;&#xE0062;&#xE0077;&#xE006C;&#xE0073;&#xE007F;</div>
     59    </div>
     60 </body>
     61 </html>