Warning:
This wiki has been archived and is now read-only.

Rendering API

From HTML5 Chinese Interest Group Wiki
Jump to: navigation, search

這個頁面整理一些渲染相關的 API 需求。相關規範是 CSSOM View Module。

要求&問題

  1. Gzhang：需要知道滚动条到底有多宽。（標準討論）元素各種相關尺寸
  2. Gzhang：一行文字有多高。
  3. Gzhang：一个有z-index的元素后面到底是什么颜色的……（標準討論）elementsFromPoint
  4. winter：需要知道偽元素的文字
  5. winter：selection 可以帶有偽元素
  6. winter：需要知道伪元素的 innerHTML
  7. winter：宣要知道偽元素的 offsetHeight
  8. winter：伪元素点击事件 （相同要求）《提问：可以通过JavaScript给伪元素绑定事件吗？ 》
  9. winter：要有一種可以選生成內容的 selection（只是「顯示」還是「內容」也要？）（類似要求）《CSS的content屬性》
  10. winter display:inline;元素的offset、scroll、client (X,Y,H,W) 这些属性行为很奇怪
  11. winter：需要知道行信息（什麼是行訊息？）
  12. winter：需要在scroll下，拿到每屏上的信息
  13. 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

Retrieved from "https://www.w3.org/html/ig/zh/wiki/index.php?title=Rendering_API&oldid=1702"