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

針對 border-character，border 上面可能不只�@個字，我有看過寫 WARNING 那種。或許可以有
border-text 或是 border-content 這種不限�@個字的含意。

（謝謝 Kenny 兄告知我沒有發到群組上，真是抱歉...）

在 2011年4月5日下午7:39，Kang-Hao (Kenny) Lu <kennyluck@w3.org> 寫道：
> 抱歉，再來�@個 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 （還不是很有東西）
>
>
>
>



-- 
Medical-Wei/魏藥

----
Please avoid sending me Word or PowerPoint attachments.
See: http://www.gnu.org/philosophy/no-word-attachments.html
請儘可能不要寄給我 Microsoft Word 或是 PowerPoint 的附件，我會打不開。
參照：http://blog.ofset.org/ckhung/index.php?post/081-nodocx

Received on Thursday, 7 April 2011 01:28:21 UTC