sketch code additionnal Glyph methods
var fonts = [ "data/verdana.svg", "data/automat.svg" ]; int curfont = 0; void setup() { size( 800, 400); // set the default glyph size mouseY = 64; // loading SVG fonts definition loadGlyphs( fonts[0] ); loadGlyphs( fonts[1] ); } void draw() { background(51); float size = mouseY; float ascent = glyphAscent(fonts[curfont])*size; float descent = glyphDescent(fonts[curfont])*size; float middle = (height/2) + ((ascent+descent)/2) - descent; // draw usage fill( #666666 ); text( "click to change font and move along y-axis to scale glyphs", 10, 20 ); // draw glyphs noStroke(); fill( #FFFFFF ); glyph( "Lorem Ipsum", width/2, middle, size, CENTER, fonts[curfont] ); // draw glyphs ascent, descent and base lines stroke( #666666 ); line( 0, middle-ascent, width, middle-ascent ); line( 0, middle+descent, width, middle+descent ); line( 0, middle, width, middle ); } void mouseReleased() { curfont = int(!curfont); }
// The TrueType Font to SVG convertor (batik-ttf2svg) can be downloaded for free at // http://xmlgraphics.apache.org/batik/download.cgi // // run the above command line to create your SVG font definition // java -jar batik-ttf2svg.jar verdana.ttf -o verdana.svg /** * Draws glyph to the screen. Displays the information specified in the str parameters on * the screen in the position specified by the x and y parameters and the optional s parameter. * An SVG font definition must be set with the loadGlyphs() or loadFont() function before glyph() * may be called. The align parameter is optional which gives the option to draw to the left, right, * and center of the coordinates. The tablename parameter is also optional which gives the option to * select the font definition used to draw the text. By default, this method use the first glyph * table available in list. Change the color of the text with the fill() function. Change the borders * color around text with the stroke() function. * * based on Processing.js 1.3 text() method. * * * @param str String, letters to be displayed * @param x int or float: x-coordinate of text * @param y int or float: y-coordinate of text * @param s int or float: the scale value of text or font size * @param align [ horizontal alignment, either LEFT, CENTER, or RIGHT ] * @param tablename [ the glyph table name ] * */ void glyph( str, x, y, s, align, tablename ) { var name = tablename || glyphCurrentTableName(); var text_width = 0, x_offset = 0; var glyphs = glyphTable[ name ]; if ( !glyphs ) return; // translate if ( align==RIGHT || align==CENTER ) { text_width = glyphWidth(str,name)*s; if ( align==RIGHT ) x_offset = -text_width; else x_offset = -text_width / 2; } pushMatrix(); translate( x+x_offset, y ); // scale s /= glyphs.units_per_em; scale( s, s ); // draw for( var i=0, len=str.length; i<len; i++ ) try { glyphLook( glyphs, str[i] ).draw(); } catch(e) {}// Processing.debug(e); } popMatrix(); } /** * Calculates and returns the width of any character or text string.The tablename parameter is * optional which gives the option to select the font definition used to draw the text. By default, * this method use the first glyph table available in list. * * based on Processing.js 1.3 loadFont() method. * * @param str char or String * @param tablename [ the glyph table name ] * @return Float */ void glyphWidth( str, tablename ) { var w = 0; var name = tablename || glyphCurrentTableName(); if ( !glyphTable[name] ) return 0; for( var i=0, len=str.length; i<len; i++ ) try { w += parseFloat( glyphLook( glyphTable[name], str[i] ).horiz_adv_x ); } catch(e) {}// Processing.debug(e); } return w / glyphTable[ name ].units_per_em; } /** * Returns ascent of the current glyph at its original size.The tablename parameter is optional which * gives the option to select the font definition used to draw the text. By default, this method use * the first glyph table available in list. * * * @param tablename [ the glyph table name ] * @return Float */ void glyphAscent( tablename ) { var name = tablename || glyphCurrentTableName(); if ( !glyphTable[name] ) return 0; return glyphTable[name].ascent / glyphTable[name].units_per_em - glyphDescent(name); } /** * Returns descent of the current glyph at its original size.The tablename parameter is optional which * gives the option to select the font definition used to draw the text. By default, this method use * the first glyph table available in list. * * * @param tablename [ the glyph table name ] * @return Float */ void glyphDescent( tablename ) { var name = tablename || glyphCurrentTableName(); if ( !glyphTable[name] ) return 0; return -glyphTable[name].descent / glyphTable[name].units_per_em; } /** * Returns the first glyph table available in list. * @return String */ void glyphCurrentTableName() { for( var s in glyphTable ) return s; }