tor-browser

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

cjk-kerning.html (3720B)

      1 <!DOCTYPE html>
      2 <html lang="ja">
      3 <head>
      4 <meta charset="UTF-8" />
      5 <title>Coordination of kern and palt features for CJK kerning</title>
      6 <link rel="help" href="https://drafts.csswg.org/css-fonts/#font-kerning-prop" />
      7 <link rel="help" href="https://learn.microsoft.com/en-gb/typography/opentype/spec/features_ko#tag-kern" />
      8 <link rel="help" href="https://learn.microsoft.com/en-gb/typography/opentype/spec/features_pt#palt" />
      9 <script src="/resources/testharness.js"></script>
     10 <script src="/resources/testharnessreport.js"></script>
     11 <style>
     12 @font-face {
     13  font-family: test;
     14  src: url('resources/NotoSansJP-Regular.subset.otf') format('opentype');
     15 }
     16 h1 {
     17 font: bold 1.5em/1 sans-serif;
     18 }
     19 h2 {
     20 font: 1em/1 sans-serif;
     21 margin-bottom: .25em;
     22 }
     23 .test {
     24 font-family: test, sans-serif;
     25 font-size: 3em;
     26 }
     27 .latin {
     28    background: yellow;
     29 }
     30 .cjk {
     31    background: cyan;
     32 }
     33 .paltOFFkernON {
     34 font-feature-settings: "palt" 0;
     35 font-kerning: normal;
     36 }
     37 .kernOFF {
     38 font-kerning: none;
     39 }
     40 .kernON {
     41 font-kerning: normal;
     42 }
     43 .paltONkernON {
     44    font-feature-settings: "palt" 1;
     45    font-kerning: normal;
     46 }
     47 .paltONkernOFF {
     48    font-feature-settings: "palt" 1;
     49    font-kerning: none;
     50 }
     51 </style>
     52 <body>
     53 
     54 <h1>Testing application of kerning to CJK text</h1>
     55 <h2>default</h2>
     56 <div class="test default">
     57 <span class=latin>YeYeYeYe</span><span class=cjk>ティティティティ</span>
     58 </div>
     59 <h2>font-kerning: none;</h2>
     60 <div class="test kernOFF">
     61 <span class=latin>YeYeYeYe</span><span class=cjk>ティティティティ</span>
     62 </div>
     63 <h2>font-kerning: normal;</h2>
     64 <div class="test kernON">
     65 <span class=latin>YeYeYeYe</span><span class=cjk>ティティティティ</span>
     66 </div>
     67 <h2>font-feature-settings:"palt" 0; font-kerning: normal;</h2>
     68 <div class="test paltOFFkernON">
     69 <span class=latin>YeYeYeYe</span><span class=cjk>ティティティティ</span>
     70 </div>
     71 <h2>font-feature-settings:"palt" 1; font-kerning: normal;</h2>
     72 <div class="test paltONkernON">
     73 <span class=latin>YeYeYeYe</span><span class=cjk>ティティティティ</span>
     74 </div>
     75 <h2>font-feature-settings:"palt" 1; font-kerning: none;</h2>
     76 <div class="test paltONkernOFF">
     77 <span class=latin>YeYeYeYe</span><span class=cjk>ティティティティ</span>
     78 </div>
     79 
     80 <script>
     81 const expectMatch = [
     82    [ ".kernON .latin",  ".paltOFFkernON .latin" ],
     83    [ ".kernON .latin",  ".paltONkernON .latin" ],
     84    [ ".kernOFF .latin", ".paltONkernOFF .latin" ],
     85    [ ".kernON .cjk",    ".paltONkernON .cjk" ],
     86    [ ".default .cjk",   ".kernOFF .cjk" ],
     87 ];
     88 const expectMismatch = [
     89    [ ".kernOFF .latin",     ".kernON .latin" ],
     90    [ ".kernOFF .cjk",       ".kernON .cjk" ],
     91    [ ".paltOFFkernON .cjk", ".paltONkernON .cjk" ],
     92 ];
     93 const expectMatchOneOf = [
     94    [ ".default .latin", [".kernON .latin", ".kernOFF .latin"] ],
     95 ];
     96 
     97 expectMatch.forEach((t) => {
     98    test(() => {
     99        let w1 = document.querySelector(t[0]).offsetWidth;
    100        let w2 = document.querySelector(t[1]).offsetWidth;
    101        assert_equals(w1, w2);
    102    }, "expected match: " + t[0] + " vs " + t[1]);
    103 });
    104 
    105 expectMismatch.forEach((t) => {
    106    test(() => {
    107        let w1 = document.querySelector(t[0]).offsetWidth;
    108        let w2 = document.querySelector(t[1]).offsetWidth;
    109        assert_not_equals(w1, w2);
    110    }, "expected mismatch: " + t[0] + " vs " + t[1]);
    111 });
    112 
    113 expectMatchOneOf.forEach((t) => {
    114    test(() => {
    115        let w1 = document.querySelector(t[0]).offsetWidth;
    116        let matched = false;
    117        t[1].forEach((t2) => {
    118            let w2 = document.querySelector(t2).offsetWidth;
    119            if (w1 == w2) {
    120                matched = true;
    121            }
    122        });
    123        assert_true(matched);
    124    }, t[0] + " matches one of [" + t[1].join(", ") + "]");
    125 });
    126 </script>
    127 
    128 </body>
    129 </head>