A font can be defined either from a subset of the properties used to define
fonts in css, or
by using a texture altas of the various glyphs to be used.
A font can be rendered into a 2D canvas
or into the WebGL canvas using the texture atlas.
A texture atlas can either be supplied as an image, or generated
automatically by FigureOne based on css font definitions.
Choosing how to render text depends on the application.
If text size is to be animated through a large scale range, then rendering
on the 2D canvas is advantageous as it can scale text to any size without a
loss of sharpness. The main disadvantage of the 2D canvas is the fact that
it's a different HTML canvas element to the WebGL canvas. Thus all text on
the 2D canvas will always be above (default) or below the WebGl canvas
independent of when it is drawn. This means text will always be above or
below shapes. regenerated each time the size changes by some threshold.
Conversely, drawing text on the WebGL canvas provides control on which
shapes can hide text and vise versa. The disadvantage is that text is drawn
from a texture atlas of bitmapped fonts. This means as text is progressively
scaled up or down, the the text will look more pixelated or blurry. For many
scalings (like common scalings in an equation), this will likely not be a
problem. But for large changes in animated scale, it will be better to use
the 2D canvas. Scaling also needs to be considered if the WebGL canvas is
expected to be resized. On a desktop browser, a canvas element can be
resized a lot, and so if using the WebGL atlas, it may need to be
Note, the choice of where to render text can be made for each text element.
Therefore it is possible to have some text rendered to the 2D canvas, and
other text rendered to the WebGL canvas in the same figure.
A texture atlas can either be supplied as an image, or generated
automatically by FigureOne based on the css font definitions.
CSS font definition:
family - the typeface family from which it comes (e.g. 'Helvetica',
'Times New Roman')
style - its slope (e.g. 'italic')
weight - its thickness (e.g. 'bold')
size
Atlas font definition:
src - the image or url to the image - if not supplied then atlas will
be generated automatically
map - description of location and size of each glyph in the atlas
glyphs - the available glyphs in the atlas. To reduce the size of the
atlas, include only the glyphs that are being used, or use a preset
alphabet (like 'latin', or 'math')
atlasColor - if true then the rendered glyph color will be the same
as that in the texture. If false, then only the transparency channel of
the texture will be used and color will be defined by the FigureElement
drawing the text.
atlasSize - if defined, and if the glyphs are generated automatically
then the glyphs will be created with a pixel size that is atlasSize
portion of the canvas height. If undefined, then the glyphs will be
created with a pixel size that is the ratio of the font size to the
scene height portion of the canvas height.
A font can also have a number of modifying properties:
color - fill or outline color of each glyph - not used if the texture
atlas color is to be used
underline
outline - defines whether the font is filled, is an outline, or both
Fonts that are generated automatically rely on the client's browser to
measure the font's width. From this the ascent and descent of each glyph
is then estimated. Each glyph's width, ascent and descent is used to layout
the glyphs in regular text and equations, as well as determine the borders
and touch borders of FigureElements that draw the text.
However, this estimate for different font families is not always perfectly
accurate. If the estimate is not sufficient, then it can be modified by using
the following properties (where each property is a proportion of the width
of a character 'a'):
maxAscent: Maximum ascent of glyphs like "A" or "$"
midAscent: ascent of mid level glyphs like "a" and "g"
descent: descent of glyphs that do not noticeably go below the
baseline (but often do a little) like "a" and "b"
midDescent: descent of glyphs that go a little below the baseline like
"," and ";"
maxDescent: maximum descent of glyphs like "g" and "|"
Individual glyphs can also be modified (for atlas based fonts only) using
the modifiers property.
Example
// Full font definition constfont = newFigureFont({ family:'Helvetica', style:'italic', weight:'bold', color: [1, 1, 0, 1], opacity:1, });
Font definition object.
A font can be defined either from a subset of the properties used to define fonts in css, or by using a texture altas of the various glyphs to be used.
A font can be rendered into a 2D canvas or into the WebGL canvas using the texture atlas.
A texture atlas can either be supplied as an image, or generated automatically by FigureOne based on css font definitions.
Choosing how to render text depends on the application.
If text size is to be animated through a large scale range, then rendering on the 2D canvas is advantageous as it can scale text to any size without a loss of sharpness. The main disadvantage of the 2D canvas is the fact that it's a different HTML canvas element to the WebGL canvas. Thus all text on the 2D canvas will always be above (default) or below the WebGl canvas independent of when it is drawn. This means text will always be above or below shapes. regenerated each time the size changes by some threshold.
Conversely, drawing text on the WebGL canvas provides control on which shapes can hide text and vise versa. The disadvantage is that text is drawn from a texture atlas of bitmapped fonts. This means as text is progressively scaled up or down, the the text will look more pixelated or blurry. For many scalings (like common scalings in an equation), this will likely not be a problem. But for large changes in animated scale, it will be better to use the 2D canvas. Scaling also needs to be considered if the WebGL canvas is expected to be resized. On a desktop browser, a canvas element can be resized a lot, and so if using the WebGL atlas, it may need to be
Note, the choice of where to render text can be made for each text element. Therefore it is possible to have some text rendered to the 2D canvas, and other text rendered to the WebGL canvas in the same figure.
A texture atlas can either be supplied as an image, or generated automatically by FigureOne based on the css font definitions.
CSS font definition:
family- the typeface family from which it comes (e.g. 'Helvetica', 'Times New Roman')style- its slope (e.g. 'italic')weight- its thickness (e.g. 'bold')sizeAtlas font definition:
src- the image or url to the image - if not supplied then atlas will be generated automaticallymap- description of location and size of each glyph in the atlasglyphs- the available glyphs in the atlas. To reduce the size of the atlas, include only the glyphs that are being used, or use a preset alphabet (like 'latin', or 'math')atlasColor- iftruethen the rendered glyph color will be the same as that in the texture. Iffalse, then only the transparency channel of the texture will be used and color will be defined by the FigureElement drawing the text.atlasSize- if defined, and if the glyphs are generated automatically then the glyphs will be created with a pixel size that isatlasSizeportion of the canvas height. If undefined, then the glyphs will be created with a pixel size that is the ratio of the font size to the scene height portion of the canvas height.A font can also have a number of modifying properties:
color- fill or outline color of each glyph - not used if the texture atlas color is to be usedunderlineoutline- defines whether the font is filled, is an outline, or bothFonts that are generated automatically rely on the client's browser to measure the font's width. From this the ascent and descent of each glyph is then estimated. Each glyph's width, ascent and descent is used to layout the glyphs in regular text and equations, as well as determine the borders and touch borders of FigureElements that draw the text.
However, this estimate for different font families is not always perfectly accurate. If the estimate is not sufficient, then it can be modified by using the following properties (where each property is a proportion of the width of a character 'a'):
maxAscent: Maximum ascent of glyphs like "A" or "$"midAscent: ascent of mid level glyphs like "a" and "g"descent: descent of glyphs that do not noticeably go below the baseline (but often do a little) like "a" and "b"midDescent: descent of glyphs that go a little below the baseline like "," and ";"maxDescent: maximum descent of glyphs like "g" and "|"Individual glyphs can also be modified (for atlas based fonts only) using the
modifiersproperty.Example
Example