|
<!doctype html> |
|
<html lang="en"> |
|
<meta charset="utf-8"> |
|
<title>SVG positioned bidi and cluster proof</title> |
|
<style> |
|
@page { |
|
size: 1200px 1600px; |
|
margin: 0; |
|
} |
|
html, |
|
body { |
|
margin: 0; |
|
background: white; |
|
color: #172033; |
|
font-family: Arial, DejaVu Sans, sans-serif; |
|
} |
|
svg { |
|
display: block; |
|
width: 1200px; |
|
height: 1600px; |
|
} |
|
</style> |
|
<svg viewBox="0 0 1200 1600" xmlns="http://www.w3.org/2000/svg"> |
|
<style> |
|
.title { |
|
font-family: Arial, DejaVu Sans, sans-serif; |
|
font-size: 30px; |
|
font-weight: 700; |
|
fill: #172033; |
|
} |
|
.subtitle, |
|
.column, |
|
.label, |
|
.note { |
|
font-family: Arial, DejaVu Sans, sans-serif; |
|
font-size: 18px; |
|
fill: #42506a; |
|
} |
|
.column { |
|
font-weight: 700; |
|
fill: #172033; |
|
} |
|
.label { |
|
font-weight: 700; |
|
fill: #29354a; |
|
} |
|
.note { |
|
font-size: 14px; |
|
fill: #68758d; |
|
} |
|
.guide { |
|
stroke: #d7dce7; |
|
stroke-width: 1; |
|
} |
|
.separator { |
|
stroke: #eef1f6; |
|
stroke-width: 1; |
|
} |
|
.reference { |
|
fill: #166534; |
|
} |
|
.positioned { |
|
fill: #1d4ed8; |
|
} |
|
</style> |
|
<text class="title" x="48" y="54">SVG positioned text: bidi, controls, and shaped clusters</text> |
|
<text class="subtitle" x="48" y="84">Before/after source fixture. In the after render, each blue row should match the green reference shape and spacing.</text> |
|
|
|
<text class="column" x="370" y="126">Reference / intended rendering</text> |
|
<text class="column" x="770" y="126">Positioned SVG input under test</text> |
|
|
|
<line class="guide" x1="350" y1="142" x2="350" y2="1510"/> |
|
<line class="guide" x1="750" y1="142" x2="750" y2="1510"/> |
|
|
|
<g transform="translate(48 180)"> |
|
<text class="label" x="0" y="0">Combining mark: decomposed e + acute stays one cluster</text> |
|
<line class="separator" x1="0" y1="20" x2="1100" y2="20"/> |
|
<text class="reference" x="350 390" y="58" font-family="Arial, DejaVu Sans, sans-serif" font-size="42">éa</text> |
|
<text class="positioned" x="750 1040 790" y="58" font-family="Arial, DejaVu Sans, sans-serif" font-size="42">éa</text> |
|
<text class="note" x="350" y="92">precomposed U+00E9 + a</text> |
|
<text class="note" x="750" y="92">decomposed e U+0301 + a with x list</text> |
|
</g> |
|
|
|
<g transform="translate(48 310)"> |
|
<text class="label" x="0" y="0">Latin ligature: extra coordinates must not split one shaped glyph</text> |
|
<line class="separator" x1="0" y1="20" x2="1100" y2="20"/> |
|
<text class="reference" x="350" y="58" font-family="Helvetica Neue, DejaVu Sans, sans-serif" font-size="42">o</text> |
|
<text class="reference" x="385" y="58" font-family="Helvetica Neue, DejaVu Sans, sans-serif" font-size="42">ffi</text> |
|
<text class="reference" x="435" y="58" font-family="Helvetica Neue, DejaVu Sans, sans-serif" font-size="42">c</text> |
|
<text class="reference" x="465" y="58" font-family="Helvetica Neue, DejaVu Sans, sans-serif" font-size="42">e</text> |
|
<text class="positioned" x="750 785 1040 1080 835 865" y="58" |
|
font-family="Helvetica Neue, DejaVu Sans, sans-serif" font-size="42">office</text> |
|
<text class="note" x="350" y="92">whole run shaped with ffi ligature</text> |
|
<text class="note" x="750" y="92">extra x values inside ffi must be ignored</text> |
|
</g> |
|
|
|
<g transform="translate(48 440)"> |
|
<text class="label" x="0" y="0">Hebrew RTL: coordinate list follows visual order after bidi reordering</text> |
|
<line class="separator" x1="0" y1="20" x2="1100" y2="20"/> |
|
<text class="reference" x="350" y="58" direction="rtl" |
|
text-anchor="end" font-family="Arial, DejaVu Sans, sans-serif" font-size="34">ם</text> |
|
<text class="reference" x="382" y="58" direction="rtl" |
|
text-anchor="end" font-family="Arial, DejaVu Sans, sans-serif" font-size="34">ו</text> |
|
<text class="reference" x="414" y="58" direction="rtl" |
|
text-anchor="end" font-family="Arial, DejaVu Sans, sans-serif" font-size="34">ל</text> |
|
<text class="reference" x="446" y="58" direction="rtl" |
|
text-anchor="end" font-family="Arial, DejaVu Sans, sans-serif" font-size="34">ש</text> |
|
<text class="positioned" x="846 814 782 750" y="58" direction="rtl" |
|
text-anchor="start" font-family="Arial, DejaVu Sans, sans-serif" font-size="34">שלום</text> |
|
<text class="note" x="350" y="92">x values already in visual order</text> |
|
<text class="note" x="750" y="92">logical-order x list must be reordered</text> |
|
</g> |
|
|
|
<g transform="translate(48 570)"> |
|
<text class="label" x="0" y="0">Arabic AL shaping: lam-alef is one shaped cluster</text> |
|
<line class="separator" x1="0" y1="20" x2="1100" y2="20"/> |
|
<text class="reference" x="430" y="62" direction="rtl" text-anchor="end" |
|
font-family="Geeza Pro, Noto Naskh Arabic, DejaVu Sans, sans-serif" font-size="48">لا</text> |
|
<text class="positioned" x="830 880" y="62" direction="rtl" text-anchor="end" |
|
font-family="Geeza Pro, Noto Naskh Arabic, DejaVu Sans, sans-serif" font-size="48">لا</text> |
|
<text class="note" x="350" y="96">one lam-alef cluster</text> |
|
<text class="note" x="750" y="96">second x value must be ignored for the cluster</text> |
|
</g> |
|
|
|
<g transform="translate(48 705)"> |
|
<text class="label" x="0" y="0">RTL weak types: European and Arabic-Indic numbers with separators</text> |
|
<line class="separator" x1="0" y1="20" x2="1100" y2="20"/> |
|
<text class="reference" x="350" y="54" direction="rtl" text-anchor="end" |
|
font-family="Geeza Pro, Noto Naskh Arabic, DejaVu Sans, sans-serif" font-size="30">م</text> |
|
<text class="reference" x="378 400" y="54" font-family="Geeza Pro, Noto Naskh Arabic, DejaVu Sans, sans-serif" font-size="30">34</text> |
|
<text class="reference" x="428" y="54" font-family="Geeza Pro, Noto Naskh Arabic, DejaVu Sans, sans-serif" font-size="30">-</text> |
|
<text class="reference" x="452 474" y="54" font-family="Geeza Pro, Noto Naskh Arabic, DejaVu Sans, sans-serif" font-size="30">12</text> |
|
<text class="reference" x="512" y="54" direction="rtl" text-anchor="end" |
|
font-family="Geeza Pro, Noto Naskh Arabic, DejaVu Sans, sans-serif" font-size="30">س</text> |
|
<text class="positioned" x="912 852 874 828 778 800 750" y="54" |
|
direction="rtl" text-anchor="end" font-family="Geeza Pro, Noto Naskh Arabic, DejaVu Sans, sans-serif" |
|
font-size="30">س12-34م</text> |
|
|
|
<text class="reference" x="350" y="96" direction="rtl" text-anchor="end" |
|
font-family="Geeza Pro, Noto Naskh Arabic, DejaVu Sans, sans-serif" font-size="30">م</text> |
|
<text class="reference" x="378 400" y="96" font-family="Geeza Pro, Noto Naskh Arabic, DejaVu Sans, sans-serif" font-size="30">١٢</text> |
|
<text class="reference" x="428" y="96" font-family="Geeza Pro, Noto Naskh Arabic, DejaVu Sans, sans-serif" font-size="30">/</text> |
|
<text class="reference" x="452 474" y="96" font-family="Geeza Pro, Noto Naskh Arabic, DejaVu Sans, sans-serif" font-size="30">٣٤</text> |
|
<text class="reference" x="512" y="96" direction="rtl" text-anchor="end" |
|
font-family="Geeza Pro, Noto Naskh Arabic, DejaVu Sans, sans-serif" font-size="30">س</text> |
|
<text class="positioned" x="912 778 800 828 852 874 750" y="96" |
|
direction="rtl" text-anchor="end" font-family="Geeza Pro, Noto Naskh Arabic, DejaVu Sans, sans-serif" |
|
font-size="30">س١٢/٣٤م</text> |
|
<text class="note" x="350" y="128">EN/ES and AN/CS representative cases</text> |
|
</g> |
|
|
|
<g transform="translate(48 885)"> |
|
<text class="label" x="0" y="0">RTL neutral punctuation: brackets and spaces reorder with their text</text> |
|
<line class="separator" x1="0" y1="20" x2="1100" y2="20"/> |
|
<text class="reference" x="350" y="58" font-family="Arial, DejaVu Sans, sans-serif" font-size="34">)</text> |
|
<text class="reference" x="378 402 426" y="58" font-family="Arial, DejaVu Sans, sans-serif" font-size="34">abc</text> |
|
<text class="reference" x="470" y="58" font-family="Arial, DejaVu Sans, sans-serif" font-size="34">(</text> |
|
<text class="reference" x="520" y="58" direction="rtl" text-anchor="end" |
|
font-family="Arial, DejaVu Sans, sans-serif" font-size="34">ג</text> |
|
<text class="reference" x="560" y="58" direction="rtl" text-anchor="end" |
|
font-family="Arial, DejaVu Sans, sans-serif" font-size="34">ב</text> |
|
<text class="reference" x="600" y="58" direction="rtl" text-anchor="end" |
|
font-family="Arial, DejaVu Sans, sans-serif" font-size="34">א</text> |
|
<text class="positioned" x="1000 960 920 890 850 778 802 826 750" y="58" |
|
direction="rtl" text-anchor="end" font-family="Arial, DejaVu Sans, sans-serif" |
|
font-size="34">אבג (abc)</text> |
|
</g> |
|
|
|
<g transform="translate(48 1015)"> |
|
<text class="label" x="0" y="0">Boundary neutrals and explicit controls should not consume visible placement</text> |
|
<line class="separator" x1="0" y1="20" x2="1100" y2="20"/> |
|
<text class="reference" x="350" y="54" font-family="Arial, DejaVu Sans, sans-serif" font-size="38">AB</text> |
|
<text class="positioned" x="750 1040" y="54" font-family="Arial, DejaVu Sans, sans-serif" font-size="38">A‍B</text> |
|
<text class="note" x="350" y="84">ZWJ ignored visually</text> |
|
<text class="note" x="750" y="84">bad x for ZWJ must not move B</text> |
|
|
|
<text class="reference" x="350 378 406 434" y="126" font-family="Arial, DejaVu Sans, sans-serif" font-size="38">ABCD</text> |
|
<text class="positioned" x="750 1040 778 806 1080 834" y="126" |
|
font-family="Arial, DejaVu Sans, sans-serif" font-size="38">A‪BC‬D</text> |
|
<text class="note" x="350" y="156">LRE/PDF controls</text> |
|
<text class="note" x="750" y="156">controls must be invisible and zero-placement</text> |
|
</g> |
|
|
|
<g transform="translate(48 1230)"> |
|
<text class="label" x="0" y="0">Bidi isolate controls: visual order plus invisible isolate boundaries</text> |
|
<line class="separator" x1="0" y1="20" x2="1100" y2="20"/> |
|
<text class="reference" x="350" y="58" font-family="Arial, DejaVu Sans, sans-serif" font-size="34">A</text> |
|
<text class="reference" x="378" y="58" font-family="Arial, DejaVu Sans, sans-serif" font-size="34">ש</text> |
|
<text class="reference" x="418" y="58" font-family="Arial, DejaVu Sans, sans-serif" font-size="34">ל</text> |
|
<text class="reference" x="458" y="58" font-family="Arial, DejaVu Sans, sans-serif" font-size="34">ו</text> |
|
<text class="reference" x="498" y="58" font-family="Arial, DejaVu Sans, sans-serif" font-size="34">ם</text> |
|
<text class="reference" x="538" y="58" font-family="Arial, DejaVu Sans, sans-serif" font-size="34">B</text> |
|
<text class="positioned" x="750 1040 778 818 858 898 1080 938" y="58" |
|
font-family="Arial, DejaVu Sans, sans-serif" font-size="34">A⁧שלום⁩B</text> |
|
<text class="note" x="350" y="92">RLI/PDI keep Hebrew isolated</text> |
|
<text class="note" x="750" y="92">bad x values on controls should be ignored</text> |
|
</g> |
|
|
|
<g transform="translate(48 1360)"> |
|
<text class="label" x="0" y="0">Complex-script clusters and CJK guard cases</text> |
|
<line class="separator" x1="0" y1="20" x2="1100" y2="20"/> |
|
<text class="reference" x="350 384" y="54" font-family="Apple SD Gothic Neo, Noto Sans CJK KR, Malgun Gothic, sans-serif" font-size="36">한글</text> |
|
<text class="positioned" x="750 1040 1040 784 1040 1040" y="54" |
|
font-family="Apple SD Gothic Neo, Noto Sans CJK KR, Malgun Gothic, sans-serif" font-size="36">한글</text> |
|
|
|
<text class="reference" x="350 390 430" y="108" font-family="Devanagari MT, Noto Sans Devanagari, Nirmala UI, sans-serif" font-size="38">संस्कृत</text> |
|
<text class="positioned" x="750 1040 790 1040 1040 1040 830" y="108" |
|
font-family="Devanagari MT, Noto Sans Devanagari, Nirmala UI, sans-serif" font-size="38">संस्कृत</text> |
|
|
|
<text class="reference" x="350 386 422 458 494" y="160" |
|
font-family="Noto Sans CJK SC, Noto Sans CJK JP, Noto Sans CJK KR, Songti SC, Hiragino Sans, Apple SD Gothic Neo, sans-serif" |
|
font-size="34">中文日本어</text> |
|
<text class="positioned" x="750 786 822 858 894" y="160" |
|
font-family="Noto Sans CJK SC, Noto Sans CJK JP, Noto Sans CJK KR, Songti SC, Hiragino Sans, Apple SD Gothic Neo, sans-serif" |
|
font-size="34">中文日本어</text> |
|
<text class="note" x="350" y="192">CJK should remain ordinary per-character positioning</text> |
|
</g> |
|
</svg> |
|
</html> |