PRE in BLOCKQUOTE TEST

こんな事で悩んでいたのは世界中で私だけかも知れませんが・・・

以前から、ずっと、preタグの挙動がおかしくて悩んでまして。

結局解決できずに、「preタグについてのブラウザごとの挙動が違っている」的な解釈で諦めて。

Pタグにwhite-spaceを使う事でpreタグの代わりにしてきましたが。

ついに原因を突き止めた！！＼(^o^)／

Cocoonの高速化設定をすると、「white-space:pre-wrap;」を指定したPタグの改行がすべて抹殺される事が判明して、高速化を諦めておりましたが。

やはり、もったいない。

Search Regex を使えば、Pタグを全部preに置き換える事は一瞬で可能（PRE代わりに使っていたPタグにはちゃんとクラスを指定していましたので、Pを片端からPREにしてしまう心配はない…閉じるタグにもコメントでpre閉じタグだと分かるようにしてありました。自分、ＧＪ。）

しかし、そうなると、PREの問題を解決しないと、おかしなことに・・・

というか、実際、なってました。。。

⇒ <PRE>要素は危険らしい・・・？ 

で書いている通り、本文に、スクロールバーが生えてくるのですよね・・・(笑)



スクロールバーは、縦だってり横だったり。。。

動かしてみるも、微かな範囲で動くだけ。。。

スマホではスクロールバーは出ませんが、スクロールしようとスワイプしたときに、ページがスクロールせずに記事領域が微妙に動くのが気持ち悪いと思いますｗ

昔より知識も増えたし、一念発起して、再度原因究明に取り組んでみました。

<pre>の中にはブロック要素を入れてはいけないで書いている通り

preとblockquoteの順番で発生するまでは突き止められています。

そこで、タグの順番と、タグのスタイルをいくつか変えながら、どのような条件で発生するのか確かめてみることに。。。

まずは問題の奴(笑)

preの中にblockquote

しかしその常雇いの男とか乙を主義にとかいう、心得の年代に集まっで三本の例へ安否に伴うだろというたくっ。二度もこの丁に一つをむやみに面白い差を信じて、それに熊本送ったて、時間にありばは次第の天下の外国がいくら角度にもっという意見を、あたかもこうした馳を要らのをしまいのです。

blockquoteの中にpre

しかしその常雇いの男とか乙を主義にとかいう、心得の年代に集まっで三本の例へ安否に伴うだろというたくっ。二度もこの丁に一つをむやみに面白い差を信じて、それに熊本送ったて、時間にありばは次第の天下の外国がいくら角度にもっという意見を、あたかもこうした馳を要らのをしまいのです。

blockquoteの中にpre（blockquoteにwhite-space:pre-wrap;を指定）

しかしその常雇いの男とか乙を主義にとかいう、心得の年代に集まっで三本の例へ安否に伴うだろというたくっ。二度もこの丁に一つをむやみに面白い差を信じて、それに熊本送ったて、時間にありばは次第の天下の外国がいくら角度にもっという意見を、あたかもこうした馳を要らのをしまいのです。

divの中にpre（divにwhite-space:pre-wrap;を指定）

しかしその常雇いの男とか乙を主義にとかいう、心得の年代に集まっで三本の例へ安否に伴うだろというたくっ。二度もこの丁に一つをむやみに面白い差を信じて、それに熊本送ったて、時間にありばは次第の天下の外国がいくら角度にもっという意見を、あたかもこうした馳を要らのをしまいのです。

preの中にdiv（divにwhite-space:pre-wrap;を指定）

しかしその常雇いの男とか乙を主義にとかいう、心得の年代に集まっで三本の例へ安否に伴うだろというたくっ。二度もこの丁に一つをむやみに面白い差を信じて、それに熊本送ったて、時間にありばは次第の天下の外国がいくら角度にもっという意見を、あたかもこうした馳を要らのをしまいのです。

preの中にdiv（divにwhite-space:pre-wrap;と等幅フォントを指定）

しかしその常雇いの男とか乙を主義にとかいう、心得の年代に集まっで三本の例へ安否に伴うだろというたくっ。二度もこの丁に一つをむやみに面白い差を信じて、それに熊本送ったて、時間にありばは次第の天下の外国がいくら角度にもっという意見を、あたかもこうした馳を要らのをしまいのです。

preの中にpre

しかしその常雇いの男とか乙を主義にとかいう、心得の年代に集まっで三本の例へ安否に伴うだろというたくっ。二度もこの丁に一つをむやみに面白い差を信じて、それに熊本送ったて、時間にありばは次第の天下の外国がいくら角度にもっという意見を、あたかもこうした馳を要らのをしまいのです。

最初の奴以外、ここまで異常が出る組み合わせはありませんでしたが、ついに！

Cocoonの高速化設定では、どうやらpreタグとcodeタグは改行を削除しない設定のようなのでcodeタグで試してみたところ、（スクロールバーが）出た！！

codeの中にblockquote

※codeタグのスタイルは初期は何もなしがデフォルトな気がしますが、コード・ソースを書く用に独自にスタイル指定して使っています。

では、pre、blockquote以外のタグではどうか？ということで

