Previous Chapter
Next Chapter
Table of Contents
Index

   Attributes

The Graphical Text Tags


The Gtext or graphical text tags are used in the same way as the RXML tags. These tags can be used to render texts on-the-fly and to create pleasing banners and headers. The advantage of Gtext is that it lets you write graphical text, without using Photoshop or any other image editor. The graphical text tags allow for many special effects like rotating the text or displaying it with a shadow behind it or as if it was glowing. These tags use the Pike image module to render any text as gifs.

The following is a presentation in alphabetical order of the Gtext tags available in Roxen. We strongly recommend you to play around with the tags to see what they do.

Attributes

background=filename
Uses the specified file as a background image. Currently only PPM images are supported (cf image maps). Note that the whole filename must be specified.

The following markup:

<gtext background=/home/per/pics/sky.ppm>
Black text on a sky background</gtext>

displays as:

Black text on a 
sky background

bevel=width
Draws a bevel-box around the text.

<gtext 3 bg=grey notrans bevel=3>
3 pixel bevel-box </gtext>

will display as:

3 pixel bevel-box

pressed
A modifier to bevel, draws the bevel as if it was pressed down.

<gtext 3 pressed bg=grey notrans bevel=3>
3 pixel bevel-box</gtext>

will dislay as:

3 pixel bevel-box

magic
The magic modifier combines the two options above. In other words it draws a bevel-box around the text as well as making it look as if it was pressed down.

<gtext 3 magic bg=grey notrans bevel=3>3 pixel
<gtext 3 magic bg=grey notrans bevel=3>
3 pixel bevel-box</gtext>

will display as:

3 pixel bevel-box

bg=color
Sets the background color. Default is taken from the body tag.

<gtext notrans bg=pink>Pink</gtext>
<gtext notrans bg=yellow>yellow</gtext>
<gtext notrans bg=red>red</gtext>

On a white background this will display as:

pink yellow %50,0,100,0


Note that the background color will not take effect unless you add the notrans attribute.

border=width,color
Draws a border around the image.

<gtext 2 quant=100 border=2,green>
Green border</gtext>

will display:

Green border

bshadow=distance
Draws a blurred black drop-shadow behind the text. Using 0 as distance currently does not place the shadow directly below the text. Using negative values for distance is possible, but you might have to add spacing.

<gtext 2 fg=darkblue quant=200
bshadow=1>Welcome!</gtext>
<gtext 2 fg=darkblue quant=200
bshadow=3>Welcome!</gtext>

will display as:

Welcome!
Welcome!

For information on quant see quant.

chisel.
Makes the text look like it has been cut into the background.

<gtext quant=200 ypad=-40% xpad=-20%
chisel talign=center
opaque=70 fg=gold bevel=2
background=/home/per/pics/wood.ppm>
Woodcut opaque=70</gtext>

For information on opaque see opaque.

Cut in wood

crop
Removes all white-space around the image.

fg=color
Sets the text color. Default is taken from the body tag, if any.

<gtext fg=green>Moonwalk</gtext>

will show as:

Moonwalk


Notice that the gtext tag defaults some values. If, for example, you include:

<body bgcolor=white>
Roxen will automatically add the link and text attributes like this:
<body bgcolor="#ffffff" alink="#ff0000"
link="#0000ee" text="#000000" vlink="#551a8b">

fs
Applies a floyd-steinberg dithering to the result. Most of the time it is much better to increase the number of colors, instead of dithering the image, but sometimes when using very complex background images dithering can be useful.

ghost=distance,blurfactor,color
Enables you to make a 'ghost text'. Magic coloring does not work with this attribute.

<gtext spacing=2 crop quant=200 ghost=1,1,red>
Ghost text</gtext>

will be rendered as:

Ghost text

<gtext spacing=2 crop quant=200 ghost=1,5,blue>
Ghost text</gtext>

Ghost text

