JSPで行こう！

レスポンシブな文章 改行と段落

TinyMCE の編集機能で、ちょっと気になる点があります。

スマホで見ると間が空いて見える

私は良く文章に「改行」を入れる性質です。
ＰＣで見るとそれで良いのですが、スマホで見ると文の途中で自動で折り返され、
さらに「改行」が入るので必要以上に間が空いてしまいます。
良く新聞等のサイトの記事をスマホで見ると、あまり「改行」を入れず文章を続けてることが多いようです。

そもそも「段落」が「改行」？

そもそも TinyMCE で挿入される＜p＞タグは本来「改行」ではなく「段落」ですから意味が違っています。
思うのですが、欧米のような文化では見易さの為に、わざわざ文章の途中で「改行」を入れるようなことは少ない
のではないでしょうか。
そこで、「Enter」キーであえて<p> タグを挿入しているように思えます。

画面サイズによって「改行」を無視する

「改行」(＜br/＞)での行間隔をネットで検索すると、いくつか解決方法が見つかります。
それらを見ると、少なくとも＜br/＞タグはスマホでは無視したほうが良さそうです。
サイズによって CSS を切り替えるのは、CSS3のメディアクエリで簡単に行えます。
メディアクエリは、MUI でも使われており、以下の CSS を加えます。

@media (max-width: 768px) {
  p > br {
    display:none;
  }
}

影響範囲を限定するように、＜p＞タグ直下だけにしています。
CSS だけで出来るのは便利です。

ちゃんと「段落」として扱うと「改行」が狭まる

これはこれで良いのですが、「改行」の使い方を変えると、必然的に編集窓内はともかくプレビューで見た場合も
段落内の行間が狭まって、見難くなってしまいます。
そこで、表示時には行間を css の line-height を使って空けます。
また、それだけでは＜p＞タグのマージンも残っているので、＜p＞タグの行間は前より広くなってしまいます。
結局、

p {
  line-height: 2em;
  margin : 0 0 0 0;
}

とすると、同じ行間になります。
line-height と margin の値を調整すれば、改行と段落とで、行間隔を少し変える事もできます。
このあたりは、css のマージンの考え方をちゃんと理解出来ていないと戸惑います。
MUI も影響していますので、Chrome の開発ツール等で直接、どの css の指定が
効いているのか確認するのが確実です。

この修正で、スマホでもさほど間が空かなくなりました。

画面大 画面小

[Enter]キーの動作を変更

ついでに、TinyMCE の[Enter]の挙動も変えておきましょう。
現在 [Enter] で<p></p>タグ、[Shift]+[Enter]で<br />タグですが、これを逆にします。
公式には forced_root_block を参照してください。

tinymce.init({
      ：
  forced_root_block : false, //!important
});

を追加するだけです。
デフォルトが "p" ですので、もともとは[Enter]で＜p＞タグが入る仕様では無かったようです。

あと、時々<p>タグが挿入されない場合があります。
大抵の場合何らかの理由(他からコピーしてペーストする場合が多い)で<div>タグが上位に挿入されてしまった場合です。
面倒ですが、「ソース」を開いて上位の<div>タグを<p>タグに置き換えてください。

« 前頁 次頁 »