divの中にblockquote(divにwhite-space:pre-wrap;を指定）

divの中にblockquote(上記と同じ、等幅フォントで）

blockquote in blockquote

しかしその常雇いの男とか乙を主義にとかいう、心得の年代に集まっで三本の例へ安否に伴うだろというたくっ。二度もこの丁に一つをむやみに面白い差を信じて、それに熊本送ったて、時間にありばは次第の天下の外国がいくら角度にもっという意見を、あたかもこうした馳を要らのをしまいのです。

なんと、再現しない！！！！

ということは、ブログテーマで指定しているスタイルが邪魔をしている？！

以前、FC2ブログでも同じ問題が発生していたので、デフォルトでそういう挙動なのかと勘違いしていたのが敗因ですね・・・orz

というわけで、CocoonのCSSソースを開いてblockquoteとpreのスタイル設定だけ抜き出して、何が問題なのか考えてみました。

考えても分からないので、困った時のいつもの力技！

一行ずつコメントアウトしながら確認してみると・・・

ついに、再現する条件を見つけ出しました！＼(^o^)／

条件を当てはめれば、divタグ同士でも発生を確認！

divの中にdiv

結論

preのoverflowにauto（またはscroll）が設定されているとスクロールバーが出る（visibleまたはhiddenなら出ない）

blockquoteの引用符の設定で、position: absolute;が指定されていると出る

また、

外側の要素に十分なpaddingが指定されている
内側の要素に十分なmarginが指定されている

と出ないようです。

要するに、挿入された引用符が、領域を微妙にはみ出ているから起きてる、ような気がする・・・

なんでもかんでも、とりあえずリセットだ！とmarginとpaddingを0にしてしまわず(笑)

引用符のサイズ分だけの十分なマージンをとっておけ、と。。。

引用符の位置を調整すれば良いのかも知れませんが、逆に引用符をもっと外側に移動させたいとかだとさらに問題は悪化？する可能性があるってことですかね。

はみ出た部分を表示するか表示しないか（visibleかhidden）にしてしまえば出ない、スクロールバーを出す設定にしてれば出るのは、考えてみたら当たり前のことですね。

解決法

・blockquoteに引用符を表示させない
・preのoverflowをvisibleに

preとblockquoteの意味を考えると、どっちも現実的じゃないなぁ・・・(^^;)

というか、preとblockquoteの問題じゃなくて、どんなタグであっても、

外の領域：overflow:auto;
中の領域：::bofore／::after要素が指定されていてpositionがabsoluteになっている

の組み合わせで発生する問題なので、タグの意味合いは関係ないか。

引用符が設定されているのは、現状ではblockquoteだけなのだから、blockquoteの外側にoverflow:auto;を使うなという点だけ注意していれば良いわけですね。

まぁ、よくよく考えてみたら、現状の使い方において、preとblockquoteを一緒に使うケースはないのですが。

blockquoteで整形済みテキストが使いたいときは、preタグを使わず、white-space:pre-wrap;を指定してしまえば済む話ですから。

このブログでは、頑なにpreを使わないで来ましたから(笑)(笑)(笑)

ただ、今後、Cocoonの高速化機能を使うなら、整形済みテキストにはpre（またはcode）を使うしかないわけで。

まぁ、blockquoteの外にpreを置かないよう気をつければ良いだけではあるのですが。。。

でも、考えてみたら、現状のcssでは、blockquoteの引用符の表示が、そもそも無理やり感があるわけで。

の規定に「引用符を必ず表示させなければならない」とは書いてない（今の所見つけられていません）ので、そもそも引用符を表示する機能自体が実装されていないわけですから、無理に使わなくても良いのかなぁ、とも思います。

いっそ、引用符を表示させない、という選択もある・・・

しかし、やはり、見た目、引用であることが分かりやすいので、引用符は表示されていたほうがよいよなぁ・・・

position:absoluteを使わなければ問題は起きないようです、試してみたところ・・・けれど、引用符の位置が文章の前後に来てしまい、領域の前後にはならないので、やっぱりちょっと格好悪い・・・

うーん。。。

最終結論

preのoverflowをvisibleに。

よくよく考えてみたら、preになぜoverflow:auto;を設定する必要があったのか？

実はpreの初期値にはoverflowの指定はされていない模様（Chrome基準）

preにないとすると、overflowは初期値になっているはず

overflowの初期値はvisible

それをテーマのCSSであえてautoに指定しているのあ、ソースコードを表示する目的でpreが使われているから。

しかし、自分の場合、preの値は「white-space:pre-wrap;」がデフォールトなので。

preの挙動が理解できてなかったので、Pタグに「white-space:pre-wrap;」を指定して使っていたので。

pre-wrapなら、はみ出た部分は折り返されるから、スクロールバー要らないので。

折り返さない設定が必要な時が、自分の使い方では極めてレアなのだから、必要な時にスクロールを指定してやればよいので、基本はスクロールバーは出さない設定で良かったのでした。。。

解決

やっと解決。(^^;)

何年越しだ(笑)

この問題を記事に書いたのは2018年前半ですが、それよりも前、実はFC2ブログの頃から悩んでいたので、数年間解決できなかったんですねぇ

別に大した問題ではないでしょうが、理由が分からないと気持ち悪いので(笑)

解決して良かった、祝杯をあげよう(笑)(笑)(笑)