<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns:fn="http://www.w3.org/2005/02/xpath-functions">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../../doc/otp_doc.css" type="text/css">
<title>Erlang -- Fonts</title>
</head>
<body bgcolor="white" text="#000000" link="#0000ff" vlink="#ff00ff" alink="#ff0000"><div id="container">
<script id="js" type="text/javascript" language="JavaScript" src="../../../../doc/js/flipmenu/flipmenu.js"></script><script id="js2" type="text/javascript" src="../../../../doc/js/erlresolvelinks.js"></script><script language="JavaScript" type="text/javascript">
<!--
function getWinHeight() {
var myHeight = 0;
if( typeof( window.innerHeight ) == 'number' ) {
//Non-IE
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth ||
document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myHeight = document.body.clientHeight;
}
return myHeight;
}
function setscrollpos() {
var objf=document.getElementById('loadscrollpos');
document.getElementById("leftnav").scrollTop = objf.offsetTop - getWinHeight()/2;
}
function addEvent(obj, evType, fn){
if (obj.addEventListener){
obj.addEventListener(evType, fn, true);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false;
}
}
addEvent(window, 'load', setscrollpos);
//--></script><div id="leftnav"><div class="innertube">
<img alt="Erlang logo" src="../../../../doc/erlang-logo.png"><br><small><a href="users_guide.html">User's Guide</a><br><a href="index.html">Reference Manual</a><br><a href="release_notes.html">Release Notes</a><br><a href="../pdf/gs-1.5.15.1.pdf">PDF</a><br><a href="../../../../doc/index.html">Top</a></small><p><strong>Graphics System (GS)</strong><br><strong>User's Guide</strong><br><small>Version 1.5.15.1</small></p>
<br><a href="javascript:openAllFlips()">Expand All</a><br><a href="javascript:closeAllFlips()">Contract All</a><p><small><strong>Chapters</strong></small></p>
<ul class="flipMenu" imagepath="../../../../doc/js/flipmenu">
<li id="no" title="GS - The Graphics System" expanded="false">GS - The Graphics System<ul>
<li><a href="gs_chapter1.html">
Top of chapter
</a></li>
<li title="Introduction"><a href="gs_chapter1.html#id62365">Introduction</a></li>
<li title="Basic Architecture of GS"><a href="gs_chapter1.html#id61203">Basic Architecture of GS</a></li>
</ul>
</li>
<li id="no" title="Interface Functions" expanded="false">Interface Functions<ul>
<li><a href="gs_chapter2.html">
Top of chapter
</a></li>
<li title="Overview"><a href="gs_chapter2.html#id61459">Overview</a></li>
<li title="A First Example"><a href="gs_chapter2.html#id57477">A First Example</a></li>
<li title="Creating Objects"><a href="gs_chapter2.html#id63683">Creating Objects</a></li>
<li title="Ownership"><a href="gs_chapter2.html#id59961">Ownership</a></li>
<li title="Naming Objects"><a href="gs_chapter2.html#id59975">Naming Objects</a></li>
</ul>
</li>
<li id="no" title="Options" expanded="false">Options<ul>
<li><a href="gs_chapter3.html">
Top of chapter
</a></li>
<li title="The Option Concept"><a href="gs_chapter3.html#id58188">The Option Concept</a></li>
<li title="The Option Tables"><a href="gs_chapter3.html#id64276">The Option Tables</a></li>
<li title="Config-Only Options"><a href="gs_chapter3.html#id64432">Config-Only Options</a></li>
<li title="Read-Only Options"><a href="gs_chapter3.html#id64553">Read-Only Options</a></li>
<li title="Data Types"><a href="gs_chapter3.html#id64674">Data Types</a></li>
</ul>
</li>
<li id="no" title="Events" expanded="false">Events<ul>
<li><a href="gs_chapter4.html">
Top of chapter
</a></li>
<li title="Event Messages"><a href="gs_chapter4.html#id65002">Event Messages</a></li>
<li title="Generic Events"><a href="gs_chapter4.html#id65107">Generic Events</a></li>
<li title="Object Specific Events"><a href="gs_chapter4.html#id65547">Object Specific Events</a></li>
<li title="Matching Events Against Object Identifiers"><a href="gs_chapter4.html#id65664">Matching Events Against Object Identifiers</a></li>
<li title="Matching Events Against Object Names"><a href="gs_chapter4.html#id65689">Matching Events Against Object Names</a></li>
<li title="Matching Events Against the Data Field"><a href="gs_chapter4.html#id65716">Matching Events Against the Data Field</a></li>
<li title="Experimenting with Events"><a href="gs_chapter4.html#id65756">Experimenting with Events</a></li>
</ul>
</li>
<li id="loadscrollpos" title="Fonts" expanded="true">Fonts<ul>
<li><a href="gs_chapter5.html">
Top of chapter
</a></li>
<li title="The Font Model"><a href="gs_chapter5.html#id65831">The Font Model</a></li>
</ul>
</li>
<li id="no" title="Default Values" expanded="false">Default Values<ul>
<li><a href="gs_chapter6.html">
Top of chapter
</a></li>
<li title="The Default Value Model"><a href="gs_chapter6.html#id66044">The Default Value Model</a></li>
</ul>
</li>
<li id="no" title="The Packer" expanded="false">The Packer<ul>
<li><a href="gs_chapter7.html">
Top of chapter
</a></li>
<li title="The Packer"><a href="gs_chapter7.html#id66217">The Packer</a></li>
</ul>
</li>
<li id="no" title="Built-In Objects" expanded="false">Built-In Objects<ul>
<li><a href="gs_chapter8.html">
Top of chapter
</a></li>
<li title="Overview"><a href="gs_chapter8.html#id66484">Overview</a></li>
<li title="Generic Options"><a href="gs_chapter8.html#id66791">Generic Options</a></li>
<li title="Window"><a href="gs_chapter8.html#id67843">Window</a></li>
<li title="Button"><a href="gs_chapter8.html#id68226">Button</a></li>
<li title="Label"><a href="gs_chapter8.html#id68734">Label</a></li>
<li title="Frame"><a href="gs_chapter8.html#id68905">Frame</a></li>
<li title="Entry"><a href="gs_chapter8.html#id69050">Entry</a></li>
<li title="Listbox"><a href="gs_chapter8.html#id69366">Listbox</a></li>
<li title="Canvas"><a href="gs_chapter8.html#id70050">Canvas</a></li>
<li title="Menu"><a href="gs_chapter8.html#id72195">Menu</a></li>
<li title="Grid"><a href="gs_chapter8.html#id80608">Grid</a></li>
<li title="Editor"><a href="gs_chapter8.html#id81434">Editor</a></li>
<li title="Scale"><a href="gs_chapter8.html#id82183">Scale</a></li>
</ul>
</li>
</ul>
</div></div>
<div id="content">
<div class="innertube">
<h1>5 Fonts</h1>
<h3><a name="id65831">5.1
The Font Model</a></h3>
<p>Text related objects can be handled with the font option <span class="code">{font,Font}</span>. A <span class="code">Font</span> is represented as a two or three tuple:</p>
<ul>
<li><span class="code">{Family,Size}</span></li>
<li><span class="code">{Family,Style,Size}</span></li>
</ul>
<p>Examples of fonts are: <span class="code">{times,12}</span>, <span class="code">{symbol,bold,18}</span>, <span class="code">{courier,[bold,italic],6}</span>, <span class="code">{screen,12}</span>.</p>
<p>The most important requirement with the font model is to ensure that there is always a "best possible" font present. For example, if an application tries to use the font <span class="code">{times,17}</span> on a computer system which does not have this font available, the <span class="code">gs</span> font model automatically substitutes <span class="code">{times,16}</span>.</p>
<p>Note that GS requires that the following fonts are available if using an X-server display:</p>
<ul>
<li>fixed</li>
<li>-*-courier-*</li>
<li>-*-times-*</li>
<li>-*-helvetica-*</li>
<li>-*-symbol-*</li>
<li>"-*-new century schoolbook-"</li>
<li>-*-screen-*</li>
</ul>
<p>To find out which font is actually chosen by the <span class="code">gs</span>, use the option <span class="code">{choose_font,Font}</span>. For example, the following situation might occur:</p>
<div class="example"><pre>
1> <input>G=gs:start().</input>
{1,<0.20.0>}
2><input>gs:read(G,{choose_font,{times,38}}).</input>
{times,[],38}
3> <input>gs:read(G,{choose_font,{screen,italic,6}}).</input>
{courier,italic,6}
4>
</pre></div>
<p>When programming with fonts, it is often necessary to find the size of a string which uses a specific font. <span class="code">{font_wh,Font}</span> returns the width and height of any string and any font. The following example illustrates its usage:</p>
<a name="gs_fig6"></a>
<img alt="IMAGE MISSING" src="images/ex15.gif"><br>
<em>Figure
5.1:
Font Examples</em>
<div class="example"><pre>
-module(ex15).
-copyright('Copyright (c) 1991-97 Ericsson Telecom AB').
-vsn('$Revision: /main/release/3 $ ').
-export([start/0,init/0]).
start() -> spawn(ex15, init, []).
init() ->
I=gs:start(),
Win=gs:create(window, I,
[{width, 400},{height, 250},
{title,"Font Demo"},{map, true}]),
E = gs:create(canvas, can1,Win,
[{x,0},{y, 0},{width,400},{height,250}]),
Fonts = [{times,19},{screen,16},{helvetica,bold,21},
{symbol,12},{times,[bold,italic],33},{courier,6}],
show_fonts_in_boxes(Fonts,0),
receive
{gs,_Id,destroy,_Data,_Arg} -> bye
end.
show_fonts_in_boxes([],_) -> done;
show_fonts_in_boxes([Font|Fonts],Y) ->
Txt = io_lib:format("Hi! ~p",[Font]),
{Width,Height} = gs:read(can1,{font_wh,{Font,Txt}}),
Y2=Y+Height+2,
gs:create(rectangle,can1,[{coords,[{0,Y},{Width,Y2}]}]),
gs:create(text,can1,[{font,Font},{text,Txt},{coords,[{0,Y+1}]}]),
show_fonts_in_boxes(Fonts,Y2+1).
</pre></div>
</div>
<div class="footer">
<hr>
<p>Copyright © 1997-2012 Ericsson AB. All Rights Reserved.</p>
</div>
</div>
</div></body>
</html>
