letter-spacing-bengali-yaphala-001.html (4742B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <meta charset="utf-8"> 4 <title>CSS Text test: letter-spacing and Bengali ya-phala (yo-pholo)</title> 5 <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> 6 <link rel="match" href="reference/letter-spacing-bengali-yaphala-001-ref.html"> 7 <meta name="assert" content="Letter-spacing does not separate yaphala from the preceding letter."> 8 <link rel="help" href="https://drafts.csswg.org/css-text/#letter-spacing-property"> 9 <link rel="help" href="https://github.com/w3c/line_paragraph_tests/issues/81"> 10 11 <style> 12 /* We try various "likely" font names, as well as generics; those not available 13 on the platform will simply fall back to a default. */ 14 .outer.a { 15 font-family: sans-serif; 16 } 17 .outer.b { 18 font-family: serif; 19 } 20 .outer.c { 21 font-family: Bangla MN, serif; 22 } 23 .outer.d { 24 font-family: Bangla Sangam MN, sans-serif; 25 } 26 .outer.e { 27 font-family: Nirmala UI, Vrinda, sans-serif; 28 } 29 .outer.f { 30 font-family: Noto Sans Bengali, sans-serif; 31 } 32 .inner { 33 position: relative; 34 margin: 1em; 35 height: 2em; 36 } 37 .test { 38 padding: 0.25em; 39 color: red; 40 letter-spacing: 1em; 41 position: absolute; 42 } 43 .mask { 44 padding: 0.25em; 45 color: green; 46 background: green; 47 position: absolute; 48 } 49 span { 50 display: inline-block; 51 } 52 </style> 53 54 <p>Test passes if the red Bengali text is entirely hidden by the green blocks.</p> 55 56 <div class="outer a"> 57 <div class="inner" lang="bn"> 58 <div class="test">অ্যান্টিগুয়া</div><!-- there should be 3 letter-spacing opportunities in this word --> 59 <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div> 60 </div> 61 <div class="inner" lang="bn"> 62 <div class="test">এ্যাডভোকেট</div><!-- there should be 4 letter-spacing opportunities in this word --> 63 <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div> 64 </div> 65 </div> 66 67 <div class="outer b"> 68 <div class="inner" lang="bn"> 69 <div class="test">অ্যান্টিগুয়া</div><!-- there should be 3 letter-spacing opportunities in this word --> 70 <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div> 71 </div> 72 <div class="inner" lang="bn"> 73 <div class="test">এ্যাডভোকেট</div><!-- there should be 4 letter-spacing opportunities in this word --> 74 <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div> 75 </div> 76 </div> 77 78 <div class="outer c"> 79 <div class="inner" lang="bn"> 80 <div class="test">অ্যান্টিগুয়া</div><!-- there should be 3 letter-spacing opportunities in this word --> 81 <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div> 82 </div> 83 <div class="inner" lang="bn"> 84 <div class="test">এ্যাডভোকেট</div><!-- there should be 4 letter-spacing opportunities in this word --> 85 <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div> 86 </div> 87 </div> 88 89 <div class="outer d"> 90 <div class="inner" lang="bn"> 91 <div class="test">অ্যান্টিগুয়া</div><!-- there should be 3 letter-spacing opportunities in this word --> 92 <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div> 93 </div> 94 <div class="inner" lang="bn"> 95 <div class="test">এ্যাডভোকেট</div><!-- there should be 4 letter-spacing opportunities in this word --> 96 <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div> 97 </div> 98 </div> 99 100 <div class="outer e"> 101 <div class="inner" lang="bn"> 102 <div class="test">অ্যান্টিগুয়া</div><!-- there should be 3 letter-spacing opportunities in this word --> 103 <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div> 104 </div> 105 <div class="inner" lang="bn"> 106 <div class="test">এ্যাডভোকেট</div><!-- there should be 4 letter-spacing opportunities in this word --> 107 <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div> 108 </div> 109 </div> 110 111 <div class="outer f"> 112 <div class="inner" lang="bn"> 113 <div class="test">অ্যান্টিগুয়া</div><!-- there should be 3 letter-spacing opportunities in this word --> 114 <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div> 115 </div> 116 <div class="inner" lang="bn"> 117 <div class="test">এ্যাডভোকেট</div><!-- there should be 4 letter-spacing opportunities in this word --> 118 <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div> 119 </div> 120 </div>