縦書き

ワードプレステーマ レインドロップス1.482でテーマで縦書きが出来る機能を追加しました。

俳句や詩のようなものを書きたくなった時に、いろんな苦労をしないでさっと縦書きが出来たらいい

いま、縦書きはそれほど人気があるという風には考えていないし、横書きで十分な場合も多いと思いますが

人に、喜怒哀楽があるように 時には縦書きで書きたい時もあるだろうと考えました

この縦書きの機能実装する中で、ウェブ上の縦書きに関する記事をいくつか読みました。

日本語の横書きは「、。」でなく、「,。」で書くという事が今でも、行われているようで、かなりショックを受けました(そんなことも知らない自分の無能と、なんでそんなことをといった驚き 両方)

恐らく、昭和二十年代には、和文タイプライターを使っていた頃で、横書きなどもあったかどうかわからない時代の事で、「、」を回転させたりしても、うまい配置にならなかったために、ある種の「工夫」として横書きカンマは生まれたのではないかと想像する。

昭和二十七年ごろは、公文書を横書きで行うといった通達が出されたり、横書きカンマも、そのような中で決まっていったもののようで、現在でもカンマ横書きが生きている分野があるのだそうだ。

時代劇でみる、武士は巻紙に筆書きで書簡を書くのが、嗜みだったのかもしれない

日本語文字は比較的左上から書き始まり右下で書き終わる、連綿としたリズムはこのような記述方法の中で洗練されたのだろう

その時代時代で書くための道具の影響が大きかった事をうかがわせる。

そう考えると「ウェブでの縦書き」も制約の中で工夫という点ではあまり変わらないのかな、などと思う

言語が書き方を既定しているというよりかは、道具がその時々の書き方を生んできたと考えたほうがいいのかもしれない

日本語は縦書きでも横書きでも可読だという英語などにはない特徴を持っている

新聞や文庫本は、いまだに縦書きで、 そういったものは、満員電車の中でも、折りたたんで読んだり、それなりの威力を発揮する場面もあったけれど

スマホ見ている人に、縦書きの優位性なんてちょっと思いつけないところもありますが、

ワードプレスのような文章を主な相手とするツールも、横書きしかできないよ といった制約を解き放してやれば、うまい使い方が生まれてくる可能性はあるだろうか、

これまで、縦書きにチャレンジしては負けてばかりでしたが、特別な技術が無くても ブラウザは比較的安定した縦書きを表示できるようになってきました。

優れたアイディアを持つ人なら、縦書きに特別な意味を吹き込んでいくことが出来るかもしれません。

レインドロップステーマでの縦書き機能は、テキストモードでクラスを追加しながら、縦横混合のレイアウトを作成するものなのですが、「いろんな苦労をしないで」という目標を実現するために

投稿本文にカスタマイザーのアドオンで、縦書きを有効にしたうえで、

[raindrops class="writing-mode-mix"]

というタグを本文に記述すると、縦書きになるという方法をとっています。

面倒に思われるかもしれませんが横書きとの調和のためです

閲覧ユーザーは、好みに応じて縦書き、横書きを切り替えができます

まだ、始めたばかりの機能なので改善の余地が、たくさんありそうです

テキストモードで要素を記述しながら、クラスを追加して記述するのは慣れていないとフラストレーションの元です

ビジュアルエディターを使用する初心者の方でも、縦書きが出来るように一定の配慮をしていきたいと考えています

次のバージョンでは、ビジュアルモードで書く人向けに「縦書きの場合は、右揃えのボタンで、下に張り付くようにしてみよう」とか、いろいろやることが出てきています

出来ないこともたくさんあります。 Edgeブラウザで、圏点が表示できないとか、半角英数を正立できないとか、いろいろありますが、うまい使いどころを見つけていただけるとうれしい

面白がってくれる人がいるのか、少し心配でもありますが まずは、始めてみましょう


縦書き用のCSSクラス

d-tate
p要素、h1-h6要素で、縦書き表示を行います
d-yoko
横書き表示を行います
full-width
p-yokoと組み合わせて、コンテンツ幅で表示
d-tate-wrap
youtube等のOembedコンテンツ、キャプションショートコードを縦書き文章中に含める場合は、<div class="d-tate-wrap">でラップしてください。このブロックは、幅296pxに制限されます。
upright
span要素で、半角英数文字の成立表示を行います。(edgeでは、動作しません)
indent
p要素で、1文字分インデントします。
indent-2
p要素で、2文字分インデントします。
bottom
p要素で、文字を下揃えします。
center
p要素で、縦方向中央揃え
centered
div要素で、子p要素 縦書き文を横方向中央配置します
writing-mode-mix-article
個別投稿タイトル近くに、縦書き横書き表示選択ボタンが表示されますが、CSSを縦書きの場合だけに適用する場合には、このクラスを使ってください(1.483からのサポート)
writing-mode-standard-article
個別投稿タイトル近くに、縦書き横書き表示選択ボタンが表示されますが、CSSを横書きの場合だけに適用する場合には、このクラスを使ってください(1.483からのサポート)
em要素
圏点を表示します(edgeでは、動作しません)
ruby要素 rt,rp
ルビ表示をサポートします。(rtcはサポートしません)
blockquote要素
そのまま記述可能です
ul,ol,dl
そのまま、縦書きで表示します
table要素
横書きのまま表示します(td内にp要素を含んでいなければ、p要素に何等かのアトリビュートがあれば、横書き)
hr要素
縦書き文章内で使用する場合は、d-tateクラスを追加していただくと、縦型のヘアーラインを表示します

リンク

日本語が縦書きから横書きになるまで(前篇) 日本語学者 屋名池 誠



コメントは受け付けていません。