日本語で書いてみる

ふりがな、圏点、禁則処理、欧文との混植。このテーマが日本語の文章をどう組むかを一枚にまとめた見本。

5 min read Reference
Contents

このテーマはベトナム語と英語を想定して作られた。日本語は後から足した言語なので、うまく組めているかどうかは実際に日本語を流し込んでみないと分からない。このページはそのための一枚である。

本文に lang: ja を書くと、記事の <article>lang="ja" が付く。その一行で書体・行間・禁則処理が日本語向けに切り替わる。サイト全体を多言語化しなくても、記事単位で切り替えられる。

書体#

本文はまず Georgia を指し、Georgia に無い文字は次の明朝体へ落ちる。ブラウザは文字ごとに書体を選ぶので、GoldmarkHTML のようなラテン文字は Georgia、漢字と仮名はヒラギノ明朝が受け持つ。ひとつの段落に二つの書体が同居していても、どちらも本文用の明朝系なので違和感は出ない。

見出しや日付など、テーマ側が出す文字はゴシック体のままにしてある。読者が書いたものと、テーマが足したものを、書体で見分けられるようにするためだ。

ふりがな#

ruby ショートコードを使う。第一引数が親文字、第二引数が読み。

markdown
{{< ruby "組版" "くみはん" >}}という言葉は、
{{< ruby "活版印刷" "かっぱんいんさつ" >}}の時代から使われている。

組版くみはんという言葉は、活版印刷かっぱんいんさつの時代から使われている。 文選ぶんせんした活字かつじ植字しょくじし、 校正こうせいかさねて紙面しめんを作る。その手順てじゅんの名前が、そのまま画面の上に残っている。

ルビが付いた行だけ行間を広げるようにしてあるので、上の行にふりがながぶつからない。段落全体の行間は変わらない。

難しい読みほど効く#

熟字訓じゅくじくんのように、漢字一字ずつには分けられない読みもそのまま渡せる。五月雨さみだれ紅葉もみじ大人おとな土産みやげ。人名や地名も同じで、生駒いこま月見里やまなしのような読ませ方をひとつずつ書ける。

素の HTML でも書ける#

複雑な組み方をしたいときは <ruby> を直接書けばいい。テーマは生の HTML をそのまま通す。

html
<ruby><rt>とう</rt><rt>きょう</rt></ruby>

とうきょうのように、漢字一字ごとに読みを割り当てる書き方(モノルビ)もこれでできる。

ふりがなが出ないとき

<rp> に入れた括弧が代わりに表示される。ルビに対応していないブラウザや、本文をそのままコピーしたときの保険になっている。

圏点#

日本語で強調するときは、太字や斜体よりも圏点のほうが自然なことが多い。斜体は仮名の形を崩すし、太字は明朝の中で浮いてしまう。

markdown
{{< kenten >}}ここが大事{{< /kenten >}}

たとえばここだけは覚えて帰ってほしいという一文に打つと、声の調子が変わったように読める。太字斜体も使えるが、日本語の本文では圏点のほうが穏やかに効く。

引用と括弧#

文章を書くというのは、考えるということの別名である。考えがまとまってから書くのではない。書くことによって考えがまとまる。

鉤括弧は「このように」使う。二重鉤括弧は『この中に』入れる。丸括弧(このように)もそのまま出る。行頭に句読点や閉じ括弧が来ないよう line-break: strict を指定してあるので、禁則処理はブラウザが引き受けてくれる。

箇条書き#

  • 行間は本文より少し広げてある
  • 漢字と仮名が混ざっても行の高さは揃う
  • 欧文(hugo server)を挟んでも崩れない
  1. 見出しを立てる
  2. 本文を書く
  3. ふりがなを振る
    1. 難しい読みだけでよい
    2. 全部に振ると読みにくくなる

#

項目ふりがな備考
組版くみはんくみはん表の中でもルビは効く
禁則処理きんそくしょりきんそくしょりブラウザ任せ
縦書たてがたてがき未対応

コードと数式#

コードブロックの中は等幅書体のままで、日本語のコメントも読める。

ruby.py python
def furigana(base: str, reading: str) -> str:
    """親文字と読みを ruby 要素に組み立てる。"""
    return f"<ruby>{base}<rp>(</rp><rt>{reading}</rt><rp>)</rp></ruby>"


print(furigana("組版", "くみはん"))

数式も日本語の中でそのまま使える。円の面積は S=πr2S = \pi r^2きゅうの体積は次のとおり。

V=43πr3 V = \frac{4}{3}\pi r^{3}

欧文との混植#

日本語の文章に URL や英単語が混ざるのはふつうのことだ。Hugo、Goldmark、 Chroma、KaTeX — どれも半角のまま並ぶ。全角と半角のあいだに自動で四分アキを入れる処理は入れていない。入れると、コピーしたときに余計な空白が付いてくるような実装になりがちで、得より損が大きいと判断した。空きが欲しいところには自分で半角スペースを打てばいい。

まだできないこと#

縦書き

writing-mode: vertical-rl は入れていない。縦書きにすると、目次・コードブロック・ 数式・図の置き場所をすべて設計し直すことになる。横書きのブログとしてまとまっているほうが、中途半端な縦書きより読みやすいと考えている。

設定のこと

サイトの設定に hasCJKLanguage = true を入れておくと、Hugo が文字数で読了時間を数えるようになる。これを入れないと、日本語の記事はすべて「1 分で読める」ことになってしまう。