CSS note

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クラス

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

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

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

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

<hr class="d-tate" />

段落での字下げ

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

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

uprightクラスを追加した場合

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

ルビ

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

圏点

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

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

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

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

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

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

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

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

あぁ、何という未練

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

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

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

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

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

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

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

<div class="d-tate-wrap">

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

縦中横

text-combine-upright: digit 2

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

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

もし、必要なら、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;
}

新着記事