An implementation of the SVG Font 1.1 spec, using dojox/gfx.
Basic interface:
1 2 3 4 5 | var f = new gfx.Font(url|string); surface||group.createVectorText(text) .setFill(fill) .setStroke(stroke) .setFont(fontStyleObject); |
The arguments passed to createVectorText are the same as you would pass to surface||group.createText; the difference is that this is entirely renderer-agnostic, and the return value is a subclass of dojox/gfx.Group.
Note also that the "defaultText" object is slightly different: { type:"vectortext", x:0, y:0, width:null, height: null, text: "", align: "start", decoration: "none" }
...as well as the "defaultVectorFont" object: { type:"vectorfont", size:"10pt" }
The reason for this should be obvious: most of the style for the font is defined by the font object itself.
Note that this will only render IF and WHEN you set the font.
Parameter | Type | Description |
---|---|---|
url | String | dojo._Url | An url pointing to the SVG Font definition. |
See the dojox/gfx/VectorText reference documentation for more information.
Clean off all of the given mixin parameters.
Clean off all of the given mixin parameters.
Get the best number of lines to return given w and h.
Parameter | Type | Description |
---|---|---|
chars | undefined | |
w | undefined | |
h | undefined | |
ldng | undefined |
Based on the given scale, do the best line splitting possible.
Parameter | Type | Description |
---|---|---|
chars | undefined | |
w | undefined | |
scale | undefined |
Find the scaling factor for the given phrase set.
Parameter | Type | Description |
---|---|---|
lines | undefined | |
w | undefined | |
h | undefined | |
l | undefined |
Take the loaded SVG Font definition file and convert the info into things we can use. The SVG Font definition must follow the SVG 1.1 Font specification.
Parameter | Type | Description |
---|---|---|
svg | String | |
url | String |
split passed chars into nLines by finding the closest whitespace.
Parameter | Type | Description |
---|---|---|
chars | undefined | |
nLines | undefined |
based on the passed parameters, draw the given text using paths defined by this font.
The main method of a VectorFont, draw() will take a text fragment and render it in a set of groups and paths based on the parameters passed.
The basics of drawing text are simple enough: pass it your text as part of the textArgs object, pass size and family info as part of the fontArgs object, pass at least a color as the fillArgs object, and if you are looking to create an outline, pass the strokeArgs object as well. fillArgs and strokeArgs are the same as any other gfx fill and stroke arguments; they are simply applied to any path object generated by this method.
The result of this function is a set of gfx objects in the following structure:
1 2 3 | gfx.Group // the parent group generated by this function + gfx.Group[] // a group generated for each line of text + gfx.Path[] // each glyph/character in the text |
Scaling transformations (i.e. making the generated text the correct size) are always applied to the parent Group that is generated (i.e. the top node in the above example). In theory, if you are looking to do any kind of other transformations (such as a translation), you should apply it to the group reference you pass to this method. If you find that you need to apply transformations to the group that is returned by this method, you will need to reapply the scaling transformation as the last transform, like so:
1 2 3 4 | textGroup.setTransform( new matrix.Matrix2D([ matrix.translate({ dx: dx, dy: dy }), textGroup.getTransform() ])); |
In general, this should never be necessary unless you are doing advanced placement of your text.
In addition to straight text fragments, draw() supports a few advanced operations not normally available with vector graphics:
To enable either, pass a fitting
property along with the textArgs object.
The possible values are contained in the dojox/gfx.vectorFontFitting enum
(NONE, FLOW, FIT).
Flow fitting
Flow fitting requires both a passed size (in the fontArgs object) and a
width (passed with the textArgs object). draw() will attempt to split the
passed text up into lines, at the closest whitespace according to the
passed width. If a width is missing, it will revert to NONE.
Best fit fitting
Doing a "best fit" means taking the passed text, and finding the largest
size and line breaks so that it is the closest fit possible. With best
fit, any size arguments are ignored; if a height is missing, it will revert
to NONE.
a11y
Since the results of this method are rendering using pure paths (think
"convert to outlines" in Adobe Illustrator), any text rendered by this
code is NOT considered a11y-friendly. If a11y is a requirement, we
suggest using other, more a11y-friendly methods.
Font sources
Always make sure that you are legally allowed to use any fonts that you
convert to SVG format; we claim no responsibility for any licensing
infractions that may be caused by the use of this code.
Parameter | Type | Description |
---|---|---|
group | dojox/gfx.Container | |
textArgs | dojox/gfx.Text | |
fontArgs | dojox/gfx.Font | |
fillArgs | dojox/gfx.Fill | |
strokeArgs | dojox/gfx.Stroke |
Find the baseline coord for alignment; adjust for scale if passed.
Parameter | Type | Description |
---|---|---|
scale | Float |
Optional an optional scaling factor. |
return the y coordinate that is the center of the viewbox.
Parameter | Type | Description |
---|---|---|
scale | Float |
Optional an optional scaling factor. |
return the height of a single line, sans leading, based on scale.
Parameter | Type | Description |
---|---|---|
scale | Float |
Optional an optional scaling factor. |
Get the width of the rendered text without actually rendering it.
Parameter | Type | Description |
---|---|---|
text | String | The string to measure. |
scale | Float |
Optional an optional scaling factor. |
Return if we've loaded a font def, and the parsing was successful.
Load the passed SVG and send it to the parser for parsing.
Parameter | Type | Description |
---|---|---|
url | String | dojo._Url | The svg to parse. |
Load the passed SVG and send it to the parser for parsing.