README
wrap-svg-text
Generate multiline svg texts directly through a text string and a set of css style. Example:
wrapSvgText({
text: "Thank you, Chairman Rayon To Go(聽不懂他的發音人名), Chairman 還有我們President, 還有各位美僑商, 美國商會所有的好朋友, 還有各位新聞界的女士先生."
style: {
fontSize: "32px",
width: "300px",
whiteSpace: "pre-line"
}
});
Usage
install:
npm install --save wrap-svg-text
include:
<script src="path-to-wrap-svg-text.js"></script>
call:
ret = wrapSvgText({text: '...', style: { ... }});
myGroup.textContent = ""; /* clear myGroup content */
myGroup.appendChild(ret)
with prepared div node
so we don't have to mimic its style ( content inside ):
ret = wrapSvgText({node: node});
myGroup.textContent = ""; /* clear myGroup content */
myGroup.appendChild(ret)
Options
text
: string. text to render.style
: object containing styles for rendering above text. optional.node
: when provided, use this node to layout content.- content may be altered due to algorithm in
wrap-svg-text
. checkuseRange
for more detail. node
should contain plain text only.text
can be omitted if there are contents already innode
style
will be ignored when node is provided.
- content may be altered due to algorithm in
useRange
: if true, usedocument.range
for position calculation. default false. see below.
useRange
wrap-svg-text
by default get characters' position by wrapping them in span. however, this may touch node's content if user provide node
as a paramter when calling wrap-svg-text
. This may causing re-layout and change the position of elements, leading to incorrect result.
In this case, user can alternatively enable useRange
and let wrap-svg-text
calculate the position with range.getBoundingClientRect
. However, this is 2 times slower so only suggested using for short text.
Mechanism
wrap-svg-text simply calculates layouts of texts with the help of browser layout engine. Input texts with specified style are added directly in a hidden div, with every single glyph wrapped in span. Then, span are joined based on their y coordinate, and added back as a <text>
tag in a <g>
tag, which is returned from wrapSvgText
function call.
Note
Layout is calculated directly based on CSS and DOM, thus it's important to make sure that when running wrap-svg-text, CSS and DOM are ready and correctly rendered, otherwise wrap-svg-text may give incorrect result due to style updating.
Credit
Sample text from 'HolyMosquito's transcription of Han's speech in AmCham Taipei, a good example of English / Chinese mixed context.
License
MIT