読者です 読者をやめる 読者になる 読者になる

html構文での改行制御

html

そこまで掘り下げられなかった内容です。

 

htmlでは、ソースでいくら改行しても、ブラウザで開いてみれば、せいぜいが半角スペース1つ分だけ横方向に空間ができる程度です。

単純にタグを使うとしたら、以下のタグで明示的に改行させることになるかと思います。

  • <p></p>タグ
  • <br />タグ

<p>タグは段落を指すタグ、<br />タグは改行を指すタグとなっています。

htmlはCSSJavaScriptの発達で美麗な装飾を施せるようになってきていますが、基本は文書です。

論文や小説などでは改行はそのまま段落を指すと思いますので、<p>タグが相応しいかもしれません。それ以外なら<br />でよいでしょう。

 

また、<table>や<div>などの「ブロックレベル要素」となるタグでも暗黙的に改行が発生します。

ブロックレベル要素と、その対となるインライン要素については以下のサイトが参考になります。

ブロックレベル要素とインライン要素 - Web標準普及プロジェクト

自分の言葉で簡単に説明してみると、以下のような認識です。

ブロックレベル要素

その名の示す通り、箱のようなオブジェクトで、幅や高さなどの属性を持っています。

<table>タグの子に当たる<tr>や<td>などは、やや特殊な扱いですが、基本的には横に並びません。そのため、暗黙的に改行が発生します。

インライン要素

文中の装飾に特化したオブジェクトで、幅や高さといった属性を持ちません。

文字の色や大きさを変えたり、ハイパーリンクを付与したりといった限定的な装飾のみとなり、基本的には他の要素が絡まない限りは横方向に連綿と続きます。

 

 

ここから少し特殊な方法となります。

まずは、幅を指定したブロック要素内での自然改行です。

分かりやすくborderを付けた<div>タグを用意します。中に10文字程度のテキストを記述しています。

あいうえおかきくけこ

幅を指定しない場合は、上位のタグの幅いっぱいに広がっていると思います。

今度は幅(width)を指定します。とりあえず7文字分の"7em"を指定しました。

あいうえおかきくけこ

これで、よほど偏屈な解釈を行うブラウザでなければ、"き"と"く"の間に改行が発生しているはずです。

…ただし、英単語(と見なされる連続したアルファベット)では、この自動改行が発生しません。

abcdefghij

おそらく、"g"までは枠内に入っていますが、"h"以降は改行されずに飛び出しているかと思います。

これはたぶん文法的な仕様だと思いますが、ブラウザによってはword-wrapというCSSプロパティで改行させることができます。

abcdefghij

word-wrap−スタイルシートリファレンス

元はIE独自のプロパティですが、最近のFirefoxGoogle Chromeなら適用してくれてそうな予感がします。

類似のプロパティとしてword-breakというものもあります。英単語に限らず、改行の振舞いを指定できます。

word-break−スタイルシートリファレンス

 

この自動改行ですが、いろいろと例外もあります。

その1つに「禁則処理」と呼ばれるものがあり、例えば閉じ括弧が先頭にくることは禁止されていますし、同様に開き括弧が行末にくることも禁止されています。

この辺りはwikipediaに掲載されていますね。[禁則処理 - Wikipedia]

あいうえおか(きくけこ
あいうえおかき)くけこ

上記のように、行末に"("がくるパターンや、行頭に")"がくるパターンでは、直前や直後の文字をセットで改行します。

 

 

今回は、この自動改行をどうにかして回避しようと悪戦苦闘してみた次第です。

結論としては無理でした。_(:3 」∠)_