TAKAIDO intertainment

高井戸インターテインメント

labo

縦組み

縦組み

 この一年、コロナ禍での巣篭もりを良い機会と思って、縦書きと段組みを組み合わせた「日本語の縦組み」がWEBページ上でどこまで実現できるかを探っていたんですけど、ホームページのリニューアルにともない、その経過を少しづつ書きつづっていこうと思います。
 ただ、インターネット以前から、デジタル文化ってそもそも英語圏からの輸入されてきたものですし、スマホ〜タブレット〜PCのオペレーション、そして、縦スクロールのナビゲーションを基本としたWEBページの常識のなかで、縦組み表現がふさわしいのかというと、無理矢理な感じは、もちろんしてますけど、日本語表現をコミュニケーションのメインとしてきている自分の選択肢の1つとして、限界をわかったうえで考えていっています。

【縦書きのありかを思う】
 そもそも、ネット上でなくても普段の生活のなかで、縦書きがどこにあるかというと、新聞・雑誌・書籍などの出版物については、いまだ主流だと思いますが、ラノベみたいにすでに横書きで読ませるのが「新しさ」みたいになっているものもあります。また、個人のプライベートな文章を書く場面では、ちょっとしたメモ書きや日記などは、横書きがふつうでしょう。ただ、手紙など個人から個人へのコミュニケーションだと、縦書きのほうが親近感や礼節を感じることになるという感覚は、まだ健在だと思われます。不動産や会社の「契約書」は、すでに横書きになってますけど、だからといって「退職願い」は、縦書きで書いといたほうが良いように思います。とすると、ブログなどのように個人から不特定多数へ発信する文章表現では、無理に縦書きにするほうが、違和感を感じそうです。ここに書いている文章自体もそういうタイプのものなので、変ですよね、この文章、縦書きで読ませてるのって。
 また、学校の「作文・国語の黒板・習字の授業」などは、今だに縦書きです。習字や書道のことを考えると、日本語って、ひらがなにしろ漢字にしろ、トメとかハラいとかの書き順に関わるあたりは、縦書きを前提に考えられているんですよね。当たり前ですけど、日本語が今の造形になった時代には、横書き文化なんて輸入されてるわけないじゃん。
 何年か前に、幕末に日本にとっての外国語がオランダ語から英語に移っていくころの通詞(通訳)の人たちの話を書いた本を読んだりしてたんですけど、日本最初の英和辞典も縦書きだったわけで、解体新書も縦書きで訳されているので、自分のこの計画の無理矢理さも、そういう見てくれになってくれれば、面白いのかなと思っています。(だいたい、技術情報を縦書きで伝えるなんて不親切だよなぁ)

【前提条件】
 キンドルのようなブックリーダーアプリのようなものなら、充実してきていると思いますが、そういったパッケージされたものではなくて、スマホ・タブレット・PCなどを持っていれば、特別なアプリを用意しなくても普通に見ることができる、ネットのホームページ上での縦書きの段組み表示ということで考えています。
 そして、投稿者(執筆者)の条件は、標準的なブログソフト「wordpress」でブログを投稿することができる程度の知識を持っている人と考えています。このブログもwordpressで投稿しています。段組みの都合とかわからなくても、組版の知識とかがなくても、HTMLやCSSなどホームページのレイアウト技術の知識を持っていなくても、文章量などを気にせずに書いたまんまが表示できるように。
 また、なるべくデバイスを限定せず、1つのテキストソースから、スマホ、タブレット、PCそれぞれに見合った表示がされるような、いわゆるレスポンシブなものとして。

縦書き設定


スタイルシートでの縦書き対応

  • 縦書きを指定するスタイルシートのプロパティ
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;(Safari用ベンダープレフィックス)
    -ms-writing-mode: tb-rl;(IE用ベンダープレフィックス)
  • 縦書き中の半角英数字の回転。
    text-orientation: mixed;
    text-orientation: upright;

    -webkit-text-orientation: mixed;(Safari用ベンダープレフィックス)

    初期設定では、90度寝かした状態(mixed)で並ぶ。→ 0123456789abcDEF
    -90度回転させて1文字づつ縦に並べる(upright)ことも出来る。0123456789abcDEF
  • 4ケタ以内の数字を全角1文字におさめる
    text-combine-upright: all;
    -ms-text-combine-horizontal: all;(ベンダープレフィックス)
    20210501

    ※このプロパティは、対応しているブラウザが少ないため動作が安定していないです。ちなみに、chromeでは効きますが、Safariでは表示されません。将来の対応拡充に期待したいです。

英文中の改行ルール

  • 行末に来た単語すべてに対して単語途中で改行するかどうかを制御する
    word-break: break-all;(単語途中でも強制改行)
    word-break: normal;(強制改行なし)

    日本語の場合は、word-break: normal; にしておかないと、句読点の直前で改行されてしまうので注意。(Safari)
  • 単語ごとに改行
    overflow-wrap: normal;
    行長より長い単語があっても、途中で改行しない

    overflow-wrap: anywhere;
    単語ごとの改行を優先するが、行長より長い単語があると、単語途中で改行させる

    overflow-wrap: break-word;
    (anywhereと同じ動作と思われる)
  • 単語途中で改行し、ハイフンを挿入する(いわゆるハイフネーション)
    hyphens: auto;

    欧文指定(lang="en",lang="de")にたいして使われるもので、このブログは日本語主体で考えているので、使っていません。

段組み設定

段組みを設定するスタイルシートのプロパティ

  • 1段の高さ(行長)指定
    column-width: 000px;
    -webkit-column-width: 000px;(ベンダープレフィックス)
  • 段数の指定
    column-count: 3;
    -webkit-column-count: 3;(ベンダープレフィックス)
  • 段間サイズ
    column-gap: 00px;
    -webkit-column-gap: 00px;
    (ベンダープレフィックス)
  • 段間に入れることができる罫線の指定
    column-rule: solid 1px #000;
    -webkit-column-rule: solid 1px #000;
    (ベンダープレフィックス)

    borderと同じで、線種・太さ・色を一括で指定できます。
    段間の中央に罫線が上塗りされるかたちでひかれるので、上の段と下の段の間隔は、変わりません。罫線を太くしても段間が開いていくわけではないです。
  • 段組み全体の高さを指定する
    height: 000px;

    1段の高さ(column-width)、段数(column-count)、段間サイズ(column-gap)から導き出される段組み全体の高さ(height)を指定しておかないと、レイアウトが指定通りに表示されない場合があるため、この数値は、必須であったほうがよいです。

段組みサンプル1

 これらの「縦書き」と「段組み」のスタイルシートの機能を使えば、とりあえずは、縦組みが実現できるのだけど、それは、段に含まれるボリュームである文章量がはっきり判明していて、文字組み指定やレイアウトデザインがかっちり決定している場合でのことで、ブログ投稿のように、毎回文章量に変化があり、複数のデバイスで閲覧することを前提としたレスポンシブに変化するレイアウトデザインを考慮すると、もうひと工夫が必要になってくるのですが、それは、次の投稿へ。

 次回につづく。

  • CATEGORIES