特立獨行的 pre cols

之前在 Thunderbird 裝了 Stationery，
從它的的原始碼標籤頁可以看出，
Thunderbird 11 簽名檔預設使用：
[xml]<br><pre class="moz-signature" cols="72">--
簽名檔</pre>[/xml]

讓我注意到這個 cols 屬性，
在 Mozilla 體系它會有寬度字元的限制，
才正在想該如何解決 Signature Switch 的不同語法問題，
卻發現這個 cols 屬性用在 pre 標籤的方式，
在五大瀏覽器只有 Firefox 支援...

W3C 定義 HTML 4.01 pre 標籤 並沒有 cols 這個屬性，
用 Google 搜尋 W3Schools 也可以發現 cols 只能用在 textarea 和 frameset 標籤而已，
而 pre 的核心(標準)屬性和可選屬性也沒有寫到 cols。

W3C 在 HTML 4.01 pre 上還定義了一個 width，
在 Firefox 上等同於 cols，這樣 Firefox 做啥搞 2 個呢-..-
這樣是標準嗎？！按此篇說法：

https://bugzilla.mozilla.org/show_bug.cgi?id=714242
看來可能是為了維持與 Netscape 4 的相容性，
有人覺得應該移除，patch 也準備好了，只是好像沒人理...

而 pre 上的 width，在 DTD XHTML 1.0 Strict 裡，
也是被棄用的(Deprecated 聲明不贊成)！
請採用樣式表作為替代。
而且也是只有 Firefox 支援 Orz...
不過在 Dottoro 的支援示例圖卻是錯的...
可能它是指加上 CSS white-space 的前提下，
pre-wrap 的值也是在 CSS 2.1 就定義了！

也不能怪 Firefox，這屬性是 W3C 定義的，
只是此屬性沒有得到廣泛的支援！
支援了反而變成異類... 你看 W3C 多沒威信?!
其他瀏覽器完全不鳥它~

所以 cols 和 width 這樣的用法應避免使用，
達成內容與排版分離的使命，
簡言之就是 HTML 和 CSS 分家 :)

正確做法是應該用 CSS 的 white-space 來斷行，
CSS white-space property - W3Schools
white-space property CSS - Dottoro Web Reference
主要是定義寬度，然後行打破(line break)：
[css]pre {
width: 580px;
white-space: pre-wrap; /* CSS 2.1 */
}[/css]

另外如果使用較舊版的瀏覽器，
可能也要額外 Hack 加上支援的參數才行...
white-space - MDN(Mozilla Developer Network)
像是 IE6, IE7 提供了自己的 word-wrap 屬性-..-
Firefox 2.0 以前的 -moz-pre-wrap 值-..-
[css]pre {
word-wrap: break-word; /* IE 5.5~7 */
white-space: -moz-pre-wrap; /* Firefox 1.0~2.0 */
}[/css]
但這些東西是不符合 W3C CSS level 3 Validator 的...

所以結論就是 pre 標籤難搞 :)
沒事最好不要亂用，
不然要有心理準備了！
最好在全寬的版面上使用，
不然內容最好自己要斷行...
後來想到在其外套上 overflow 的自動捲軸是個好辦法 :D
所以內文的 div 框最好加上此屬性才不會破版。

最後測試看看，如果你的瀏覽器破版不要怪我阿！
Code:
[xml]<div style="width:580px;color:#808080;overflow:auto">
<pre cols="72">
老子不爽換行啦！*25</pre>
<pre width="72">
老子不爽換行啦！*25</pre>
<pre style="width:580px;white-space:pre-wrap;word-wrap:break-word">
老子不爽換行啦！*25</pre>
</div>[/xml]

老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！

老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！

老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！老子不爽換行啦！