人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

エキサイト編集枠のペースト時の挙動の謎 / Chrome と Edge

2016年 06月 22日
Chromeでアクセスしたエキサイトの編集枠のペースト時の挙動について、前回と同様の方法で調べて見ました。

ペーストするテキストは以下のものです。
 エキサイト編集枠のペースト時の挙動の謎 / Chrome と Edge_b0174191_21485095.png

〔Chromeの場合〕以下は、Chromeでアクセスしたエキサイトの編集枠に、上のテキストをペーストした様子です。

●「通常編集」にペーストする場合。 これは、自動改行のON/OFFは関係ありません。

①「通常編集」にペーストした直後は、空白行もインデントも表現され元のままです。
 エキサイト編集枠のペースト時の挙動の謎 / Chrome と Edge_b0174191_00590088.png
➁「HTML編集」を開いて見ます。 下の様に各行が分解され「divタグ」でくるんで並べた様です。 IEの時の様な「pタグ」は全く使われず、空白行は「divタグ」で包んだ「brタグ」になってます。「pタグ」より賑やかですが、こちらの方が行の構成が良く判ります。
 エキサイト編集枠のペースト時の挙動の謎 / Chrome と Edge_b0174191_01005037.png
➂再び「通常編集」に戻って見ます。 下の様に、空白行は元のまま表示されますが、インデントは無くなります。 行先頭の半角空白を表示しないのはブラウザのルール通りです。
 エキサイト編集枠のペースト時の挙動の謎 / Chrome と Edge_b0174191_01103867.png
④プレビューして見ると「通常編集」と同じ表示です。 空白行は正しく表示され、インデントはルール通り無視されています。
 エキサイト編集枠のペースト時の挙動の謎 / Chrome と Edge_b0174191_01110232.png
➄下は、インデントを表示させるために「preタグ」と「Meiryo指定」を「HTML編集」で書き込んだ所です。
 エキサイト編集枠のペースト時の挙動の謎 / Chrome と Edge_b0174191_01145830.png

⑥「通常編集」で見ると「preタグ」によりインデントも表示され、元のテキスト通りの表現になっています。
 エキサイト編集枠のペースト時の挙動の謎 / Chrome と Edge_b0174191_01153265.png
➆プレビューも全く同じで、元のテキスト通りに、空白行とインデントが表現されました。
 エキサイト編集枠のペースト時の挙動の謎 / Chrome と Edge_b0174191_01175293.png
IEの場合と異なり、文字列に改行が入るごとに「divタグ」でくくる様です。 その処理は特異に見えますが、こちらの方が扱い易いと思っています。 空白行がしっかり判り、私には文書構成が判断し易いからです。 IEの場合と同じで、ペーストする文の文字列が長いものだと、その間は「div」分けが無くて賑やかさは減ります。 しかし、解釈処理の基準は同じです。 これはペースト時に生じるだけなく、「通常編集」で普通に入力する場合も「div」は良く出て来る様です。

●「HTML編集」にペーストする場合。 ペースト時は必ず「自動改行」をONにしている必要があります。 これを忘れると、実際に空白行が失われます。

⑧ペーストした直後です。 元の行間とインデントはそのままです。
 エキサイト編集枠のペースト時の挙動の謎 / Chrome と Edge_b0174191_01275951.png
➈「通常編集」を開いて見ます。 この瞬間に「自動改行」で「brタグ」が書き込まれ、空白行は維持されますが、インデントが無くなります。 これはブラウザのルール通りです。
 エキサイト編集枠のペースト時の挙動の謎 / Chrome と Edge_b0174191_01282682.png
➉もう一度「HTML編集」に戻ると「brタグ」が書き込まれています。「divタグ」が出ないので、やはりこちらが一番良いHtmlだと思います。
 エキサイト編集枠のペースト時の挙動の謎 / Chrome と Edge_b0174191_01332140.png
⑪プレビューすると、空白行は元のテキスト通りですが、インデントはブラウザのルールに従い無視されています。
 エキサイト編集枠のペースト時の挙動の謎 / Chrome と Edge_b0174191_01373814.png
⑫「HTML編集」で、インデントが表現される「preタグ」と「Meiryo指定」を書き込んだところです。
 エキサイト編集枠のペースト時の挙動の謎 / Chrome と Edge_b0174191_01411986.png
⑬「通常編集」で見てみると、下の様に空白行とインデントが元のテキストの通り表現されています。
 エキサイト編集枠のペースト時の挙動の謎 / Chrome と Edge_b0174191_01424938.png

⑭プレビューでも、空白行とインデントが元の通り表現されています。
 エキサイト編集枠のペースト時の挙動の謎 / Chrome と Edge_b0174191_01443823.png
「HTML編集」にペーストすると「divタグ」が入らないので一番すっきりして良い結果です。 ただ、私は「div包み」に慣れて来た事と、「自動改行OFF」がHTMLを扱い易く、もっぱら「通常編集」にペーストしています。

いずれにせよ、私はChromeで編集する方が扱い易く感じます。 ブラウザによって編集枠が対応を変えるのは興味深い所です。 Edgeで同様のテストを行ったところ、Chromeと全く同じ結果になりました。 EdgeはChromeに近いのでしょうか。


〔纏めとして〕

ブラウザに関係なく、「通常編集」か「HTML編集+自動改行あり」にペーストする限り、ペーストの経過で元テキストの構成が失われ変形された様に見えても、実はその内容は失われていない。 失うとすれば、その後のテキスト部分への誤った加筆によってです。 ペーストした部分をすぐに下手に触らないのがコツ。 半角空白でインデントを表現したテキストは、テキスト部分を「preタグ」で囲む事で、半角空白をブラウザ上に表示させることが可能。

しかし「通常編集」枠上の表示は、ペーストの経過で変形された様に見える場合が多く、それを整形する事を前提にする場合は、一般に「HTML編集+自動改行あり」にペーストするのが無難。 これは「brタグ」解釈が行われ、改行や空白行が一番判り易く表現され、その後の整形がし易いから。

「通常編集」にペーストした場合、IEでは「pタグ」解釈、ChromeやEdgeでは「divタグ」解釈で、Html上に書き込まれる。IEの「pタグ」挿入はテキストのペースト時に限るが、ChromeとEdgeの「divタグ」挿入はあらゆる入力で生じるので、一長一短。

「pタグ」「divタグ」とも、そのタグの範囲内に「通常編集」で後から改行を入れると、再び編集援助機能が働き「タグ終結の補完」が繰り返される。 これは表示上は問題なくても、こちらの意図と異なった文区切りがHtml上で行われる場合が多い。「pタグ」の場合は謎の空白行の元になる事があり、その場合は困ります。

日頃、テキストエディタに入力しているのと同じ様に見えても、ブラウザ経由で表示される編集枠への入力は、かなり異なった環境という事ですね。

  --- 見なければ良いのに覗くハト丸の 昔はものを思わざりけり ---  <* y





by Ataron | 2016-06-22 08:28 | PC環境(ハード/ソフト) | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。