iPod touch の歌詞表示を左寄せにする(再々)

iOS CSS

iPod touch の歌詞表示を左寄せにする(再) - koba::blogを書いた後、しばらく他の方法がないかいじっていたのですが、より簡単な方法がありました。

<style>
div {text-align:left;font-size:16px;line-height:1.4em;white-space:pre;}
</style>
<div><!-- ここに歌詞を入れる --></div>

これでOKです。

white-space:pre; がミソ。これで改行のたびにbr要素を入れる必要がなくなりました。

iOS6での歌詞表示は、

  • いくつかのHTML要素(pとかdivとか)で囲むと、歌詞をHTMLとして解釈する。
  • 閉じタグは省略できない。
  • style属性は解釈されないので、style要素として指定する必要がある。

ということみたいです。

これなら変換スクリプトはいらないですね。