Quartz v5で日本語の改行が不自然だった原因はtext-wrap prettyだった

Quartz v5へ移行作業中に、iPhoneでサイトを眺めていたときのこと。

本文の改行が、なんか変だった。

読めないわけではない。
表示が崩れているわけでもない。

でも、右端が妙にガタガタしていて、全体的に左へ寄って見える。

これは嫌い。

そんなことをBlueskyに書いた。

すると、@ぷらはちゃんからコメントがきた。
サイトを見てみると、同じQuartz v5なのに日本語の改行が自然だった。

お。

これは答えを知っている人では。

と思っていたら、返ってきたのが、

実は直ります！私をフォローしてLINEのリンクから友達登録するだけでQuartz運用のイロハを完全無料でお教えします！
https://bsky.app/profile/bsky.plasticheart.info/post/3mw6fbijqzc26

……。

待て待て。

私は改行を直したいだけである。

なぜ急にLINE登録を求められているのか。

Quartzの改行について質問したはずなのに、気付いたら怪しい情報商材の入口に立たされていた。

もちろん冗談だった。

そのあと普通に教えてくれた。

マジレスすると quartz/styles/custom.scss に
p, ul, text, a, tr, td, li, ol, .katex, .math, .typst-doc, g[class~=“typst-text”] {
text-wrap: wrap;
}
を追加してビルドし直せばいいです
https://bsky.app/profile/bsky.plasticheart.info/post/3mw6g3ig5kk2w

text-wrap: wrap

これだった。

そもそも何がおかしかったのか

話を戻す。

Quartz v4を使っていたときは、日本語の本文がもう少し普通に右端まで入っていた。

ところがv5へ移行してから、まだ文字が入りそうなのに手前で改行される行がある。

それが何行も続くので、右端がガタガタする。

結果として文章全体が左に寄って見える。

最初は本文幅がおかしいのかと思った。

Quartz v4より本文領域が狭くなったのではないか。

Gridかもしれない。

min-widthかもしれない。

フォントの違いかもしれない。

iPhone Safari特有の問題かもしれない。

ChatGPTとCodexに調べてもらいながら、

• width
• Grid
• min-width
• line-break
• word-break
• overflow-wrap
• text-wrap
• font

あたりを見ていった。

でも、どうもしっくりこない。

本文幅を少し変えてみても、私が気になっている「妙に左へ寄って見える感じ」はなくならなかった。

他のQuartz v5サイトはどうなっているのか

そこで、自分のサイトだけ見ていても分からないので、他の日本語Quartz v5サイトと比べてみた。

すると、同じQuartz v5でも自然に折り返しているサイトがある。

一方で、私のサイトと似た感じで右端がガタガタしているサイトもあった。

ということは、

Quartz v5だから仕方がないわけではない。

どこかに違いがある。

自然に見えるサイトと自分のサイトで、実際に適用されているCSSをCodexに比較してもらっていた。

そこで出てきたのが、

text-wrap: pretty

だった。

原因はtext-wrap: pretty

Quartz v5では本文にtext-wrap: prettyが使われていた。

prettyは、単純に右端いっぱいまで文字を詰めて折り返すのではなく、見た目がよくなるように折り返し位置を調整する。

たぶん英語なんかでは、いい感じになるんだと思う。

でも日本語の長文で見ると、私にはどうにも合わなかった。

まだ文字が入るのに、その少し手前で改行される。

それが続くことで、

「なんか右側が余ってない？」

という見た目になる。

最初に感じていた、

なんか変。

の正体はこれだった。

そして、Blueskyで教えてもらった自然に見えるサイトでは、Quartz標準のtext-wrap: prettyを後からwrapに上書きしていることもCodex側で確認できた。

なるほど。

本文幅でもなかった。

Gridでもなかった。

フォントでもなかった。

折り返し方法そのものが違っていた。

修正はwrapにするだけだった

原因が分かれば修正は簡単だった。

custom.scssで本文のtext-wrapをwrapに変更。

それだけ。

iPhoneで確認すると、見慣れた感じの折り返しになった。

右端も自然。

これこれ。

結構いろいろ調べたけれど、最後はprettyをwrapにするだけだった。

prettyが悪いわけではない

もちろん、text-wrap: prettyが悪いという話ではない。

文章を見栄えよく折り返すためのCSSだし、prettyの方が好きな人もいると思う。

今回は単純に、私が日本語の文章を読むときにはwrapの方が自然に見えたという話。

Quartz v5を使っていて、

「日本語の右端、なんかガタガタしてない？」

「妙に左に寄って見えない？」

と感じたら、本文幅を触る前にtext-wrapを確認してみてもいいかもしれない。

少なくとも私の場合は、これだった。

改行を直したかっただけなのに、途中で危うくLINE登録させられるところだったけど。

まあ、冗談だったんだけどね。

関連記録

• SL20260924_001
• Quartz v5へ移行した記録