Skip to content

Instantly share code, notes, and snippets.

@moreaki

moreaki/README.md

Created April 22, 2026 21:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save moreaki/f7c6baa545394ffe3f79b100794c774a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save moreaki/f7c6baa545394ffe3f79b100794c774a to your computer and use it in GitHub Desktop.
Download ZIP
WeasyPrint SVG inline-size visual proof sources
Raw
README.md

SVG inline-size visual proof

These files reproduce the two SVG examples added to the PR proof:

  • vertical-inline-size.svg renders Japanese vertical text with writing-mode: vertical-rl and inline-size: 200px.
  • rtl-inline-size.svg renders Arabic RTL text with direction: rtl and inline-size: 200px.
  • inline-size-proof.html places both examples on one page for a compact rendered PNG.

Render locally from the WeasyPrint checkout with:

python -c "from weasyprint import HTML; HTML(filename='inline-size-proof.html').write_png('inline-size-proof.png')"

Font availability changes the glyph design, but the layout behavior to check is the wrapping: vertical columns for the Japanese example and right-aligned wrapped RTL lines for the Arabic example.

Raw
inline-size-proof.html
<!doctype html>
<meta charset="utf-8">
<title>SVG inline-size visual proof</title>
<style>
@page { size: 420px 360px; margin: 0 }
body { margin: 0; font-family: sans-serif; }
.label { font: 12px sans-serif; margin: 8px 0 4px 8px; color: #333; }
.row { display: flex; align-items: flex-start; gap: 12px; margin-left: 8px; }
svg { border: 1px solid #ddd; }
</style>
<div class="label">vertical-rl + inline-size: 200px</div>
<div class="row"><svg xmlns="http://www.w3.org/2000/svg"
width="100" height="300" viewBox="0 0 100 300">
<text x="62.5" y="25" inline-size="200"
style="font: 25px IPAMincho; inline-size: 200px; writing-mode: vertical-rl;">
テキストは１０文字後に折り返されます。</text>
</svg></div>
<div class="label">direction: rtl + inline-size: 200px</div>
<div class="row"><svg xmlns="http://www.w3.org/2000/svg"
width="300" height="100" viewBox="0 0 300 100">
<text x="250" y="30"
style="font: 20px PakType Naqsh; inline-size: 200px; direction: rtl;">
هذا النص يلتف في 200 بكسل.</text>
</svg></div>
Raw
rtl-inline-size.html
<style>@page { size: 300px 100px; margin: 0 } body { margin: 0 }</style><svg xmlns="http://www.w3.org/2000/svg"
width="300" height="100" viewBox="0 0 300 100">
<text x="250" y="30"
style="font: 20px PakType Naqsh; inline-size: 200px; direction: rtl;">
هذا النص يلتف في 200 بكسل.</text>
</svg>
Display the source blob
Display the rendered blob
Raw
rtl-inline-size.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
vertical-inline-size.html
<style>@page { size: 100px 300px; margin: 0 } body { margin: 0 }</style><svg xmlns="http://www.w3.org/2000/svg"
width="100" height="300" viewBox="0 0 100 300">
<text x="62.5" y="25" inline-size="200"
style="font: 25px IPAMincho; inline-size: 200px; writing-mode: vertical-rl;">
テキストは１０文字後に折り返されます。</text>
</svg>
Display the source blob
Display the rendered blob
Raw
vertical-inline-size.svg
<svg xmlns="http://www.w3.org/2000/svg"
width="100" height="300" viewBox="0 0 100 300">
<text x="62.5" y="25" inline-size="200"
style="font: 25px IPAMincho; inline-size: 200px; writing-mode: vertical-rl;">
テキストは１０文字後に折り返されます。</text>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment