縦書きの時の字間について

こんにちは、

「字間を詰めるためにCSSを追加すればよい」などといった簡便である程度確立された方法があれば教えていただきたく思います。

https://developer.mozilla.org/ja/docs/Web/CSS/letter-spacing

edge,firefox,chrome等であれば、調整できるのではないかと思います。

テーマ自体としてそうした縦書き表示へのアップデートができそうな見通しはありますでしょうか。

WordPress5.0より、エディターの大きな変更があり、WordPress本体がCSSを持つようになりました。

個別の調整は可能かもしれませんが、汎用テーマのため、漢文対応といった機能を充実するよりかは、基本的な機能を維持することで精いっぱいといったところにあります。

もし、このようなスタイルだとうまくいくといった情報があれば、そのスタイルをテーマにマージするといった事は検討できます。

現在、投稿本文に　以下のようなコメントを記述していただいていると思いますが、

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

このコメントを

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

のように変更いただきますと

HTMLソースは、

<div id="post-65472" class="writing-mode-mix kanbun">
    <article class="clearfix post-65472 post type-post status-publish format-standard hentry category-uncategorized writing-mode-mix-article rd-tpl-single raindrops-pub-new  raindrops-mod-new">	
	...
    <!-- #post-65472 --></article>
</div>

と漢文用のクラスを追加することができます。

いろいろとお手数をおかけしているようで、恐縮です。

https://www.tenman.info/wp3/manualraindrops/archives/2222

の文字列が一部詰まっているのは、最初の段落がP要素で自動ラップされない（コアがPタグで自動ラップする機能がうまく動いていない？）、行頭に全角スペースがある影響（？）などで、正常な表示ができていないという事のようです。これらについては、もう少し調べてみたいと思います。

• This reply was modified 5 years, 3 months ago by nobita.

お返事ありがとうございました。

一般的なHTMLファイルにおける縦書き、横書きの文字詰めについては一応学習済みで、
それを利用してePubにおける縦組みの文章レイアウトは実用段階にまで到達しています。
あとはブログ環境でletter-spacingなどのタグをきちんと有効にできるかどうかです。

漢文独自のスタイル設定よりもむしろ、日頃気になっているのは、
「縦方向だけ間延びしているのに行間が狭い」というデフォルトの縦組みレイアウトです。
本音を言えば、文庫本単行本の標準的な組み版に早く近づいて欲しいと思っています。

WordPress5.0より、エディターの大きな変更があり、WordPress本体がCSSを持つようになりました。

とのことですので、ということは
ブログ管理者の私自身が、導入したWordPress全体のＣＳＳを編集できるということですね。
たいへんありがたいことで、さっそく編集したいと思います。

それで、重ねての質問となり心苦しいのですが、

［１］WordPress本体のＣＳＳファイル
［２］raindropsテーマのＣＳＳファイル
［３］記事上で追加するＣＳＳの記述

の３者のうち、
[raindrops class=”writing-mode-mix”]ないし派生させるクラス”writing-〇〇〇-mix”
におけるtategakiの”縦方向”の文字詰め設定は一体どこで行えば良いのでしょうか。

テーマ開発のノウハウを知らないため、３者のタグとしての優先関係がそもそも分かっていないのです。
一番スムーズなかたちでスタイル定義をしたいので、どうぞご教示ください。
（※「！」マークを付けて最優先に定義ができるのは知っていますが、編集するファイルの構成について知ることで、他の定義との兼ね合いや、他にすでに「！」定義されている書式設定がないかを検証したいのです）
（※特に気になっているのは「iOSだと現状でも追加CSS欄の指定で十分にタテの字間は詰まっているように見える」という事実です。PCやMacのブラウザに対して最も効果的に文字詰めを指示しなければ、状況は改善していかないのではないかと懸念しています。
ブラウザの対応待ちという問題もあり得ますが、同じブラウザでも字間を詰めたHTMLファイルの表示は可能です（実際そうやってePub漢文ファイルを制作検証しています）ので、テーマも含めたWordPressのシステムのどこかに問題があると思います）

今年度だけは夏休みを学生並みに開発に充てられるので、試行錯誤していろいろご報告したいとおもいます。

どうぞよろしくお願いします。

• This reply was modified 5 years, 3 months ago by ataketomi.
• This reply was modified 5 years, 3 months ago by ataketomi.
• This reply was modified 5 years, 3 months ago by ataketomi.
• This reply was modified 5 years, 3 months ago by ataketomi.
• This reply was modified 5 years, 3 months ago by ataketomi.
• This reply was modified 5 years, 3 months ago by ataketomi.

[raindrops class=”writing-mode-mix”]ないし派生させるクラス”writing-〇〇〇-mix”
におけるtategakiの”縦方向”の文字詰め設定は一体どこで行えば良いのでしょうか。

writing-mode-mixクラス名は、変更しない方がいいです。代わりに　writing-mode-mix kanbun　のように、クラスを追加して、

.writing-mode-mix.kanbun{
...
}

として、スタイルを追加した方がいいです。
理由は、writing-mode-mixクラスは、javascriptでも利用しているため、縦書き横書き切り替え機能などが動作しなくなります。

