レインドロップス テーマ 縦書きテスト

Raindrops テーマ1.482で縦書きをサポートをしようとしていて、この記事はその試験のために書いています。

縦書きというと、javascriptで特別な文字列の処理を行ったり、曲芸的なCSSのテクニックを使うという 偏見のようなものが私にありました。

縦書きから、距離を置いていたわけですが、数か月前に「縦書きしたい時もあるよな」なんて気持ちが湧いてきて、「それだったら、シンプルなものでいいから縦書きを形にできるかどうか、開発用のチャイルドテーマを作っておこう」という事で、開発用チャイルドテーマの一つに加えました。

ワードプレスのチャイルドテーマというと、テンプレートだけをオーバーライドするものというイメージが一般には強いものだと思いますが、Raindropsテーマは、独自にjsファイルやphp等もオーバーライドできるようにしていて、他の部分に影響がありそうなアップデートには、大抵チャイルドテーマを作成して、いくつかの環境で動かしてみて、OKなら親に反映させるという開発スタイルを行ってきています。

このような開発スタイルなので、テーマのデータを保存する場所も、optionフィールドをデフォルトで使い続けています。現在テーマで一般に使用されているtheme_modだとこのような開発スタイルは困難になるため、theme_modは、内部的に切り替え可能にしています。

そんなことが、このテーマの「カオス」な雰囲気を醸しているのかもしれません。

epubのロゴが出来たのが2010/6月ころかぁ、思い起こせば、その辺りからずーとなんか、いい方法がないのかなーなんて思っていたのかもしれない「縦書き備忘 - ミショニポー

あぁ、何という未練

たまに、縦書き用のチャイルドテーマを開いては、チョットした思いつきをセットしてみては すぐ行き詰まる。そっから集中しようとしないで すぐ作業終了。それをルールにした。

思いつきの断片を、つないでいくと、noto sans japanese 縦書きでもまぁまぁいいかも、とか 少しづつ形になってくる。

時々、ネガティブにもなる そんな時は、脳内会話はすぐ停止、他の手の動く作業に切り替えた

お気楽に思いつきを、拾い集めていると ある時に大抵答えが出る。 あるチャイルドテーマは、ある時点で開かなくたったし、時には その時点で捨てた。

縦書きも、最初は 「集中して、作りましょう」ではなかった、すこし「いやいや」なところもあり、追加しようと考えるまでには、ちょっとした醸造期間が必要だった。

ここでテストに入ることが出来た。

テストは、実装よりも長い時間がかかります。でも、利用者の気分で楽しむことが出来ます。

縦書きは、どのようにして有効にするのか?

  • 日本語環境で利用している場合、カスタマイザーを開くと、アドオンセクションに縦書きという項目が表示されるので「はい」を選択します。
    行の高さ、縦書きの範囲、自動的に縦書きにする要素を設定という項目がありますが、それらは動作確認をした後で自由に変更してください。


    次に、新規投稿を作成します。

    投稿本文に、以下のテーマタグを記述します。

    (テキストモード)

    <!--[raindrops class="writing-mode-mix"]-->

    入力が終わったら、(ビジュアルモードに切り替えて)好きなだけ文章を入力します。

縦書きでのCSSクラス

縦書きで必要とされる位置揃えを行うクラス

手紙文などでの結語(敬具等)は、文章の一番下の位置に表示されないと困ります。このような場合は以下のようにします。

敬具 

中央

note:edge x,

class d-tate bottomの二つのクラスを追加します

d-tateは、縦書きを意味し、bottomは行末を意味します

bottomは、横書きに切り替えた場合に右揃えとなります

<p class="d-tate bottom">敬具 </p>
<p class="d-tate center">中央</p>

縦書きのhr(ヘアーライン)要素

ヘアーラインにd-tateクラスを追加してください。


<hr class="d-tate" />

段落での字下げ

縦書きから、距離を置いていたわけですが、数か月前に「縦書きしたい時もあるよな」なんて気持ちが湧いてきて、「それだったら、シンプルなものでいいから縦書きを形にできるかどうか、開発用のチャイルドテーマを作っておこう」という事で、今後のアップデートのための開発用チャイルドテーマの一つになりました。

<p class="d-tate indent">縦書きから、距離を置いていたわけですが、数か月前に「縦書きしたい時もあるよな」なんて気持ちが湧いてきて、「それだったら、シンプルなものでいいから縦書きを形にできるかどうか、開発用のチャイルドテーマを作っておこう」という事で、今後のアップデートのための開発用チャイルドテーマの一つになりました。</p>

半角英数文字の横倒しを修正するクラス.upright

縦書きというと、javascriptで特別な文字列の処理を行ったり、

uprightクラスを追加した場合

縦書きというと、javascriptで特別な文字列の処理を行ったり、

note:edge x,

縦書きというと、<span class="upright">javascript</span>で特別な文字列の処理を行ったり、曲芸的なCSSのテクニックを使うという 偏見のようなものが私にありました。

これでも、なんかしっくりきませんね。いっそタイトル属性を付けてやって、hoverしたらツールチップを表示するといった事もやり方としてはアリかも

縦書きというと、javascriptで特別な文字列の処理を行ったり、

