無料ブログ「rentafree.net」の管理人ブログ

改行の仕様を変更しましたが・・・

改行の仕様を変更しましたが、
通常改行が<p>となるブラウザが多かったため、
公式サイトと標準テンプレートで、
<p>のmarginを0pxにしていましたが、
ページ全体にCSSを適用してしまうのはあまりよくないと思いますし、
IE9の改行が<br>になりましたので、
そのうち公式サイトと標準テンプレートのCSSを変更すると思います。

まあ、IE8は結構シェアがあるので、
早くてもVistaがサポート切れてからかな・・・

ブログエディターを修正しました

ブログエディターでの改行の際に、
今まではブラウザの仕様により、

Firefox = テキスト<br>
IE = <p>テキスト</p>
Opera = <p>テキスト</p>
Chrome = <div>テキスト</div>
Safari = <div>テキスト</div>

となっていましたが、
IE9、Opera、Chrome、Safari
でも、
テキスト<br>[改行]
となるようにしました。

また、今までは、
<br>→<br />[改行]
変換を行い、
同時に<b><i><s><u>が連続して複数続く場合一つに統合させていましたが、
HTMLコードの変換は行わないほうがいい場合があると思いますので、
変換機能は削除しました。
ただし、ブラウザ機能により変換が行われる可能性があります。

さらに、今までは、
リスト(<li>)中で改行した場合、ブラウザ依存ですが、
普通は<li></li>が1行増えるような動作をしますが、
リスト中だけ動作を分けるのは面倒なのと、
リスト中で改行できないのは不便な場合もあるとと思いましたので、
リスト中も<br>改行にし、
右クリックから手前に<li>&nbsp;</li>を追加する機能をつけました。


Firefox以外はまだ若干Firefoxと挙動の違う箇所があります。

ChromeとSafari
領域下端で改行された際に自動スクロールすべきですが、
<br>の座標が取得できないぽいため、スクロールしません。
ただし、キャレット自体は移動しますので、そのまま文字入力をすれば最適位置へスクロールします。

また、要素内の末尾に何かしらの要素(テキスト含む)を入れた場合、
未選択状態のように見えても末尾の<br>が選択に含まれているようで、
末尾の<br>が消えます。
(この挙動は、必ずしもマイナスではないと思う。これは今回の修正とはあまり関係ありません。)

今までは対応ブラウザでしたが、
推薦ブラウザとほぼ同じになったと思いますので推薦ブラウザに格上げします。(推薦ではなく準推薦としました。)


IE8以下
改行仕様の変更はありません。
今までどおり非推薦の対応ブラウザとします。

IE9
改行仕様はFirefoxと同じになりましたが、
画像挿入からの画像アップロード機能が利用できないため、
対応ブラウザのままにしておきます。
エディタに関しては、かなり推薦ブラウザに近い挙動をします。

Opera
今回の仕様変更により、 改行時にキャレットが外れてしまうようになりました。 Operaに関しては今回の変更で悪化します。

キャレットが消えちゃうのはさすがにキツイので、
Opera判別によりOperaの改行はブラウザに任せることにしました。
<p>テキスト</p>
となります。
Shift+Enterだとブラウザ標準で<br>になります。



*追加修正
Opera判別処理と、
IEは、<li>内の末尾が<br>だと2行になってしまうようなので、
<UL>又は<OL>ボタンでリストを生成する際の仕様を変更し、
<li>内の<br>は分割のみで<br>は削除するようにしました。