詳細は、
https://github.com/tenman/raindrops/blob/master/raindrops.js#L325-L369

テーマで、縦書きCSSがどこで行われているか　について

Raindrops/scripts/ja.php で、主なスタイルを指定しています。

詳細は、
https://github.com/tenman/raindrops/blob/master/languages/scripts/ja.php#L403-L1055

WordPressのフィルターという機能を使って、縦書きが指定されている投稿の場合に、スタイルが追加される処理をしています。

jsや、phpを変更する場合は、チャイルドテーマを作成する必要があります。（テーマを直接改変すると、アップデートの時に、全部削除されるので、、、）

一番簡単と思われるカスタマイズ方法は、「この投稿のカスタムCSS」にスタイルを追加して、スタイルを上書きしてしまう方法です。
例えば、段落の文字間や、行間であれば

.writing-mode-mix article p[class|="d"] {
    padding: 16px 8px;
    display: inline-block;
    vertical-align: middle;
    text-justify: inter-ideograph;
    text-align-last: left;
    direction: ltr;
    float: right;
    letter-spacing: .15em;/* この値を調整して、文字間調整できます */
    line-height: 1.8;/* この値を変更して行間調整できます */
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 400px;
}

以下のように、何らかのクラスを追加した場合は、

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

以下のようにスタイルを指定してください。

.writing-mode-mix.kanbun  article p[class|="d"] {
   ...
}

この投稿のカスタムCSSは、!important　などを使わなくても、詳細度を高く自動調整するので、詳細度の問題は出にくいです。
（問題が出るようなら、書き込んでください）

ios ではうまく表示できるけど、windowsは、だめといった場合には、body要素にあるブラウザクラスを使って対応してみてください。
詳細は
https://github.com/tenman/raindrops/blob/master/raindrops-helper.js#L227-L283

追加が必要でしたら、リクエストしてください。

bodyにあるクラスを併用する場合、「この投稿のカスタムCSS」では、writing-mode-mixより上位のクラスは、指定できません（スタイルが適用できなくなります）

@raindrops .writing-mode-mix.kanbun  article p[class|="d"] {
   ...
}

セレクタの前方に@raindropsというキーワードを追加すると、詳細度の自動調整は働かなくなり、指定した通りの詳細度でスタイルを指定することができます。

なんだか、面倒くさい説明になってごめんなさい。ご理解いただけるか心配ですが、、、

追伸

縦書きのスタイルは、ほとんどテーマのスタイルに原因があります。（p要素が適切に配置されないといった問題を除いて）、本体は、rubyなどをサポートしていないですし、縦書きももちろんサポートしていないので、、

［１］WordPress本体のＣＳＳファイル
［２］raindropsテーマのＣＳＳファイル
［３］記事上で追加するＣＳＳの記述

は、WordPress本体のCSSを上書きしています。記事上で追加するCSSは、通常、最も詳細度が高いです。

ありがとうございます。

追伸でいただいた分からすると、WordPress本体にない
定義”writing-mode-mix”内のテキストについて、
jsが縦書き横書きを識別し、phpが縦書きの書式を実現するということですね（逆だったらすみません）。
まずは実用重視なので、縦方向の文字詰めをやってみたいと思います。

ひとまず、縦書きの仕組みについてはどこを参照すべきで、
（jsの行数指定ありがとうございました。
　先ほどまで中身を読んでいたのですが、探しあぐねて寝落ちしていました）
そのうえでどこに記述すればより確実かが分かりましたので、
まず自分で”writing-mode-mix”下部のスタイルの追加をやってみたいと思います。

（いずれはePub内部のCSSと同じことをスムーズに表示できるように、
raindropsテーマのスタイル自体まで精査できるようになりたいです。
縦書き自体は受験生には地味に好評です。私の方で掲載した解説文が、
実際の教材?問題文と違和感なく読めるのは、じっさい効果絶大だと思います。）

ありがとうございます。

１．記事ごとのCSSの追加の項目で字間の調整を試みました。

.writing-mode-mix .entry-content .d-tate{
font-size:16.2px;
letter-spacing: 0.038em;
/* ☆この値を調整して、文字間調整できます */ line-height: 2.52;
/* ☆この値を変更して行間調整できます */ }

を追加いたしましたところ、確かに字間は詰めることができました。

２．つぎに、「テーマ」の「カスタマイズ」の「追加CSS」に同じものを追加しました。
フォントサイズは追従して変化設定できましたが、letter-spacingの設定には追従してくれませんでした。

この辺のGUI部分の仕様（分かりにくさなのだか不具合なのだかいまだ掴めずにいますが）に混乱して、
私は字間の設定は全くできないものかのように誤認していたようです。

当座は「個々の記事にCSSを追加」でしのごうと思いますが、トップページの字間はいまだ調整できていません。とくに致命的な不具合でもありませんので、また余裕のあるときに２、３ヶ月ぐらいかけて調査していきたいと思います。

ひとまずのところはありがとうございました。特に漢文の表示問題については難所を乗り切ることができ、古典の授業と自宅学習のために新たなウェブの使い道が開けてきたように思います。

お手数おかけしますが、またご報告させてください。

• This reply was modified 5 years, 3 months ago by ataketomi.