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

請看下面

(11/04/06 11:16), 魏藥/Medical-Wei wrote:
> 針對 border-character，border 上面可能不只一個字，我有看過寫 WARNING 那種。

你有沒有圖片？或是簡單用文字畫一下（或是描述一下）。特別是以下幾點的問題：
1. "WARNING" 的方向，是在右邊就是順時針90度，下邊倒過來這樣嗎？
2. 會不會有出現在角落的情形？那時候字的轉折是怎麼處理的？還是刻意避開了？

> 或許可以有
> border-text 或是 border-content 這種不限一個字的含意。

我覺得 border-content 是一個很棒的想法耶，畢竟它似乎也可以解決：

>> 整理一下，目前 border-image 不能應付的狀況有：
>> 1. 不能用一個圖片的重複使用當成邊框圖片，因為那個圖片一定會被切成9份。

的這個問題，就跟 content 可以有 'content: url("icon.png"); ' 跟
'content: "Chapter:"; ' 一樣，border-content 似乎也可以有
'border-content: url("smiley_icon.png"); ' 跟 'border-content: "冏"; '。

不曉得你有沒有更詳細的這個屬性的作用的解釋？想像起來，這個屬性可能會有兩
個模式：

== 沿線旋轉模式 ==
基本上就跟 SVG 的 textPath[1] 一樣，不過由於曲線是封閉的，重複模式似乎只
有以下兩種（'repeat' 感覺很醜）。然後這的可以應用在有 'border-radius' 的
邊框上！（不過這種情況有出現在現實生活上過嗎？）

1. round — 就是圖形/文字列跟圖形/文字列之間加一些空白，讓出現的圖形/文字
列是整數個，可能 'border-content' 要加一個屬性是決定圖形/文字列跟圖形/文
字列之間的「最小空白」，這樣可以控制圖形/文字列的數量
2. stretch — ？？ （沒有電腦圖學的知識，有誰知道這一般是怎麼做的嗎？）

我發現這個模式最酷的是，我們似乎可以用一個 CSS parser（比如這個[2] xd）
+ SVG 試做一個原型（'-jquery-border-content'），文字列的情形步驟如下：

1. 計算目標文字列的寬度，用 clientWidth 之類的
2. 計算有 'border-radius' 邊框的長度
3. 計算最小文字列文字列間間隔
4. 用 SVG textPath + word-spacing
5. 貼在目標方塊之下

有沒有 Web Developer 有興趣試試看的？

圖形延線轉這個我不知道 SVG 怎麼解耶。有誰知道嗎？

[1] http://www.w3.org/TR/SVG/text.html#TextPathElement
[2] http://bililite.com/blog/2009/01/16/jquery-css-parser/

== 沿線靜止模式 ==
感覺這種情況在有 'border-radius' 的時候沒有演算法耶。不過一般長方形的
話，大概就長這樣子吧：

TEXT TEXT TEXT TEXT
TEXT                   TEXT
TEXT                   TEXT
TEXT TEXT TEXT TEXT

冏邊框跟一般*大家預期的* 'border-image' 好像都可以這樣解決。

剩下的問題就是這種東西到底有沒有人願意使用的問題 xdd 我沒有設計網頁的經
驗，無法評估。不過這個屬性很適合投稿以下兩個郵件群看看大家反應耶：

* public-fx[3] — CSS 工作組跟 SVG 工作組的合體 Task Force 郵件群（最近郵
件流量不少，因為微軟加入 SVG 工作組只後一直很渴望把 'filter' 變成標準[4]）
* www-style[5] — CSS 工作組郵件群

有沒有誰想要試試看的？

[3] http://lists.w3.org/Archives/Public/public-fx/
[4] http://lists.w3.org/Archives/Public/public-fx/2011JanMar/thread#msg192
[5] http://lists.w3.org/Archives/Public/www-style/

* 註：IE9 的 SVG 支援還不錯，請大家多多宣傳！


此致

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

Received on Thursday, 7 April 2011 09:32:34 UTC