文本框

Textbox是一个简单的库来布局多行文本,用于在SVG或Canvas上显示. 它可以相当体面地划出一行,使内容丰富的文字具有一定的界限。 它理解了简单的文本,以及HTML和LaTeX语法的一个小子集. 这个软件的最初目的是帮助标签图表.

看看这个 文本框示例和演示 如果你好奇这个图书馆能做什么.

特征 :

• 折行文字以适应维度.
• 文本可溢出为 ... 如果不符合指定区域.
• 理解通用文本特性 : 粗体, (中文(简体) ), 斜体, (中文(简体) ), 链接等,还有...
• 知有相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相.
• 尝试对某些字符之前或之后的破行保持智能( 可以在 - 但在此之前没有).
• 文本准备时支持连字符 软连字符。 。 。 .

安装

如果您不想自己下载并构建"文本箱",图书馆也作为国家防范机制的套件提供:

$ npm install @borgar/textbox

API 参考

用于任何目的时,您需要先定义一个新的文本框实例 。 您可以通过配置对象作为参数 :

const box = new Textbox({
  font: '12px/14px sans-serif',
  width: Infinity,
  height: Infinity,
  align: 'left',
  valign: 'top',
  x: 0,
  overflow: 'ellipsis',
  parser: 'text',
  createElement: Textbox.createElement
});

在此显示的是默认值, 但可以提供以上任何或所有参数 。 Textbox 实例将提供同名方法,以及拆行和渲染方法:

const box = new Textbox()
  .font('16px/19px sans-serif')
  .align('center')
  .parser('html')
  .createElement(React.createElement);

完整的 API 文档可见于 文件/API.md。 。 。 .

限制:

1. 在 SVG 链接中,不会自动获得颜色或指针光标 。 还要加上你自己的风格.

   svg text a {
     fill: blue;
     text-decoration: underline;
     cursor: pointer;
   }
   

2. SVG文本中的多字链接不一定像HTML中那样是一个单一的实体/元素. 如果链接中的文字是线断的,那么徘徊一段不会使下一行的片段引发徘徊样式.

3. 文本说明并不是在所有浏览器中都一致有效,因为它们有错误支持 word-spacing 属性。 Google Chrome似乎很好, Safari为纯文本工作,但格式化文本不正确。 Firefox是相当随机的。 在发布前在不同的浏览器中测试您的输出 .

4. 下标和上标在 Firefox 中被窃听,因为他们从未执行过 baseline-shift 属性。 这个 错误报告 实值 20岁 现在,如此的aaaaaany今天.