1 <!DOCTYPE html>
2 <html lang="en"><head>
3 <meta charset="utf-8">
4 <title>word-break: break-all, syllabic cluster</title>
5 <meta content="[Exploratory test] word-break: break-all means lines may break between any two typographic letter units. An indic syllable cluster should be wrapped as a unit to the next line." name="assert">
6 <link href="https://drafts.csswg.org/css-text-3/#word-break-property" rel="help">
7 <link href="reference/word-break-break-all-ref-008.htm" rel="match">
8 <link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
9 <style type="text/css">
10 .test { word-break: break-all; }
11 /* the CSS below is not part of the test */
12 .test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1.5 sans-serif; }
13 </style>
14 </head>
15 <body>
16 <div id="instructions">Test passes if the two orange boxes are the same.</div>
17 <div lang="hi" class="test"><div id="testdiv"><span id="testspan">हिन्दी हिन्दी हिन्दी</span></div></div>
18 <div lang="hi" class="ref"><span>हिन्दी हिन्दी हि<br>न्दी</span></div>
19 <script>
20 var sentenceWidth = document.getElementById('testspan').offsetWidth
21 document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
22 </script>
23 <!--
24 Notes:
25 This test is exploratory because indic conjuncts containing more than one consonant are not covered by the extended grapheme cluster definition, and therefore constitute more than one typographic unit, as defined in the CSS spec. Nevertheless, people using indic scripts expect the user agent to keep the orthographic syllable as a single unit.
26 -->
27
28 </body></html>