pretext

开源

快速、准确和全面的文本测量和布局

49.6K stars0 点赞2 次浏览

工具介绍

快速、准确和全面的文本测量和布局

用于多行文本测量和布局的前文本纯JavaScript/TypeScript库. 快速, 准确支持所有你甚至不知道的语言( S) 。允许渲染到 DOM, Canvas, SVG 以及很快的服务器侧. Prettext side steps of DOM systems (例如:GetBboundingClient Rect, sliftHeight),它触发了布局回流,是浏览器中最昂贵的操作之一. 它执行自己的文字测量逻辑,使用浏览器自己的字体引擎作为地真(非常AI友好的迭代方法). 安装 sH npm 安装 @ cunglou/ pretext Demos Clone 重播,运行包子安装,然后启动包子,并在浏览器中打开/demos/index. 在Windows上,使用包跑起:窗口. 或者,见他们住在cunglou.me/pretext。还有一些在梦中 GitHub.io/前文本-演示文稿 API Prettext服务于2个用例: 1. 测量一段落的高度而不接触 DOM

核心特点

•proper virtualization/occlusion without guesstimates & caching
•fancy userland layouts: masonry, JS-driven flexbox-like implementations, nudging a few layout values without CSS hacks (imagine that), etc.
•_development time_ verification (especially now with AI) that labels on e.g. buttons don't overflow to the next line, browser-free
•prevent layout shift when new text loads and you wanna re-anchor the scroll position
•layoutWithLines() gives you all the lines at a fixed width:
•measureLineStats() and walkLineRanges() give you line counts, widths and cursors without building the text strings:
•raw inline text in, including boundary spaces
•caller-owned extraWidth for pill chrome
•break: 'never' for atomic items like chips and mentions
•white-space: normal only