TopHTML(X)HTML > 2012年7月
2012年7月26日

「 」の3つの機能

July 26,2012 12:55 AM
Tag:[]
Permalink

「 」の機能について色々と調べてみました。

本エントリーではHTML仕様を確認しつつ、3つの機能について挙げています。

1.半角スペースの文字実体参照

ご存知の方も多いと思いますが、「 」の機能は、半角スペースの文字実体参照です。

つまり、HTMLドキュメントに「 」と記述することで、半角スペースとして表示されます。

サンプル1

ちなみにWikipediaによると、「nbsp」の部分は「ノーブレークスペース」といい、「no-break space」または「non-breaking space」の略のようです。この意味については3項で説明します。

文字実体参照が分からない方は、以下の記事を参照してください。

文字実体参照について

2.連続した半角スペースの表現

pre要素以外の部分で、コンテンツに通常の半角スペースを並べると、表示される半角スペースは1文字分に集約されるようになっています。

が、pre要素以外の部分で半角スペースを2つ以上並べるには、半角スペースの代わりに「 」を記述することで実現できます。

サンプル2

連続した半角スペースを1文字にまとめてしまうことについては、HTML4.01仕様に記載されています。

9.1 White space(空白)

Note that a sequence of white spaces between words in the source document may result in an entirely different rendered inter-word spacing (except in the case of the PRE element). In particular, user agents should collapse input white space sequences when producing output inter-word space.(ここで、ソース文書中で語間に空白類が複数連なっている場合、PRE要素を除いて、レンダリング結果の語間スペース調整は全く異なるものになるという点に注意されたい。 特にユーザエージェントは、語間スペースの出力処理に際しては、連続する空白類の入力があった場合は1つにまとめてしまう必要がある。)

3.改行(折り返し)抑止

 のもうひとつの大事な機能として、「ノーブレークスペース」という名のとおり、改行(折り返し)抑止があります。

ブラウザでは、英語表記の場合、半角スペースで行を折り返す仕様になっています。

例えば、2項で引用したHMTL仕様の原文(下)では、必ず半角スペースの部分で改行しています。

Note that a sequence of white spaces between words in the source document may result in an entirely different rendered inter-word spacing (except in the case of the PRE element). In particular, user agents should collapse input white space sequences when producing output inter-word space.

ただし、折り返してほしくない半角スペース部分に「 」を記述することで、ブラウザでは折り返しを抑止するようになっています。

サンプル3

この動作は、HTML4.01仕様の9.3.2に規定されています。

9.3.2 Controlling line breaks(行区切り類の制御)

Prohibiting a line break(行区切りの禁止)
Sometimes authors may want to prevent a line break from occurring between two words. The   entity (  or  ) acts as a space where user agents should not cause a line break.(著者は、2つの語の間で行区切りが生じるのを回避したいと考えることもあるだろう。   実体 (  あるいは  ) は、ユーザエージェントが行区切りを発生させないスペースとして機能する。)

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3