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