<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Coordination of kern and palt features for CJK kerning</title> <link rel="help" href="https://drafts.csswg.org/css-fonts/#font-kerning-prop" /> <link rel="help" href="https://learn.microsoft.com/en-gb/typography/opentype/spec/features_ko#tag-kern" /> <link rel="help" href="https://learn.microsoft.com/en-gb/typography/opentype/spec/features_pt#palt" /> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <style> @font-face { font-family: test; src: url('resources/NotoSansJP-Regular.subset.otf') format('opentype'); } h1 { font: bold 1.5em/1 sans-serif; } h2 { font: 1em/1 sans-serif; margin-bottom: .25em; } .test { font-family: test, sans-serif; font-size: 3em; } .latin { background: yellow; } .cjk { background: cyan; } .paltOFFkernON { font-feature-settings: "palt" 0; font-kerning: normal; } .kernOFF { font-kerning: none; } .kernON { font-kerning: normal; } .paltONkernON { font-feature-settings: "palt" 1; font-kerning: normal; } .paltONkernOFF { font-feature-settings: "palt" 1; font-kerning: none; } </style> <body> <h1>Testing application of kerning to CJK text</h1> <h2>default</h2> <div class="test default"> <span class=latin>YeYeYeYe</span><span class=cjk>ティティティティ</span> </div> <h2>font-kerning: none;</h2> <div class="test kernOFF"> <span class=latin>YeYeYeYe</span><span class=cjk>ティティティティ</span> </div> <h2>font-kerning: normal;</h2> <div class="test kernON"> <span class=latin>YeYeYeYe</span><span class=cjk>ティティティティ</span> </div> <h2>font-feature-settings:"palt" 0; font-kerning: normal;</h2> <div class="test paltOFFkernON"> <span class=latin>YeYeYeYe</span><span class=cjk>ティティティティ</span> </div> <h2>font-feature-settings:"palt" 1; font-kerning: normal;</h2> <div class="test paltONkernON"> <span class=latin>YeYeYeYe</span><span class=cjk>ティティティティ</span> </div> <h2>font-feature-settings:"palt" 1; font-kerning: none;</h2> <div class="test paltONkernOFF"> <span class=latin>YeYeYeYe</span><span class=cjk>ティティティティ</span> </div> <script> const expectMatch = [ [ ".kernON .latin", ".paltOFFkernON .latin" ], [ ".kernON .latin", ".paltONkernON .latin" ], [ ".kernOFF .latin", ".paltONkernOFF .latin" ], [ ".kernON .cjk", ".paltONkernON .cjk" ], [ ".default .cjk", ".kernOFF .cjk" ], ]; const expectMismatch = [ [ ".kernOFF .latin", ".kernON .latin" ], [ ".kernOFF .cjk", ".kernON .cjk" ], [ ".paltOFFkernON .cjk", ".paltONkernON .cjk" ], ]; const expectMatchOneOf = [ [ ".default .latin", [".kernON .latin", ".kernOFF .latin"] ], ]; expectMatch.forEach((t) => { test(() => { let w1 = document.querySelector(t[0]).offsetWidth; let w2 = document.querySelector(t[1]).offsetWidth; assert_equals(w1, w2); }, "expected match: " + t[0] + " vs " + t[1]); }); expectMismatch.forEach((t) => { test(() => { let w1 = document.querySelector(t[0]).offsetWidth; let w2 = document.querySelector(t[1]).offsetWidth; assert_not_equals(w1, w2); }, "expected mismatch: " + t[0] + " vs " + t[1]); }); expectMatchOneOf.forEach((t) => { test(() => { let w1 = document.querySelector(t[0]).offsetWidth; let matched = false; t[1].forEach((t2) => { let w2 = document.querySelector(t2).offsetWidth; if (w1 == w2) { matched = true; } }); assert_true(matched); }, t[0] + " matches one of [" + t[1].join(", ") + "]"); }); </script> </body> </head>