comparison toolboxes/graph_visualisation/share/graphviz/doc/html/info/shapes.html @ 0:e9a9cd732c1e tip

first hg version after svn
author wolffd
date Tue, 10 Feb 2015 15:05:51 +0000
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:e9a9cd732c1e
1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
2 <!--
3 This is a generated document. Do not edit.
4 -->
5 <HTML VERSION="2.0">
6 <HEAD>
7 <TITLE>Node Shapes</TITLE>
8 </HEAD>
9 <BODY BGCOLOR=white>
10 <A NAME="top"></A>
11 <H1 align=CENTER>Node Shapes</H1>
12 <HR>
13 The geometries of all node shapes are affected by
14 the node attributes
15 <A HREF=attrs.html#d:fixedsize><TT>fixedsize</TT></A>,
16 <A HREF=attrs.html#d:fontname><TT>fontname</TT></A>,
17 <A HREF=attrs.html#d:fontsize><TT>fontsize</TT></A>,
18 <A HREF=attrs.html#d:height><TT>height</TT></A>,
19 <A HREF=attrs.html#d:label><TT>label</TT></A>,
20 <A HREF=#d:style><TT>style</TT></A> and
21 <A HREF=attrs.html#d:width><TT>width</TT></A>.
22
23 <H2><A NAME=polygon>Polygon-based Nodes</A></H2>
24 The possible polygon-based shapes are displayed below.
25 <TABLE ALIGN=CENTER>
26 <TR ALIGN=CENTER>
27 <TD><IMG SRC=box.gif>
28 <TD><IMG SRC=polygon.gif>
29 <TD><IMG SRC=ellipse.gif>
30 <TD><IMG SRC=circle.gif>
31 </TR>
32 <TR ALIGN=CENTER>
33 <TD><A NAME=d:box>box</A>
34 <TD><A NAME=d:polygon>polygon</A>
35 <TD><A NAME=d:ellipse>ellipse</A>
36 <TD><A NAME=d:circle>circle</A>
37 </TR>
38 <TR ALIGN=CENTER>
39 <TD><IMG SRC=point.gif>
40 <TD><IMG SRC=egg.gif>
41 <TD><IMG SRC=triangle.gif>
42 <TD><IMG SRC=plaintext.gif>
43 </TR>
44 <TR ALIGN=CENTER>
45 <TD><A NAME=d:point>point</A>
46 <TD><A NAME=d:egg>egg</A>
47 <TD><A NAME=d:triangle>triangle</A>
48 <TD><A NAME=d:plaintext>plaintext</A>
49 </TR>
50 <TR ALIGN=CENTER>
51 <TD><IMG SRC=diamond.gif>
52 <TD><IMG SRC=trapezium.gif>
53 <TD><IMG SRC=parallelogram.gif>
54 <TD><IMG SRC=house.gif>
55 </TR>
56 <TR ALIGN=CENTER>
57 <TD><A NAME=d:diamond>diamond</A>
58 <TD><A NAME=d:trapezium>trapezium</A>
59 <TD><A NAME=d:parallelogram>parallelogram</A>
60 <TD><A NAME=d:house>house</A>
61 </TR>
62 <TR ALIGN=CENTER>
63 <TD><IMG SRC=pentagon.gif>
64 <TD><IMG SRC=hexagon.gif>
65 <TD><IMG SRC=septagon.gif>
66 <TD><IMG SRC=octagon.gif>
67 </TR>
68 <TR ALIGN=CENTER>
69 <TD><A NAME=d:pentagon>pentagon</A>
70 <TD><A NAME=d:hexagon>hexagon</A>
71 <TD><A NAME=d:septagon>septagon</A>
72 <TD><A NAME=d:octagon>octagon</A>
73 </TR>
74 <TR ALIGN=CENTER>
75 <TD><IMG SRC=doublecircle.gif>
76 <TD><IMG SRC=doubleoctagon.gif>
77 <TD><IMG SRC=tripleoctagon.gif>
78 <TD><IMG SRC=invtriangle.gif>
79 </TR>
80 <TR ALIGN=CENTER>
81 <TD><A NAME=d:doublecircle>doublecircle</A>
82 <TD><A NAME=d:doubleoctagon>doubleoctagon</A>
83 <TD><A NAME=d:tripleoctagon>tripleoctagon</A>
84 <TD><A NAME=d:invtriangle>invtriangle</A>
85 </TR>
86 <TR ALIGN=CENTER>
87 <TD><IMG SRC=invtrapezium.gif>
88 <TD><IMG SRC=invhouse.gif>
89 <TD><IMG SRC=Mdiamond.gif>
90 <TD><IMG SRC=Msquare.gif>
91 </TR>
92 <TR ALIGN=CENTER>
93 <TD><A NAME=d:invtrapezium>invtrapezium</A>
94 <TD><A NAME=d:invhouse>invhouse</A>
95 <TD><A NAME=d:Mdiamond>Mdiamond</A>
96 <TD><A NAME=d:Msquare>Msquare</A>
97 </TR>
98 <TR ALIGN=CENTER>
99 <TD><IMG SRC=Mcircle.gif>
100 <TD><IMG SRC=rect.gif>
101 <TD><IMG SRC=rectangle.gif>
102 <TD><IMG SRC=none.gif>
103 </TR>
104 <TR ALIGN=CENTER>
105 <TD><A NAME=d:Mcircle>Mcircle</A>
106 <TD><A NAME=d:rect>rect</A>
107 <TD><A NAME=d:rectangle>rectangle</A>
108 <TD><A NAME=d:none>none</A>
109 </TR>
110 <TR ALIGN=CENTER>
111 <TD><IMG SRC=note.gif>
112 <TD><IMG SRC=tab.gif>
113 <TD><IMG SRC=folder.gif>
114 <TD><IMG SRC=box3d.gif>
115 </TR>
116 <TR ALIGN=CENTER>
117 <TD><A NAME=d:note>note</A>
118 <TD><A NAME=d:tab>tab</A>
119 <TD><A NAME=d:folder>folder</A>
120 <TD><A NAME=d:box3d>box3d</A>
121 </TR>
122 <TR ALIGN=CENTER>
123 <TD><IMG SRC=component.gif>
124 </TR>
125 <TR ALIGN=CENTER>
126 <TD><A NAME=d:component>component</A>
127 </TR>
128 </TABLE>
129 As the figures suggest, the shapes <TT>rect</TT> and <TT>rectangle</TT> are synonyms for <TT>box</TT>, and <TT>none</TT> is a synonym for <TT>plaintext</TT>.
130 Also, unlike the rest, we have shown these last two
131 without <TT>style=filled</TT>
132 to indicate the normal use. If fill were turned on, the label text would
133 appear in a filled rectangle.
134 <P>
135 The geometries of polygon-based shapes are also affected
136 by the node attributes
137 <A HREF=attrs.html#d:regular><TT>regular</TT></A>,
138 <A HREF=attrs.html#d:peripheries><TT>peripheries</TT></A> and
139 <A HREF=attrs.html#d:orientation><TT>orientation</TT></A>.
140 If <TT>shape="polygon"</TT>, the attributes
141 <A HREF=attrs.html#d:sides><TT>sides</TT></A>,
142 <A HREF=attrs.html#d:skew><TT>skew</TT></A> and
143 <A HREF=attrs.html#d:distortion><TT>distortion</TT></A> are also used.
144 If unset, they default to 4, 0.0 and 0.0, respectively.
145 In addition, the 3 M* shapes support auxiliary labels using
146 the <A HREF=attrs.html#d:toplabel><TT>toplabel</TT></A> and
147 <A HREF=attrs.html#d:bottomlabel><TT>bottomlabel</TT></A> attributes.
148 On the other hand, the point shape is special in that it is
149 only affected by the <A HREF=attrs.html#d:peripheries><TT>peripheries</TT></A>,
150 <A HREF=attrs.html#d:width><TT>width</TT></A> and
151 <A HREF=attrs.html#d:height><TT>height</TT></A> attributes.
152
153 <H2><A NAME=record>Record-based Nodes</A></H2>
154 These are specified by shape values of "record" and "Mrecord".
155 The structure of a record-based node is determined by
156 its <A HREF=attrs.html#d:label><TT>label</TT></A>,
157 which has the following schema:
158 <TABLE>
159 <TR><TD ALIGN=right><I>rlabel</I><TD>=<TD><I>field</I> ( '|' <I>field</I> )*</TR>
160 <TR><TD ALIGN=right>where <I>field</I><TD>=<TD>fieldId</I> or '{' <I>rlabel</I> '}'</TR>
161 <TR><TD ALIGN=right>and <I>fieldId</I><TD>=<TD> [ '<' <I>string</I> '>'] [ <I>string</I> ]</TR>
162 </TABLE>
163 Literal braces, vertical bars and angle brackets must be escaped.
164 Spaces are interpreted as separators between tokens,
165 so they must be escaped if you want spaces in the text.
166 <P>
167 The first string in <I>fieldId</I> assigns a portname to the field and can
168 be combined with the node name to indicate where to attach an edge
169 to the node. (See <A HREF=attrs.html#k:portPos>portPos</A>.)
170 The second string is used as the text for the field; it supports the usual
171 <A HREF=attrs.html#k:escString>escape sequences</A> \n, \l and \r.
172 <P>
173 Visually, a record is a box, with fields represented by alternating
174 rows of horizontal or vertical subboxes. The Mrecord shape is identical
175 to a record shape, except that the outermost box has rounded corners.
176 Flipping between horizontal and vertical layouts is done by nesting
177 fields in braces "{...}". The top-level orientation in a record is
178 horizontal. Thus, a record with label "A | B | C | D" will have 4 fields
179 oriented left to right, while "{A | B | C | D}" will have them
180 from top to bottom and "A | { B | C } | D" will have "B" over "C", with
181 "A" to the left and "D" to the right of "B" and "C".
182 <P>
183 The initial orientation of a record node depends on the
184 <A HREF="attrs.html#d:rankdir">rankdir</A> attribute. If this attribute
185 is <TT>TB</TT> (the default) or <TT>TB</TT>, corresponding to vertical
186 layouts, the top-level fields in a record are displayed horizontally.
187 If, however, this attribute is <TT>LR</TT> or <TT>RL</TT>,
188 corresponding to horizontal layouts, the top-level fields are
189 displayed vertically.
190 <P>
191 As an example of a record node, the dot input
192 <XMP>
193 digraph structs {
194 node [shape=record];
195 struct1 [label="<f0> left|<f1> mid\ dle|<f2> right"];
196 struct2 [label="<f0> one|<f1> two"];
197 struct3 [label="hello\nworld |{ b |{c|<here> d|e}| f}| g | h"];
198 struct1:f1 -> struct2:f0;
199 struct1:f2 -> struct3:here;
200 }
201 </XMP>
202
203 yields the figure<BR>
204 <IMG SRC=record.gif>
205 <P>
206 If we add the line
207 <XMP>
208 rankdir=LR
209 </XMP>
210 we get the layout<BR>
211 <IMG SRC=record2.gif>
212 <P>
213 If we change node <TT>struct1</TT> to have shape <TT>Mrecord</TT>,
214 it then looks like:<BR>
215 <IMG SRC=mrecord.gif>
216
217 <H2><A NAME="d:style">Styles for Nodes</A></H2>
218 The <A HREF=attrs.html#d:style><TT>style</TT></A>
219 attribute can be used to modify the appearance of a node.
220 At present, there are 8 style values recognized:
221 <TT>filled</TT>, <TT>invisible</TT>, <TT>diagonals</TT>, <TT>rounded</TT>.
222 <TT>dashed</TT>, <TT>dotted</TT>, <TT>solid</TT> and <TT>bold</TT>.
223 As usual, the value of the <A HREF=attrs.html#d:style><TT>style</TT></A>
224 attribute can be a comma-separated list of any of these. If the
225 style contains conflicts (e.g, <TT>style="dotted, solid"</TT>), the last
226 attribute wins.
227 <DL>
228 <DT><A NAME=d:filled><TT>filled</TT>
229 <DD>This value indicates that the node's interior should be filled.
230 The color used is the node's <TT>fillcolor</TT> or, if that's not defined, its
231 <TT>color</TT>. For unfilled nodes, the interior of the node is transparent to
232 whatever color is the current graph or cluster background color.
233 Note that <TT>point</TT> shapes are always filled.
234 <P>
235 Thus, the code
236 <XMP>
237 digraph G {
238 rankdir=LR
239 node [shape=box, color=blue]
240 node1 [style=filled]
241 node2 [style=filled, fillcolor=red]
242 node0 -> node1 -> node2
243 }
244 </XMP>
245 yields the figure<BR>
246 <IMG SRC=fill.gif>
247
248 <DT><A NAME=d:invisible><TT>invisible</TT>
249 <DD>Setting this style causes the node not to be displayed at all.
250 Note that the node is still used in laying out the graph.
251
252 <DT><A NAME=d:diagonals><TT>diagonals</TT>
253 <DD>The diagonals style causes small chords to be drawn near the vertices
254 of the node's polygon or, in case of circles and ellipses, two chords near
255 the top and the bottom of the shape. The special node shapes
256 <A HREF=#d:Msquare><TT>Msquare</TT></A>,
257 <A HREF=#d:Mcircle><TT>Mcircle</TT></A>, and
258 <A HREF=#d:Mdiamond><TT>Mdiamond</TT></A>
259 are simply an ordinary square, circle and
260 diamond with the diagonals style set.
261
262 <DT><A NAME=d:rounded><TT>rounded</TT>
263 <DD>The rounded style causes the polygonal corners to be smoothed.
264 Note that this style also applies to record-based nodes. Indeed,
265 the <TT>Mrecord</TT> shape is simply shorthand for setting this style.
266 Also, prior to 26 April 2005, the rounded and filled styles were
267 mutually exclusive.
268 <P>
269 As an example of rounding, dot uses the graph
270 <XMP>
271 digraph R {
272 rankdir=LR
273 node [style=rounded]
274 node1 [shape=box]
275 node2 [fillcolor=yellow, style="rounded,filled", shape=diamond]
276 node3 [shape=record, label="{ a | b | c }"]
277
278 node1 -> node2 -> node3
279 }
280 </XMP>
281 to produce the figure<BR>
282 <IMG SRC=round.gif>
283 <DT><A NAME=d:dashed><TT>dashed</TT>
284 <DD>This style causes the node's border to be drawn as a dashed line.
285 <DT><A NAME=d:dotted><TT>dotted</TT>
286 <DD>This style causes the node's border to be drawn as a dotted line.
287 <DT><A NAME=d:solid><TT>solid</TT>
288 <DD>This style causes the node's border to be drawn as a solid line,
289 which is the default.
290 <DT><A NAME=d:bold><TT>bold</TT>
291 <DD>This style causes the node's border to be drawn as a bold line.
292 See also <A HREF=attrs.html#d:setlinewidth>setlinewidth</A>.
293
294 </DL>
295
296 <P>
297 Additional styles may be available with a specific code generator.
298 <H2><A NAME=html>HTML-Like Labels</A></H2>
299
300 <B>NOTE:</B><EM>This feature is only available on versions of Graphviz
301 that are newer than mid-November 2003. In particular, it is not part
302 of release 1.10.</EM>
303 <P>
304 If the value of a label attribute
305 (<A HREF=attrs.html#d:label><TT>label</TT></A> for nodes, edges, clusters, and
306 graphs, and the
307 <A HREF=attrs.html#d:headlabel><TT>headlabel</TT></A> and
308 <A HREF=attrs.html#d:taillabel><TT>taillabel</TT></A>
309 attributes of an edge) is given as an
310 <A HREF=lang.html#html>HTML string</A>,
311 that is, delimited by <TT>&lt;...&gt;</TT>
312 rather than <TT>&quot;...&quot;</TT>,
313 the label is interpreted as
314 an HTML description. At their simplest, such labels
315 can describe multiple lines of variously aligned text as provided by ordinary
316 <A HREF=attrs.html#k:escString>string labels</A>. More generally, the
317 label can specify a table similar to those provided by HTML,
318 with different graphical attributes at each level.
319 <P>
320 <B>NOTE:</B> The features and syntax supported by these labels are
321 modeled on HTML. However, there are many aspects that are relevant
322 to Graphviz labels that are not in HTML and, conversely, HTML allows
323 various constructs which are meaningless in Graphviz. We will generally
324 refer to these labels as "HTML labels" rather than the cumbersome
325 "HTML-like labels" but the reader is warned that these are not really
326 HTML. The grammar below describes precisely what Graphviz will accept.
327 <P>
328 Although HTML labels are not, strictly speaking, a shape, they can be
329 viewed as a generalization of the record shapes described above.
330 In particular, if a node has set its
331 <A HREF=attrs.html#k:shape><TT>shape</TT></A>
332 attribute to <TT>plaintext</TT>, the HTML label will be the node's
333 shape. On the other hand, if the node has any other shape (except
334 <TT>point</TT>), the HTML label will be embedded within the node the
335 same way an ordinary label would be.
336 <P>
337 The following is an abstract grammar for HTML labels.
338 Terminals, corresponding to elements, are shown in bold font,
339 and nonterminals in italics.
340 Square brackets [ and ] enclose optional items.
341 Vertical bars | separate alternatives.
342 Note that, as in HTML, element and attribute names are case-insensitive.
343 (cf. sections 3.2.1 and 3.2.2 of the
344 <A HREF="http://www.w3.org/TR/html401">HTML 4.01 specification</A>).
345 <TABLE>
346 <TR>
347 <TD ALIGN=RIGHT><I>label</I></TD>
348 <TD ALIGN=LEFT>:</TD>
349 <TD ALIGN=LEFT><I>text</I></TD>
350 </TR>
351 <TR>
352 <TD ALIGN=RIGHT></TD>
353 <TD ALIGN=LEFT>|</TD>
354 <TD ALIGN=LEFT><I>table</I></TD>
355 </TR>
356 <TR>
357 <TD ALIGN=RIGHT><I>text</I></TD>
358 <TD ALIGN=LEFT>:</TD>
359 <TD ALIGN=LEFT><I>textitem</I></TD>
360 </TR>
361 <TR>
362 <TD ALIGN=RIGHT></TD>
363 <TD ALIGN=LEFT>|</TD>
364 <TD ALIGN=LEFT><I>text</I> <I>textitem</I></TD>
365 </TR>
366 <TR>
367 <TD ALIGN=RIGHT><I>textitem</I></TD>
368 <TD ALIGN=LEFT>:</TD>
369 <TD ALIGN=LEFT><I>string</I></TD>
370 </TR>
371 <TR>
372 <TD ALIGN=RIGHT></TD>
373 <TD ALIGN=LEFT>|</TD>
374 <TD ALIGN=LEFT><B>&lt;BR/&gt;</B></TD>
375 </TR>
376 <TR>
377 <TD ALIGN=RIGHT></TD>
378 <TD ALIGN=LEFT>|</TD>
379 <TD ALIGN=LEFT><B>&lt;FONT&gt;</B> <I>text</I> <B>&lt;/FONT&gt;</B></TD>
380 </TR>
381 <TR>
382 <TD ALIGN=RIGHT><I>table</I></TD>
383 <TD ALIGN=LEFT>:</TD>
384 <TD ALIGN=LEFT>[ <B>&lt;FONT&gt;</B> ] <B>&lt;TABLE&gt;</B> <I>rows</I> <B>&lt;/TABLE&gt;</B> [ <B>&lt;/FONT&gt;</B> ]</TD>
385 </TR>
386 <TR>
387 <TD ALIGN=RIGHT><I>rows</I></TD>
388 <TD ALIGN=LEFT>:</TD>
389 <TD ALIGN=LEFT><I>row</I></TD>
390 </TR>
391 <TR>
392 <TD ALIGN=RIGHT></TD>
393 <TD ALIGN=LEFT>|</TD>
394 <TD ALIGN=LEFT><I>rows</I> <I>row</I></TD>
395 </TR>
396 <TR>
397 <TD ALIGN=RIGHT><I>row</I></TD>
398 <TD ALIGN=LEFT>:</TD>
399 <TD ALIGN=LEFT><B>&lt;TR&gt;</B> <I>cells</I> <B>&lt;/TR&gt;</B></TD>
400 </TR>
401 <TR>
402 <TD ALIGN=RIGHT><I>cells</I></TD>
403 <TD ALIGN=LEFT>:</TD>
404 <TD ALIGN=LEFT><I>cell</I></TD>
405 </TR>
406 <TR>
407 <TD ALIGN=RIGHT></TD>
408 <TD ALIGN=LEFT>|</TD>
409 <TD ALIGN=LEFT><I>cells</I> <I>cell</I></TD>
410 </TR>
411 <TR>
412 <TD ALIGN=RIGHT><I>cell</I></TD>
413 <TD ALIGN=LEFT>:</TD>
414 <TD ALIGN=LEFT><B>&lt;TD&gt;</B> <I>label</I> <B>&lt;/TD&gt;</B></TD>
415 </TR>
416 <TR>
417 <TD ALIGN=RIGHT></TD>
418 <TD ALIGN=LEFT>|</TD>
419 <TD ALIGN=LEFT><B>&lt;TD&gt;</B> <B>&lt;IMG/&gt;</B> <B>&lt;/TD&gt;</B></TD>
420 </TR>
421 </TABLE>
422 <P>
423 Above, a <I>string</I> is any collection of printable characters, including
424 all spaces. Note that outside of the body of a &lt;TD&gt; element,
425 whitespace characters are ignored; within a &lt;TD&gt; element, spaces
426 are preserved but all other white space characters are discarded.
427 HTML comments are allowed within an HTML string. They can occur anywhere
428 provided that, if they contain part of an HTML element, they must contain
429 the entire element.
430 <P>
431 As is obvious from the above description, the interpretation of white space
432 characters is one place where HTML-like labels is very different from
433 standard HTML. In HTML, any sequence of white space characters is
434 collapsed to a single space, If the user does not want this to happen, the
435 input must use non-breaking spaces "&amp;nbsp;". This makes sense in
436 HTML, where text layout depends dynamically on the space available. In
437 Graphviz, the layout is statically determined by the input, so it is
438 reasonable to treat ordinary space characters as non-breaking. In addition,
439 ignoring tabs and newlines allows the input text to be formatted for
440 easier reading.
441 <P>
442 Each of the HTML elements has a set of optional attributes.
443 Attribute values must appear in double quotes.
444 <PRE>&lt;TABLE
445 ALIGN="CENTER|LEFT|RIGHT"
446 BGCOLOR="<I>color</I>"
447 BORDER="<I>value</I>"
448 CELLBORDER="<I>value</I>"
449 CELLPADDING="<I>value</I>"
450 CELLSPACING="<I>value</I>"
451 COLOR="<I>color</I>"
452 FIXEDSIZE="FALSE|TRUE"
453 HEIGHT="<I>value</I>"
454 HREF="<I>value</I>"
455 PORT="<I>portName</I>"
456 TARGET="<I>value</I>"
457 TITLE="<I>value</I>"
458 TOOLTIP="<I>value</I>"
459 VALIGN="MIDDLE|BOTTOM|TOP"
460 WIDTH="<I>value</I>"
461 &gt;
462 </PRE>
463 <P>
464 <PRE>&lt;TR
465 &lt;!-- No attributes --&gt;
466 &gt;
467 </PRE>
468 <P>
469 <PRE>&lt;TD
470 ALIGN="CENTER|LEFT|RIGHT|TEXT"
471 BALIGN="CENTER|LEFT|RIGHT"
472 BGCOLOR="<I>color</I>"
473 BORDER="<I>value</I>"
474 CELLPADDING="<I>value</I>"
475 CELLSPACING="<I>value</I>"
476 COLOR="<I>color</I>"
477 COLSPAN="<I>value</I>"
478 FIXEDSIZE="FALSE|TRUE"
479 HEIGHT="<I>value</I>"
480 HREF="<I>value</I>"
481 PORT="<I>portName</I>"
482 ROWSPAN="<I>value</I>"
483 TARGET="<I>value</I>"
484 TITLE="<I>value</I>"
485 TOOLTIP="<I>value</I>"
486 VALIGN="MIDDLE|BOTTOM|TOP"
487 WIDTH="<I>value</I>"
488 &gt;
489 </PRE>
490
491 <P>
492 <PRE>&lt;FONT
493 COLOR="<I>color</I>"
494 FACE="<I>fontname</I>"
495 POINT-SIZE="<I>value</I>"
496 &gt;
497 </PRE>
498
499 <P>
500 <PRE>&lt;BR
501 ALIGN="CENTER|LEFT|RIGHT"
502 &gt;
503 </PRE>
504
505 <P>
506 <PRE>&lt;IMG
507 SCALE="FALSE|TRUE|WIDTH|HEIGHT|BOTH"
508 SRC="<I>value</I>"
509 &gt;
510 </PRE>
511
512 <P>
513 <B><I><FONT SIZE=-1>ALIGN</FONT> </I></B>
514 <BLOCKQUOTE>
515 specifies horizontal placement. When an object is allocated
516 more space than required, this value determines where the extra space
517 is placed left and right of the object.
518 <P>
519 <ul>
520 <LI>CENTER aligns the object in the center. (Default) </LI>
521 <LI>LEFT aligns the object on the left.</LI>
522 <LI>RIGHT aligns the object on the right. </LI>
523 <LI>(<T>&lt;TD&gt;</T> only) TEXT aligns lines of text using the full
524 cell width. The alignment of a line is determined by its (possibly
525 implicit) associated <T>&lt;BR&gt;</T> element.</LI>
526 </ul>
527 <P>
528 The contents of a cell are normally aligned as a block. In particular,
529 lines of text are first aligned as a text block based on the width of
530 the widest line and the corresponding <T>&lt;BR&gt;</T> elements. Then,
531 the entire text block is aligned within a cell. If, however, the
532 cell's <B><I>ALIGN</I></B> value is <T>"TEXT"</T>, and the cell contains
533 lines of text, then the lines are justified using the entire available
534 width of the cell. If the cell does not contain text, then the contained
535 image or table is centered.
536 </BLOCKQUOTE>
537
538 <B><I><FONT SIZE=-1>BALIGN</FONT> </I></B>
539 <BLOCKQUOTE>
540 specifies the default alignment of <T>&lt;BR&gt;</T> elements contained
541 in the cell. That is, if a <T>&lt;BR&gt;</T> element has no
542 explicit <B><I>ALIGN</I></B> attribute, the attribute value is specified
543 by the value of <B><I>BALIGN</I></B>.
544 </BLOCKQUOTE>
545
546 <B><I><FONT SIZE=-1>BGCOLOR="color"</FONT></I></B>
547 <BLOCKQUOTE>
548 sets the color of the background. This color can be
549 overridden by a <B><I>BGCOLOR</I></B> attribute in descendents.
550 </BLOCKQUOTE>
551
552 <B><I><FONT SIZE=-1>BORDER="value"</FONT></I></B>
553 <BLOCKQUOTE>
554 specifies the width of the border around the object in points.
555 A value of zero indicates no border. The default is 1.
556 The maximum value is 255.
557 If set in a table, and <B><I>CELLBORDER</I></B> is not set,
558 this value is also used for all cells in the table.
559 It can be overridden by a <B><I>BORDER</I></B> tag in a cell.
560 </BLOCKQUOTE>
561
562 <B><I><FONT SIZE=-1>CELLBORDER="value"</FONT></I></B>
563 <BLOCKQUOTE>
564 specifies the width of the border for all cells in a table.
565 It can be overridden by a <B><I>BORDER</I></B> tag in a cell.
566 The maximum value is 255.
567 </BLOCKQUOTE>
568
569 <B><I><FONT SIZE=-1>CELLPADDING="value"</FONT></I></B>
570 <BLOCKQUOTE>
571 specifies the space, in points, between a cell's border and its content.
572 The default is 2.
573 The maximum value is 255.
574 </BLOCKQUOTE>
575
576 <B><I><FONT SIZE=-1>CELLSPACING="value"</FONT></I></B>
577 <BLOCKQUOTE>
578 specifies the space, in points, between cells in a table and between
579 a cell and the table's border. The default is 2.
580 The maximum value is 127.
581 </BLOCKQUOTE>
582
583 <B><I><FONT SIZE=-1>COLOR="color"</FONT></I></B>
584 <BLOCKQUOTE>
585 sets the color of the font within the scope of
586 &lt;FONT&gt;...&lt;/FONT&gt;, or the border color
587 of the table or cell within the scope of
588 &lt;TABLE&gt;...&lt;/TABLE&gt;,
589 or &lt;TD&gt;...&lt;/TD&gt;.
590 This color can be
591 overridden by a <B><I>COLOR</I></B> attribute in descendents.
592 By default, the font color is determined by the
593 <A HREF="attrs.html#:fontcolor">fontcolor</A> attribute of
594 the corresponding node, edge or graph, and the border color
595 is determined by the
596 <A HREF="attrs.html#:color">color</A> attribute of
597 the corresponding node, edge or graph.
598 </BLOCKQUOTE>
599
600 <B><I><FONT SIZE=-1>COLSPAN="value"</FONT></I></B>
601 <BLOCKQUOTE>
602 specifies the number of columns spanned by the cell. The default is 1.
603 The maximum value is 65535.
604 </BLOCKQUOTE>
605
606 <B><I><FONT SIZE=-1>FACE="fontname"</FONT></I></B>
607 <BLOCKQUOTE>
608 specifies the font to use within the scope of
609 &lt;FONT&gt;...&lt;/FONT&gt;.
610 This can be
611 overridden by a <B><I>FACE</I></B> attribute in descendents.
612 By default, the font name is determined by the
613 <A HREF="attrs.html#:fontname">fontname</A> attribute of the corresponding
614 node, edge or graph.
615 </BLOCKQUOTE>
616
617 <B><I><FONT SIZE=-1>FIXEDSIZE</FONT> </I></B>
618 <BLOCKQUOTE>
619 specifies whether the values given by the <B><I>WIDTH</I></B>
620 and <B><I>HEIGHT</I></B> attributes are enforced.
621 <P>
622 <ul>
623 <LI>FALSE allows the object to grow so that all its contents will fit. (Default) </LI>
624 <LI>TRUE fixes the object size to its given <B><I>WIDTH</I></B>
625 and <B><I>HEIGHT</I></B>.
626 Both of these attributes must be supplied.</LI>
627 </ul>
628 </BLOCKQUOTE>
629
630 <B><I><FONT SIZE=-1>HEIGHT="value"</FONT></I></B>
631 <BLOCKQUOTE>
632 specifies the mininum height, in points, of the object. The height
633 includes the contents, any spacing and the border. Unless
634 <B><I>FIXEDSIZE</I></B> is true, the height will be expanded to allow
635 the contents to fit.
636 The maximum value is 65535.
637 </BLOCKQUOTE>
638
639 <B><I><FONT SIZE=-1>HREF="value"</FONT></I></B>
640 <BLOCKQUOTE>
641 attaches a URL to the object.
642 </BLOCKQUOTE>
643
644 <B><I><FONT SIZE=-1>POINT-SIZE="value"</FONT></I></B>
645 <BLOCKQUOTE>
646 sets the size of the font, in points, used within the scope of
647 &lt;FONT&gt;...&lt;/FONT&gt;.
648 This can be
649 overridden by a <B><I>POINT-SIZE</I></B> attribute in descendents.
650 By default, the font size is determined by the
651 <A HREF="attrs.html#:fontsize">fontsize</A> attribute of the corresponding
652 node, edge or graph.
653 </BLOCKQUOTE>
654
655 <B><I><FONT SIZE=-1>PORT="value"</FONT></I></B>
656 <BLOCKQUOTE>
657 attaches a portname to the object.
658 (See <A HREF=attrs.html#k:portPos>portPos</A>.)
659 This can be used to modify the head
660 or tail of an edge, so that the end attaches directly to the object.
661 </BLOCKQUOTE>
662
663 <B><I><FONT SIZE=-1>ROWSPAN="value"</FONT></I></B>
664 <BLOCKQUOTE>
665 specifies the number of rows spanned by the cell. The default is 1.
666 The maximum value is 65535.
667 </BLOCKQUOTE>
668
669 <B><I><FONT SIZE=-1>SCALE</FONT></I></B>
670 <BLOCKQUOTE>
671 specifies how an image will use any extra space available in its cell.
672 Allowed values are
673 <ul>
674 <LI>FALSE : keep image its natural size. (Default) </LI>
675 <LI>TRUE : scale image uniformly to fit.</LI>
676 <LI>WIDTH : expand image width to fill </LI>
677 <LI>HEIGHT : expand image height to fill </LI>
678 <LI>BOTH : expand both image width height to fill </LI>
679 </ul>
680 If this attribute is undefined,
681 the image inherits the <A HREF="attrs.html#d:imagescale">imagescale</A>
682 attribute of the graph object being drawn.
683 As with the <A HREF="attrs.html#d:imagescale">imagescale</A>
684 attribute, if the cell has a fixed size and the image is too large,
685 any offending dimension will be shrunk to fit the space, the
686 scaling being uniform in width and height if <I>SCALE=<TT>"true"</TT></I>.
687 </BLOCKQUOTE>
688
689 <B><I><FONT SIZE=-1>SRC="value"</FONT></I></B>
690 <BLOCKQUOTE>
691 specifies the image file to be displayed in the cell.
692 Note that if the software is used as a web server, file system access
693 to images is more restricted. See <A HREF="#d:GV_FILE_PATH">GV_FILE_PATH</A>
694 and <A HREF="#d:SERVER_NAME">SERVER_NAME</A>.
695 </BLOCKQUOTE>
696
697 <B><I><FONT SIZE=-1>TARGET="value"</FONT></I></B>
698 <BLOCKQUOTE>
699 determines which window of the browser is used for the URL if the object
700 has one.
701 See <A HREF="http://www.w3.org/TR/html401/present/frames.html#adef-target">W3C documentation</A>.
702 </BLOCKQUOTE>
703
704 <B><I><FONT SIZE=-1>TITLE="value"</FONT></I></B>
705 <BLOCKQUOTE>
706 sets the tooltip annotation attached to the element.
707 This is used only if the element has a HREF attribute.
708 </BLOCKQUOTE>
709
710 <B><I><FONT SIZE=-1>TOOLTIP="value"</FONT></I></B>
711 <BLOCKQUOTE>
712 is an alias for <B><I><FONT SIZE=-1>TITLE</FONT></I></B>.
713 </BLOCKQUOTE>
714
715 <P>
716 <B><I><FONT SIZE=-1>VALIGN</FONT> </I></B>
717 <BLOCKQUOTE>
718 specifies vertical placement. When an object is allocated
719 more space than required, this value determines where the extra space
720 is placed above and below the object.
721 <P>
722 <ul>
723 <LI>MIDDLE aligns the object in the center. (Default) </LI>
724 <LI>LEFT aligns the object on the left.</LI>
725 <LI>RIGHT aligns the object on the right. </LI>
726 </ul>
727 </BLOCKQUOTE>
728
729 <B><I><FONT SIZE=-1>WIDTH="value"</FONT></I></B>
730 <BLOCKQUOTE>
731 specifies the mininum width, in points, of the object. The width
732 includes the contents, any spacing and the border. Unless
733 <B><I>FIXEDSIZE</I></B> is true, the width will be expanded to allow
734 the contents to fit.
735 The maximum value is 65535.
736 </BLOCKQUOTE>
737
738 <P>
739 There is some inheritance among the attributes. If a table specifies
740 a <I><B>CELLPADDING</B></I>, <I><B>CELLBORDER</B></I> or <I><B>BORDER</B></I>
741 value, this value is used by the table's
742 cells unless overridden. If a cell or table specifies a <I><B>BGCOLOR</B></I>,
743 this will be the background color for all of its descendents.
744 Of course, if a background or fill color is specified for the
745 graph object owning the label, this will be the original
746 background for the label.
747 The object's fontname, fontcolor and fontsize attributes
748 are the default for drawing text. These can be overridden by using
749 <I><B>FONT</B></I> to set new values. The new font values will hold
750 until overridden by an enclosed <I><B>FONT</B></I> element.
751 Finally, the pencolor or color of the graph object will be used as
752 the border color.
753 <P>
754 Because of certain limitations in handling tables in a device-independent
755 manner, when <I><B>BORDER</B></I> is 1 and both table and cell borders
756 are on and <I><B>CELLSPACING</B></I> is less than 2, anomalies can arise
757 in the output, such as gaps between sides of borders which should be
758 abutting or even collinear. The user can usual get around this by increasing
759 the border size or the spacing, or turning off the table border.
760 <P>
761 As an example of HTML labels, the dot input
762 <XMP>
763 digraph structs {
764 node [shape=plaintext]
765 struct1 [label=<
766 <TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
767 <TR><TD>left</TD><TD PORT="f1">mid dle</TD><TD PORT="f2">right</TD></TR>
768 </TABLE>>];
769 struct2 [label=<
770 <TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
771 <TR><TD PORT="f0">one</TD><TD>two</TD></TR>
772 </TABLE>>];
773 struct3 [label=<
774 <TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0" CELLPADDING="4">
775 <TR>
776 <TD ROWSPAN="3">hello<BR/>world</TD>
777 <TD COLSPAN="3">b</TD>
778 <TD ROWSPAN="3">g</TD>
779 <TD ROWSPAN="3">h</TD>
780 </TR>
781 <TR>
782 <TD>c</TD><TD PORT="here">d</TD><TD>e</TD>
783 </TR>
784 <TR>
785 <TD COLSPAN="3">f</TD>
786 </TR>
787 </TABLE>>];
788 struct1:f1 -> struct2:f0;
789 struct1:f2 -> struct3:here;
790 }
791 </XMP>
792 produces the HTML analogue of the record example above<BR>
793 <IMG SRC=html1.gif>
794 <P>
795 As usual, an HTML specification is more verbose. On the other hand,
796 HTML labels are much more general, as the following example shows:
797 <P>
798 <IMG SRC=html2.gif>
799 <P>
800 The source for this graph can be found <A HREF=html2.dot>here</A>.
801 <P>
802 Here is an example using &lt;FONT&gt; elements
803 <P>
804 <IMG SRC=html3.gif>
805 <P>
806 with the <A HREF=html3.dot>input graph</A>.
807 <P>
808 Here is an example using an &lt;IMG&gt; element
809 <P>
810 <IMG SRC=html4.gif>
811 <P>
812 with the <A HREF=html4.dot>input graph</A>.
813
814 <H2><A NAME=epsf>User-defined Nodes</A></H2>
815
816 There is a third type of node shape which is specified by the user.
817 Typically, these shapes rely on the details of a concrete graphics
818 format. At present, shapes can be described using PostScript, via a
819 file or add-on library, for use in PostScript output, or shapes can
820 be specified by a bitmap-image file for use with SVG or bitmap (jpeg,
821 gif, etc.) output. More information can be found on the page
822 <A HREF="http://www.graphviz.org/Documentation/html/shapehowto.html">
823 How to create custom shapes</A>.
824
825 <H2><A NAME=sdlshapes>SDL Shapes for PostScript</A></H2>
826 One example of user-defined node shapes is provided by Mark Rison of CSR.
827 These are the <A HREF=http://www.sdl-forum.org/SDL/index.htm>SDL</A> shapes.
828 These are available as PostScript functions whose use is described in
829 <A HREF="http://www.graphviz.org/Documentation/html/shapehowto.html#psprocs"> External PostScript procedures</A>.
830 The necessary PostScript library file and sample use can be found in the
831 <tt>contrib/sdlshapes</tt> directory in the release. Please note the
832 COPYRIGHT AND PERMISSION NOTICE contained in the library file <tt>sdl.ps</tt>.
833 <P>
834 The table below
835 gives the shape names and the corresponding node shapes.
836 <IMG SRC=sdlshapes.jpg>
837 </BODY>
838 </HTML>