glow=color,amount
Applies a 'glow' filter to the image. It is quite a CPU eater. This attribute looks much better on a dark background, where a real 'glow' effect can be achieved.

<gtext quant=200 glow=red>Glowing text!</gtext>

Glowing text!


help
Typing <gtext help></gtext> will display a list of the common arguments to the gtext tag.

href=url
Links the image to the specified URL. It will also cause the image to be rendered in the link color per default, instead of the text color.

<gtext scale=.7 bg=red notrans href="toc.html">
Table of Contents!</gtext>

Clicking on "Table of Contents" will in this case take us to the Table of Contents.

magic=[message]
magic=[message] is a modifier to href and can be used to, make links more flashy. Note that this attribute does not work with 'split'. This attribute uses the alink color for the highlighting. See example below.

fuzz=[color,amount]
fuzz is a modifier to the magic argument and applies a 'glow' effect to the highlighted image. The defaults are black and 1. Increasing the amount argument will dramatically increase the computation time.

<gtext 2 fuzz=black,5 quant=128
magic=a link to this document href="">
a link to this document</gtext>

will display as:

maxlen=len
Renders len characters of text. The default is set in the configuration interface. This argument is only useful if you want to increase the limit. The default is 300. This is used to safeguard against mistakes like <gh1>..</gh>, which would otherwise parse the whole document.

<gtext maxlen=5>One two three</gtext>

will be rendered as:

One t

Note that 'space' is counted as a character.

nfont=fontname
Selects a font using somewhat more mnemonic font names. You can get a font list by accessing the configuration interface.(under Global variables, Fonts, Default fonts). There are also several modifiers available: bold, italic, black and light.

If the requested version of the font is available, it will be used to render the text, otherwise the closest match will be used.

Examples, using futura:

<gtext nfont=futura light italic>
Light Italic</gtext>

Light Italic

<gtext nfont=futura black italic>
Black Italic</gtext>

 Black Italic

notrans
Prevents the background color from being transparent. The notrans attribute is useful when making 'boxes' of color around the text.

<gtext scale=0.7 bg=red><gtext bg=red></gtext>

for example, will display as:

<gtext bg=red>

while

<gtext scale=0.7 bg=red notrans>
<gtext bg=red notrans></gtext>

will display as:

<gtext bg=red
    notrans>

opaque=opaque%
Sets the 'opaque' value of the color used to draw the text. In the example below, notice how the text color mixes with the two background colors light blue and pink.

<gtext quant=200 3 textbox=100,pink,-11
bg=lightblue notrans opaque=40 fg=black>
This is my text </gtext>

This is my text

outline=color,extra-radius
Draws an outline around the text. Quite useful when combined with textscale.

<gtext quant=200 xspacing=4
textscale=red,red,yellow,yellow outline=black,1>
black, 2 pixels</gtext>

black, 2 pixels

quant=number_of_colors
Quantifies the image with number of colors. The default is set in the configuration interface. Normally around 32. Using a lower number will decrease the image (file) size, but will make the text look more 'edgy'. When using complex backgrounds or image textures, however, more colors are needed. At most 255 colors can be used, and less than 2 is quite useless.

200 colors
20 colors
6 colors
2 colors

rotate=angle,[color]
Rotates the text angle degrees and fills out the newly created space with the specified color.

<gtext align=right rotate=-90>-90 degrees</gtext>
<gtext rotate=20>0 degrees, no color</gtext>
<gtext rotate=-20,pink>-20 degrees, pink</gtext>

-90 degrees 20 degrees, no color -20 degrees, pink

scale=number
Sets the scale of the image. Larger than 1.0 is enlargement.

<gtext scale=1.0> <gtext scale=0.5>

2 3 4 5 6 or 7
Short for scale=num, where num is 1.0/([the argument]*0.6)

<gtext 2> <gtext 4>

scolor=color
Uses this color as the shadow color.

