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.
- 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:

- bevel=width
- Draws a bevel-box around the text.
|
<gtext 3 bg=grey notrans bevel=3> 3 pixel
bevel-box </gtext>
|
|
|
will display as:
- 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:
- 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:
- 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:
|
|
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:

- 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:

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.
- 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:
|
|
|
|
|
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:
|
|
|

|
<gtext spacing=2 crop quant=200
ghost=1,5,blue> Ghost text</gtext>
|
|
|
- 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>
|
|
|

|
|
- 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:
|
|
|
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>
|
|
|
|
<gtext nfont=futura black italic> Black
Italic</gtext>
|
|
|
- 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:
while |
<gtext scale=0.7 bg=red notrans> <gtext bg=red
notrans></gtext>
|
|
|
will display as:
- 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>
|
|
|
- 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>
|
|
|
- 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.




- 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>
|
|
|
- scale=number
- Sets the scale of the image. Larger than 1.0 is enlargement.
- 2 3 4 5 6 or 7
- Short for scale=num, where num is 1.0/([the argument]*0.6)
- 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>
|
|
|
|
<gtext notrans bg=green fg=white nfont=bookman bold
size=100,20 align=top>100x100</gtext>
|
|
|

- 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:

while |
<gtext 2
shadow=40,2>Shadow</gtext>
|
|
|
displays:
- spacing=spacing
- Adds this amount of spacing around the text
|
<gtext spacing=10 2 quant=100
border=1,blue>Spacing=10</gtext>
|
|
|
displays as:

- 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:
|
|
|

- 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:

- 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:
- 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:
|
<gtext 3 textbox=50,blue,78 notrans> This is my
text</gtext>
|
|
|
shows as:
- 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:
- 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:
- 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:

while |
<gtext xpad=30% 3>Roxen
</gtext>
|
|
|
displays as:
- ypad=Ypad%
- Increases or decreases the
distance between the lines.
|
<gtext ypad=30% 3>Welcome to
Roxen Challenger</gtext>
|
|
|
displays as:

while |
<gtext ypad=60% 3>Welcome to
Roxen Challenger</gtext>
|
|
|
displays as:

|
Previous Chapter
Next Chapter
Table of Contents
Index
| |