Warning:
This wiki has been archived and is now read-only.
Rendering API
From HTML5 Chinese Interest Group Wiki
這個頁面整理一些渲染相關的 API 需求。相關規範是 CSSOM View Module。
Contents
要求&問題
- Gzhang:需要知道滚动条到底有多宽。(標準討論)元素各種相關尺寸
- Gzhang:一行文字有多高。
- Gzhang:一个有z-index的元素后面到底是什么颜色的……(標準討論)elementsFromPoint
- winter:需要知道偽元素的文字
- winter:selection 可以帶有偽元素
- winter:需要知道伪元素的 innerHTML
- winter:宣要知道偽元素的 offsetHeight
- winter:伪元素点击事件 (相同要求)《提问:可以通过JavaScript给伪元素绑定事件吗? 》
- winter:要有一種可以選生成內容的 selection(只是「顯示」還是「內容」也要?)(類似要求)《CSS的content屬性》
- winter display:inline;元素的offset、scroll、client (X,Y,H,W) 这些属性行为很奇怪
- winter:需要知道行信息(什麼是行訊息?)
- winter:需要在scroll下,拿到每屏上的信息
- winter:需要在分栏的情况下,拿到每栏文字之类的信息。
已有解法
- 4. 可以用 window.getComputedStyle.(x, "::before").content 解決 (直觀程度?)
其他意見&問題
- winter:scrollHeight、offsetHeight这几个属性其实我就觉得不应该放在DOM上,应该是node.getVisualBox().offsetHeight。DOM本身应该是与渲染无关的。
- Gzhang:要弄就弄个document.renderElement.children这样的结构来
- winter:selection不應該绑到dom上(而是node.getVisualBox()?)
- winter:WebKit 不應該選取沒選中的內容(原句:「吐槽点2:234实际没有被选中」)
- Kenny:既然龐大的解法如解法一也有不能解決的狀況,實際分析每個問題並給予解法比較踏實一點(反正分析各問題一定沒什麼缺點)。目前為止 10. 11. 的敘述太模糊、需補充,1. 2. 12. 13. 的需求的原始理由最好補充,6. 應該沒有意義吧?
- Kenny:1. 是太難還是不可能?
- Kenny:13. 可能是 getClientRects 的缺陷:1) 多欄 2) 由 Rect 取到字串(可行嗎?)
需求3
使用情節
做地图的时候很有用的,各种水印,各种覆层,不知道后面的颜色,就选不好前面的颜色(Gzhang)
其他意見&問題
- Kenny:所以需要圖片的像素級資訊?
- Gzhang(為什麼 elementsFromPoint 沒有解決這個問題):因为一 个point“背后的颜色”可能是一个textnode,可能是一个border,可能是element background,可能是一个transform过来的element background。(這裡需要一一釐清所謂 TreeAPI 能解決這個問題到什麼程度)
- Kenny:如果有 nodeFromPoint/nodesFromPoint 能改善這個問題到什麼程度?
解法一:RenderTree + Linebox API
大致將瀏覽器的 C++ 渲染對象 — 盒(Gecko 的 Frame、WebKit 的 Render*) 和 Linebox 的 API 弄出來。
能解決:1(不確定)、2、4、7、10(?)、11、12(若能拿到 Linebox 的內容、位置,剩下可以用 JS 估算)、13
不能解決:3(getElementsByPoint 不能解決的情況,如果是 border、text-decoration 有些如果有 DisplayList API 可能可以解決,剩下的像素級處理不能解決)、5(DOM Selection 需要更動)、6、8、9(同 5)
問題
- document.renderElement.children 拿來做什麼的? — Kang-Hao (Kenny) Lu 02:49, 3 February 2012 (UTC)
- API 設計上如何從 node 找到偽元素的盒(node.getVisualBox("::before") 似乎跟 window.getComputedStyle(node, "::before") 很像)— Kang-Hao (Kenny) Lu 02:49, 3 February 2012 (UTC)
參考
解法二:前置處理的 CSS
弄一個偽 CSS(例:text/jscss)是會改變 DOM 的(插入 ::before、::after、使用 text-transform),在 appendChild 的情況也成立。為確保一致性:
- 改變 ::before、::after 產生的 DOM 節點的內容的時候會拋錯。
- 移除 ::before、::after 產生的 DOM 節點的時候會拋錯。
- 移除一個 DOM 元素必須同時移除它的 ::before、::after。
- ::before、::after 產生的 DOM 節點不批配任何(除了 ::before、::after 以外,包括 :not)的 CSS 選擇器。
能解決:4、5、6、7、8、9
不能解決:1、2、3、10、11、12、13