size=xsize,[ysize]
Sets the size of the image, before any scaling is done. If the image is smaller than the text size, the text will be cropped to fit on the right and bottom sides. The same goes for any background image specified. If only xsize is specified, ysize will be set to the same value.

<gtext notrans bg=green fg=white
nfont=16/bookman bold size=100
align=top>100x100</gtext>

100x100

<gtext notrans bg=green fg=white
nfont=bookman bold size=100,20
align=top>100x100</gtext>

100x100

xsize=xsize,ysize=ysize
Sets xsize, and/or ysize. If only one is specified, it is set to the smallest value that will fit the image or the size of the background image. If a background image is selected, it will be set to that value instead. Apart from that, these attributes work just like size=xsize,ysize.


scroll=width,steps,delay
Makes a scrolltext.

<gtext background=/home/per/pics/sky.ppm
scroll=100,4,7>Welcome</gtext>

will display as;

shadow=white-mix,[distance]
Draws a black drop-shadow behind the text. Using 0 as distance, does not currently place the shadow directly behind the text. Using negative values for distance is possible, but you "might" be forced to add spacing to render the text correctly.

<gtext 2 shadow=20,0>Shadow</gtext>

displays:

Shadow

while

<gtext 2 shadow=40,2>Shadow</gtext>

displays:

Shadow

spacing=spacing
Adds this amount of spacing around the text

<gtext spacing=10 2 quant=100
border=1,blue>Spacing=10</gtext>

displays as:

Spacing=10

xspacing=spacing
Adds this amount of spacing to the left and right of the text

<gtext xspacing=20 2 quant=100
border=1,blue>Spacing=20</gtext>

displays as:

Spacing=20

yspacing=spacing
Adds this amount of spacing above and below the text

<gtext yspacing=10 2 quant=100 border=1,blue>Space</gtext>

dislays as:

Space

split
split makes each word into a separate gif image. This can be useful when you are working with a large amount of text and word wrapping is desired.

talign=dir
Aligns the text to the left, right or in the middle.

<table>
<tr><td>
<gtext 4 talign=left>Left justificated text</gtext>
<td><gtext 4 talign=center>
Center justificated text</gtext>
<td><gtext 4 talign=right>
Right justificated text</gtext>
</tr>
</table>

will display as:

Left justificated text Center justificated text Right justificated text

textbox=opaque%,[color,[pad]>
Draws an (optionally transparent) box behind the text. Pad defaults to '0', and is the distance from the edges of the text to the end of the box. Negative pad works.

<gtext 3 textbox=75,blue,14 notrans>
This is my text </gtext>

shows as:

This is my text

<gtext 3 textbox=50,blue,78 notrans>
This is my text</gtext>

shows as:

This is my text

textscale=color,color,color,color
Applies a color filter to the text. The colors are, respectively, upper left, lower left, upper right and lower right. When using textscale we recommend you to increase the quant.

<gtext quant=200 textscale=blue,red,black,darkgreen>
Blue, red, black, darkgreen</gtext>

dislpays as:

Blue, red, black,
darkgreen

texture=filename
Uses the specified file as the texture of the text.

<gtext quant=200
texture=/home/per/pics/wood.ppm>Wood</gtext>

will display as:

Wood

turbulence=frequency,color;freq,col;freq,col
Applies a turbulence filter, and uses it as the background. Experiment with the values to see what they do.

xpad=Xpad%
Increases padding between characters with Xpad%. Negative '%' values can also be used.

<gtext xpad=-30% 3>Roxen </gtext>

dislays:

Roxen

while

<gtext xpad=30% 3>Roxen </gtext>

displays as:

Roxen

ypad=Ypad%
Increases or decreases the distance between the lines.

<gtext ypad=30% 3>Welcome to
Roxen Challenger</gtext>

displays as:

Welcome to
Roxen Challenger

while

<gtext ypad=60% 3>Welcome to
Roxen Challenger</gtext>

displays as:

Welcome to
Roxen Challenger

Previous Chapter
Next Chapter
Table of Contents
Index