邊框文字的解法 - element() vs. 新函數 text-image() vs. 新屬性 border-character ？

抱歉，再來一個 CSS 的討論。

上周 OSDC.tw 聽 ericsk 跟隔天我們的 Swick 先生在 W3C 深圳演講的時候，其
實我都沒在專心聽，都在研究這個問題。

問題是這樣的，有些人，比如說 CSS 工作組重點人物 fantasai 大小姐，習慣在
用純文字郵件描述 CSS 規範更動提案的時候，一段文字的左邊用不同的邊框文字
修飾，來代表哪些是改變前的規範文字，哪些是後來的規範文字。舉個例子：

# HTML5 中文興趣小組為主席為呂康豪，W3C
# 連絡人為謝子斌，IRC頻道為W3C IRC伺服器
# 的html5-ko。

v.s

| HTML5 中文興趣小組為主席為謝子斌，W3C
| 連絡人為呂康豪，IRC頻道為W3C IRC伺服器
| 的html5-jp。

另外可以想像很多種利用，比如說可以拿台灣網民很喜歡用的「冏」當作邊框或是
拿一些顏文字當作 border-image 來用。撇開 'white-space: pre' 這種不能換行
的解法不談，這種情況用現在規範上有的技術要怎麼解呢？或是需要新的 CSS 屬
性呢？

在研究了一段時間之後，發現到雖然非常的醜，但是現在的規範上是有解法的！

總之答案就是 border-image[1] + element()

border-image 聽過的人比較多先不提，而 element() 是 CSS3 圖像模組（就是定
義漸層的那個模組）上面有定義[2]的一項結果是圖片函數，大意是「把 HTML 裡
現在有某 id 的元素的顯示狀況當作是一個圖片」。這項功能的應用包含拿一個
canvas 當圖片當非常動態的背景等等[3]，基本上包含了 -webkit-box-reflect
所有可以做的事情但是強大很多！所以邊框文字的實作方法如下，以「冏」邊框為
例子：

[1] https://developer.mozilla.org/zh_tw/CSS/-moz-border-image 中文試翻 :p
     https://developer.mozilla.org/en/CSS/border-image 英文原文
[2] http://dev.w3.org/csswg/css3-images/#element-reference
[3] http://hacks.mozilla.org/2010/08/mozelement/

=== 實作開始 ===
需要有以下的 HTML 在網頁的某處（我知道這很不自然、、）：

<div style="height: 0; overflow: hidden;">
<table id="冏邊框九宮格">
<tr><td>冏</td><td>冏</td><td> 冏</td></tr>
<tr><td>冏</td><td></td>   <td>冏</td></tr>
<tr><td>冏</td><td>冏</td><td> 冏</td></tr>
</table>
</div>

及 CSS：

table { text-align: center; }

/* 需要用冏邊框的元素 */
p { border-image: element(#冏邊框九宮格) 33.3%; }
=== 實作結果 ===

（澄清一下，以上不會成功，因為就算火狐支援 -moz-element 但是還不能用在
border-image 上 :( 不過這是瀏覽器不支援的問題，規範是說所有圖片函數，包
括漸層，都可以用在 border-image 的）

假如說要調整文字出現在哪邊，就調整該九宮格就好了。需要那個九宮格的主要原
因在於 border-image *目前不支援* 把一個圖片當作所有邊框圖片的這個很基本
的要求。這其實蠻奇怪的，而且 CSS Reset 發明人的 Eric Meyer 也有在
www-style 上抗議過[4]，不過 CSS3 邊框與背景模組已經凍結了，所以恐怕要等
CSS4 了 :p

整理一下，目前 border-image 不能應付的狀況有：
1. 不能用一個圖片的重複使用當成邊框圖片，因為那個圖片一定會被切成9份。
2. 不能比如說在左邊右邊又 A 圖，上邊下邊用 B 圖這樣。只能用一張圖。

有沒有人想提提看 border-image 的語法要怎麼擴展到這些情況？

[4] http://lists.w3.org/Archives/Public/www-style/2011Jan/0512

不過上述對邊框文字的解法太冗長了，加上在原來的 HTML 文件裡擺怪東西真的很
不好。所以有兩個新點子：

1. text-image()

總之就是把一個文字轉成圖片的函數，比如說 'background: text-image("歡迎光
臨")' 之類的。不過這還需要依賴上面的兩個問題的解決才能用在邊筐上。這好像
會變成除了 canvas 以外，讓人不能選取文字的另外一個解法.... 不知道會不會
因為這點受到很大的反對。

2. border-character

總之就是為了這個案例的新屬性，border-character-left、border-chracter-top
等等。我是覺得為了狹隘的案例有一個新屬性蠻怪的。

大家覺得呢？


此致
Kenny, 中文興趣小組W3C連絡人
推特: http://twitter.com/kanghaolu
噗浪: http://www.plurk.com/kennyluck
新浪微博: http://t.sina.com.cn/1950042164 （還不是很有東西）

Received on Tuesday, 5 April 2011 11:36:56 UTC