日本語で書いてみる
ふりがな、圏点、禁則処理、欧文との混植。このテーマが日本語の文章をどう組むかを一枚にまとめた見本。
Contents
このテーマはベトナム語と英語を想定して作られた。日本語は後から足した言語なので、うまく組めているかどうかは実際に日本語を流し込んでみないと分からない。このページはそのための一枚である。
本文に lang: ja を書くと、記事の <article> に lang="ja" が付く。その一行で書体・行間・禁則処理が日本語向けに切り替わる。サイト全体を多言語化しなくても、記事単位で切り替えられる。
書体#
本文はまず Georgia を指し、Georgia に無い文字は次の明朝体へ落ちる。ブラウザは文字ごとに書体を選ぶので、Goldmark や HTML のようなラテン文字は Georgia、漢字と仮名はヒラギノ明朝が受け持つ。ひとつの段落に二つの書体が同居していても、どちらも本文用の明朝系なので違和感は出ない。
見出しや日付など、テーマ側が出す文字はゴシック体のままにしてある。読者が書いたものと、テーマが足したものを、書体で見分けられるようにするためだ。
ふりがな#
ruby ショートコードを使う。第一引数が親文字、第二引数が読み。
{{< ruby "組版" "くみはん" >}}という言葉は、
{{< ruby "活版印刷" "かっぱんいんさつ" >}}の時代から使われている。組版という言葉は、活版印刷の時代から使われている。 文選した活字を植字し、 校正を重ねて紙面を作る。その手順の名前が、そのまま画面の上に残っている。
ルビが付いた行だけ行間を広げるようにしてあるので、上の行にふりがながぶつからない。段落全体の行間は変わらない。
難しい読みほど効く#
熟字訓のように、漢字一字ずつには分けられない読みもそのまま渡せる。五月雨、紅葉、 大人、土産。人名や地名も同じで、生駒、月見里のような読ませ方をひとつずつ書ける。
素の HTML でも書ける#
複雑な組み方をしたいときは <ruby> を直接書けばいい。テーマは生の HTML をそのまま通す。
<ruby>東<rt>とう</rt>京<rt>きょう</rt></ruby>東京のように、漢字一字ごとに読みを割り当てる書き方(モノルビ)もこれでできる。
<rp> に入れた括弧が代わりに表示される。ルビに対応していないブラウザや、本文をそのままコピーしたときの保険になっている。
圏点#
日本語で強調するときは、太字や斜体よりも圏点のほうが自然なことが多い。斜体は仮名の形を崩すし、太字は明朝の中で浮いてしまう。
{{< kenten >}}ここが大事{{< /kenten >}}たとえばここだけは覚えて帰ってほしいという一文に打つと、声の調子が変わったように読める。太字や斜体も使えるが、日本語の本文では圏点のほうが穏やかに効く。
引用と括弧#
文章を書くというのは、考えるということの別名である。考えがまとまってから書くのではない。書くことによって考えがまとまる。
鉤括弧は「このように」使う。二重鉤括弧は『この中に』入れる。丸括弧(このように)もそのまま出る。行頭に句読点や閉じ括弧が来ないよう line-break: strict を指定してあるので、禁則処理はブラウザが引き受けてくれる。
箇条書き#
- 行間は本文より少し広げてある
- 漢字と仮名が混ざっても行の高さは揃う
- 欧文(
hugo server)を挟んでも崩れない
- 見出しを立てる
- 本文を書く
- ふりがなを振る
- 難しい読みだけでよい
- 全部に振ると読みにくくなる
表#
| 項目 | ふりがな | 備考 |
|---|---|---|
| 組版 | くみはん | 表の中でもルビは効く |
| 禁則処理 | きんそくしょり | ブラウザ任せ |
| 縦書き | たてがき | 未対応 |
コードと数式#
コードブロックの中は等幅書体のままで、日本語のコメントも読める。
def furigana(base: str, reading: str) -> str:
"""親文字と読みを ruby 要素に組み立てる。"""
return f"<ruby>{base}<rp>(</rp><rt>{reading}</rt><rp>)</rp></ruby>"
print(furigana("組版", "くみはん"))数式も日本語の中でそのまま使える。円の面積は 、 球の体積は次のとおり。
欧文との混植#
日本語の文章に URL や英単語が混ざるのはふつうのことだ。Hugo、Goldmark、
Chroma、KaTeX — どれも半角のまま並ぶ。全角と半角のあいだに自動で四分アキを入れる処理は入れていない。入れると、コピーしたときに余計な空白が付いてくるような実装になりがちで、得より損が大きいと判断した。空きが欲しいところには自分で半角スペースを打てばいい。
まだできないこと#
writing-mode: vertical-rl は入れていない。縦書きにすると、目次・コードブロック・
数式・図の置き場所をすべて設計し直すことになる。横書きのブログとしてまとまっているほうが、中途半端な縦書きより読みやすいと考えている。
サイトの設定に hasCJKLanguage = true を入れておくと、Hugo が文字数で読了時間を数えるようになる。これを入れないと、日本語の記事はすべて「1 分で読める」ことになってしまう。