<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> web2d = { peer: {} }; web2d.peer = { svg: {} }; web2d.peer.utils = {}; </script> <script type="text/javascript" src="utils.js"></script> <script type="text/javascript"> function multiline(text, family, elemId) { var overflowWorkspace = new web2d.Workspace(); overflowWorkspace.setSize('200px', '240px'); overflowWorkspace.setCoordSize('200', '240'); overflowWorkspace.setCoordOrigin(0, 0); [6,8,10,15].forEach(function(size, i) { var wText = new web2d.Text(); overflowWorkspace.append(wText); wText.setText(text); wText.setFont(family, size, 'bold'); wText.setPosition(30, 50 * i); wText.setColor('red'); }); overflowWorkspace.addItAsChildTo($("#"+elemId)); } function alignments(text, family, elemId) { var overflowWorkspace = new web2d.Workspace(); overflowWorkspace.setSize('260px', '240px'); overflowWorkspace.setCoordSize('260', '240'); overflowWorkspace.setCoordOrigin(0, 0); ['center','left','right'].forEach(function(align, i) { var wText = new web2d.Text(); overflowWorkspace.append(wText); wText.setText(text); wText.setFont(family, 8, 'bold'); wText.setPosition(30, 80 * i); wText.setColor('red'); wText.setTextAlignment(align); }); overflowWorkspace.addItAsChildTo($("#"+elemId)); } function initialize() { web2d.Toolkit.init(); // Multine tests ... ['Arial','Tahoma','Verdana','Times'].forEach(function(family, i) { multiline('This multine text.\nLine 1 :)\nLine2', family, 'multi' + i); }); // Multine tests and alingments .. ... ['Arial','Tahoma','Verdana','Times'].forEach(function(family, i) { alignments('This multine text.\nThis is the long line just because :)\nShort line', family, 'amulti' + i); }) } </script> </head> <body onload="initialize();"> <h1>Web2d Fonts Tests</h1> <table border="1"> <colgroup> <col style="width:30%"/> <col style="width:60%"/> </colgroup> <thead> <tr> <td></td> <td>Arial</td> <td>Tahoma</td> <td>Verdana</td> <td>Times</td> </tr> </thead> <tr> <td> Multiline Text </td> <td> <div id="multi0"></div> </td> <td> <div id="multi1"></div> </td> <td> <div id="multi2"></div> </td> <td> <div id="multi3"></div> </td> </tr> <tr> <td> Multiline Aligment </td> <td> <div id="amulti0"></div> </td> <td> <div id="amulti1"></div> </td> <td> <div id="amulti2"></div> </td> <td> <div id="amulti3"></div> </td> </tr> <!--**************************************************************************--> </table> <input type="button" value="Zoom In" onclick="zoomIn()"> </body> </html>