text - SVG lengthAdjust only for shrinking but not for stretching -
is there nice , easy way to have functionality of lengthadjust (together textlength) shrinking text if necessary (if wide) never attempting stretch it?
two possible solutions svg generated through js come mind:
- count characters (or rather grapheme clusters) , based on (together heuristics unless fixed-width size font used) determine whether set
textlength
or not. - first without
textlength
set , determine usinggetbbox()
whether text needs shrinking in casetextlength
set.
both solutions imho quite ugly (and possibly buggy recollections of past encounters getbbox()
). there maybe nicer solution missed?
have @ this: https://stackoverflow.com/a/39886640/1925631 essentially, make path spans exact coordinates want spread text on path. measure path. then, measure how many pixels text requires, font-size of 1px (and other desired font-features). adjust font-size fill desired percentage of available path advance width. adjust start-offset , text-anchor. calculate author specified textlength , choose lengthadjust value exact alignment on low precision / non-conformant renderers.
finally, if need support viewers without text on path rendering support, can use conformant viewer javascript support create backwards compatible/fallback version. render content , use svg dom api fetch x, y , rotate values each character/glyph, create new svg dom representation attributes specified. might need javascript calculate absolute width , height root svg element well, , correctly specified viewbox, , cascade/resolve/convert css selectors/rules/properties inline attributes. way can cross-platform, cross-browser/viewer rendering of text, single compilation step per immutable source file version.
i've made gist ease last step, of resolving css , removing classnames, while preserving rendered end-result: https://gist.github.com/msand/4b37d3ce04246f83cb28fdbfe4716ecc
this purpose of single universal svg + javascript codebase, , web+ios+android software development (based on react + react-native + react-native-svg)
Comments
Post a Comment