半角文字を長く書く
あああああああああああああああああああああああああ
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
こんなふうに、文字を打ち込んでデザインを確認したことがあると思います。
その時に、後者だと上手く動かないパターンがあります。このように。
日本語は改行しているのに、英語は改行しない。なぜでしょうか。
正確な答えではないですが、考察してみましょう。
英語と日本語の特性を考える
『あ』
これは皆さんなんと発音するでしょう。
発音できますね。
『y』
これは皆さんなんと発音するでしょう。
あ、『わい』ではありませんよ。
英単語の文字の一部と捉えて、どう発音しますか？
『yellow』『sky』『beauty』
全て発音違いますね。
このように、英語は『一文字では完結しない』ものです。
日本語は意味はさておき、文字としては完結します。
supercalifragilisticexpialidocious
supercalifragilisticexpialidocious という曲、もとい単語があります。
これは
super cali frag ilisti cexp ialid ocious
でしょうか。違いますね。
英単語において、改行やスペースは非常に重要な意味を持ちます。
改行がなければ、それで『1単語』として捉えます。
英単語から考える、日本語を途中で改行するということ
apple は、これで初めて発音が出来ます。 ap ple と見ると発音が出来ません。
日本語は、『あ』で発音が出来ます。
この『あ』という文字を真ん中でぶった切られたら？読めないですね。
英単語を途中で改行するというのは、こういう気持ちなのかもしれません。
これから考察するブラウザの挙動
ああああああsupercalifragilisticexpialidocious
このとき、英単語の途中で文字を改行したいとき、あなたならどうしますか？
ああああああsuper califragilisticexpialidocious
ああああああすーぱー・・・なんだこれ？
こうならないために、こうします。
ああああああ supercalifragilisticexpialidocious
まだはみ出るとき・・・ここで改行すると意味がない。なので、諦めてはみ出す。
ブラウザはこんなことを考えてるのかもしれません。
おまけ: 日本語だって区切りがあるよ！
さて、日本語は単語区切りというものがないです。
なので、『焼肉定食』という文字が途中で枠に収まらなくてもぶった切って改行します。
これを単語で区切りたい。
このように。
でも、スペースという区切り方が日本語にはないので、どうするか。
タグでくくってあげましょう。
<div class="box2">ああああああああああああああああ<span class="aaa">焼肉定食</span></div>
これで、焼肉定食という単語の区切りがあることが明示出来ました。
そして、改行に対応するには以下の内容を加えます。
.aaa {
display: inline-block;
}
単語区切りにしたいものを、インラインブロック要素にしましょう。
これで、日本語にも単語の区切りが生まれました。
こんなふうに、
HTMLの気持ちになると、いろんな要件に対して、どのように対応するかが思いつきやすいかもしれないですφ(･･