ルビ

 木村は官吏である。

 ある日いつもの通りに、午前六時に目をました。夏の初めである。もう外は明るくなっているが、女中が遠慮してこのだけは雨戸を開けずに置く。かやの外に小さく燃えているランプの光で、独寝ひとりねねやが寂しく見えている。

 器械的に手がまくらそばを探る。それは時計を捜すのである。逓信省で車掌に買って渡す時計だとかで、すこぶる大きいニッケル時計なのである。針はいつもの通り、きちんと六時を指している。

「おい。戸を開けんか。」

 女中が手をき拭き出て来て、雨戸を繰り開ける。外は相変らず、灰色の空から細かい雨が降っている。暑くはないが、じめじめとした空気が顔に当る。

森鴎外 あそび

ruby要素の見本

女中が手を<ruby><rb>拭</rb><rp>(</rp><rt>ふ</rt><rp>)</rp></ruby>き拭き出て来て、雨戸を繰り開ける。外は相変らず、灰色の空から細かい雨が降っている。

圏点

縦書きというと、javascriptで特別な文字列の処理を行ったり、曲芸的なCSSのテクニックを使うという 偏見のようなものが私にありました。

note:edge x,

em要素で囲まれた文字列に圏点が追加されます。

<em>縦書き</em>というと、javascriptで特別な文字列の処理を行ったり、曲芸的なCSSのテクニックを使うという 偏見のようなものが私にありました。

縦書き文中での、画像やビデオの挿入

縦書きというと、javascriptで特別な文字列の処理を行ったり、曲芸的なCSSのテクニックを使うという 偏見のようなものが私にありました。

縦書きから、距離を置いていたわけですが、数か月前に「縦書きしたい時もあるよな」なんて気持ちが湧いてきて、「それだったら、シンプルなものでいいから縦書きを形にできるかどうか、開発用のチャイルドテーマを作っておこう」という事で、今後のアップデートのための開発用チャイルドテーマの一つになりました。

ワードプレスのチャイルドテーマというと、テンプレートだけをオーバーライドするものというイメージが一般には強いものだと思いますが、Raindropsテーマは、独自にjsファイルやphp等もオーバーライドできるようにしていて、他の部分に影響がありそうなアップデートには、大抵チャイルドテーマを作成して、いくつかの環境で動かしてみて、OKなら親に反映させるという開発スタイルを行ってきています。

このような開発スタイルなので、テーマのデータを保存する場所も、optionフィールドをデフォルトで使い続けています。現在テーマで一般に使用されているtheme_modだとこのような開発スタイルは困難になるため、theme_modは、内部的に切り替え可能にしています。

そんなことが、このテーマの「カオス」な雰囲気を醸しているのかもしれません。

キャプション付き画像

epubのロゴが出来たのが2010/6月ころかぁ、思い起こせば、その辺りからずーとなんか、いい方法がないのかなーなんて思っていたのかもしれない「縦書き備忘 - ミショニポー

あぁ、何という未練

たまに、縦書き用のチャイルドテーマを開いては、チョットした思いつきをセットしてみては すぐ行き詰まる。そっから集中しようとしないで すぐ作業終了。それをルールにした。

思いつきの断片を、つないでいくと、noto sans japanese 縦書きでもまぁまぁいいかも、とか 少しづつ形になってくる。

時々、いやな気分になる。「誰も使わないよ・・・」 いいじゃん「自分で使えば」 そんな時は、脳内会話はすぐ停止、他の手の動く作業に切り替えた

お気楽に思いつきを、拾い集めていると ある時に大抵答えが出る。 あるチャイルドテーマは、ある時点で開かなくたったし、時には その時点で捨てた。

縦書きも、最初は 「集中して、作りましょう」ではなかった、すこし「いやいや」なところもあり、追加しようと考えるまでには、ちょっとした醸造期間が必要だった。

でも、何とか基本的な実装を行い、ここでテストに入ることが出来た。

テストは、実装よりも長い時間がかかります。でも、利用者の気分で楽しむことが出来ます。

画像やビデオの挿入部分のソース

画像や、動画を挿入する場合は、d-tate-wrapクラスで囲んでください。

縦書きの場合、alignleft alignrightといったクラスは、そのまま挿入するとレイアウトを破壊する可能性があります。

また、縦書きのスタイルでは、alignright以外の位置ぞろえクラスは、すべてalignrightで上書きされるように設定しています。

<div class="d-tate-wrap">
</div> <div class="d-tate-wrap"> <a href="http://tenman.info/labo/css/files/bouquet.jpg"><img src="http://tenman.info/labo/css/files/bouquet-300x188.jpg" alt="" width="300" height="188" class="size-medium wp-image-3677" /></a> キャプション付き画像 </div>

キャプション付き画像や、oembedメディアは、<div class="d-tate-wrap">で囲んでください。
ブラウザのサイズにより、これらの画像が、左端にある場合に、後続する行が、右端まで戻らなくなります。

縦中横

text-combine-upright: digit 2

といったスタイルの指定が、出来るようですが、ブラウザのサポートは、ハッキリしません。

別の試みも参照してください。レインドロップステーマ 縦中横 - CSS note

99才です

もし、必要なら、line-heightを広めにとって、文字を小さくすると出来るかもしれません、

<p class="d-tate line-height-wide">私<span class="d-yoko digit-2">99</span>才です</p>
.line-height-wide{
 line-height:2.6;
}
.digit-2{
 font-size:76%;
 white-space:nowrap;
}


新着記事

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