Changing Text Font Attributes

Author: Carl Sassenrath
This example requires REBOL/View
Return to REBOL Cookbook

A programmer wanted to know how to change font attributes dynamically within a REBOL layout. For example, how can the program change the color, style, or size of a font without affecting other text that uses the same style?

For example, if you write:

    out: layout [
        tl1: text "This is a text line"
        tl2: text "This is a second text line"
        button "Red" [
            tl1/font/color: red
            show out
        ]
    ]
    view out

when you click on the button, the first line will turn red. But, the second line also turns red! Why?

The reason is that both lines get their font attributes from the same font object, so when you modify the font object for one, you modify it for both.

There are three ways to solve this problem:

1. You can specify a color for each line, which makes unique font attribute objects each time:

    out: layout [
        tl1: text black "This is a text line"
        tl2: text black "This is a second text line"
        button "Red" [
            tl1/font/color: red
            show out
        ]
    ]
    view out

In this example, tl1 and tl2 specify a color, which causes the system to copy the font object, giving each one a unique font object (and not sharing it between them).

2. You can make a new font attribute object when you know that you want to change the color of the text:

    out: layout [
        tl1: text "This is a text line"
        tl2: text "This is a second text line"
        button "Red" [
            tl1/font: make tl1/font [color: red]
            show out
        ]
    ]
    view out

This has the advantage of inheriting the other attributes (style, size, name, etc.) of the font and just changing the color. There is also a function that can be used to do this called SET-FONT. It can be used to set any of the font attributes in the proper manner:

    out: layout [
        tl1: text "This is a text line"
        tl2: text "This is a second text line"
        button "Red" [
            set-font tl1 color red
            show out
        ]
    ]
    view out

(Note that there is also a SET-PARA function that lets you change the paragraph attributes of the text.)

3. You can create a separate font object, and set it to the text:

    out: layout [
        tl1: text "This is a text line"
        tl2: text "This is a second text line"
        button "Red" [
            tl1/font: red-font
            show out
        ]
    ]
    red-font: make tl1/font [color: red]
    view out

This is the most efficient of the three choices, because it only needs to make one extra font object (the one for red).

Here is an example that changes a few other font attributes in a similar way.

    out: layout [
        tl1: text 120x24 "This is a text line"
        tl2: text "This is a second text line"
        button "Red" [
            tl1/font: red-font
            show out
        ]
        button "Bold Blue" [
            tl1/font: bold-blue-font
            show out
        ]
        button "Big Green" [
            tl1/font: big-green-font
            show out
        ]
        button "Normal" [
            tl1/font: normal-font
            show out
        ]
    ]
  normal-font: make tl1/font []
    red-font: make tl1/font [color: red]
    bold-blue-font: make tl1/font [color: blue style: 'bold]
    big-green-font: make tl1/font [color: 0.80.0 size: 20]
    view out

Note that to fit the big green font, the size of the text was made larger so it could be seen.

Points to Remember

This method of changing the font attributes object also applies to the paragraph, edge, and feel variables of a face object. Each of these variables are objects which are shared between many faces. This is done to save memory for frequently used styles, but it requires that you keep in mind this method if you want to change them. To see all the variables of a standard REBOL face object, type: ? face at the prompt (in a more recent version of REBOL/View, not REBOL/Core). To see the variables of a REBOL VID (Visual Interface Dialect) face object: ? system/view/vid/vid-face This object is based on the standard face, but expanded to provide a range of VID features.