-
DocumentFragment 插入页面前可以直接使用 querySelector、querySelectorAll 和 getElementById 查询内部元素。关键是把查询放在片段仍持有子节点时,并理解插入后片段会被清空、已取得的元素引用仍然有效。
-
DocumentFragment插入时移动的是子节点,片段对象仍保留。通过节点引用、返回值和重复渲染示例,说明为什么片段变空,以及重新构建、深克隆与安全文本写入的边界。
-
Range.intersectsNode() 判断的是节点与 Range 是否有交集,不等于整个节点内容都被包含。本文从 DOM 边界点解释两者差异,并给出完整包含、文本命中和跨文档节点的选择方式。
-
JavaScript Range.comparePoint 返回 -1、0、1,用来判断节点加 offset 组成的坐标点位于选区之前、范围内部还是之后。本文同时比较 isPointInRange 与 compareBoundaryPoints 的适用边界。
-
TextMetrics.width 表示文本的行内推进宽度,而 actualBoundingBoxLeft 与 actualBoundingBoxRight 描述相对于 Canvas 对齐点的可见字形边界。本文用公式和原创 Canvas 示例说明两者的区别及选用场景。
-
Canvas 文字布局不能只看 TextMetrics.width。本文从 measureText() 返回值出发,说明 actualBoundingBoxLeft、Right、Ascent 和 Descent 如何换算真实可见矩形,并给出居中、裁剪和斜体外伸时的处理边界。
-
Path2D.addPath 可以把可复用路径按 DOMMatrix 加入目标路径。本文说明怎样用一个矩阵同时表达缩放、旋转与平移,并区分路径级变换和 Canvas 上下文变换。
-
JavaScript 可以把 SVG path 的 d 属性交给 new Path2D 构造 Canvas 路径对象,再复用于 fill、stroke 和命中判断。本文说明输入边界、绘制复用、坐标变换与路径副本的职责分工。
-
用 SVGTextContentElement 的 getSubStringLength 测量指定字符区间,用 getComputedTextLength 测量整段文本,并说明字距、x 属性和索引边界对结果的影响。
-
scheduler.postTask 返回 Promise,并可通过 AbortController 或 TaskController 的 signal 取消尚未执行的任务。本文给出最小写法、错误处理和已开始任务的边界。
-
CSS hyphens:auto 不是只看 CSS 属性值,浏览器还要根据 HTML 的 lang 选择语言规则与词典。本文说明正确标注语言、处理混合文本、使用 manual 断点,以及排查断词不生效的方法。
-
document.fonts.check() 返回 true 只表示当前字体规格可以避免使用未加载字体完成渲染,不等于指定字体文件已经下载。本文用 document.fonts.load、FontFace.status 和真实字符样本拆解误判原因与排查方案。
-
document.fonts.load 可按字体家族、字重和文本等待匹配字体集合。本文对比 load、ready 与 check,提供标题字体等待及超时处理示例,并解释空数组、字形覆盖与迟到请求的边界。
-
CSS hanging-punctuation 可以把行首的开括号或引号、行尾的闭括号或引号,以及符合条件的逗号和句号放到行框外侧。本文从三类标点位置出发,说明 first、last、allow-end 的组合方式,并解释浏览器支持和布局条件带来的显示差异。
-
CSS text-emphasis 是给文字添加着重标记的简写属性。本文从最小用法开始,说明 filled、open、dot、circle、sesame 和自定义单字符的选择,再解释颜色、位置、继承、行高影响以及保留普通文本可读性的降级思路。