Font Style

Learn how the font style attributes work.

• color
• font_family
• font_size
• align
• font_style
• font_weight
• font_width
• line_height
• max_lines
• letter_spacing
• word_spacing
• decoration
• decoration_style
• decoration_color
• text_shadow
• text_overflow

color

The color attribute let's you specify the color of the text.

You can learn about the syntax of this attribute in Color Syntax.

Example:

#![allow(unused)]
fn main() {
fn app(cx: Scope) -> Element {
    render!(
        label {
            color: "green",
            "Hello, World!"
        }
    )
}
}

Another example showing inheritance:

#![allow(unused)]
fn main() {
fn app(cx: Scope) -> Element {
    render!(
        rect {
            color: "blue",
            label {
                "Hello, World!"
            }
        }
    )
}

}

Compatible elements: label, paragraph, text

font_family

With the font_family you can specify what font do you want to use for the inner text.

Example:

#![allow(unused)]
fn main() {
fn app(cx: Scope) -> Element {
    render!(
        label {
            font_family: "Inter",
            "Hello, World!"
        }
    )
}
}

You can also specify multiple fonts in order of priority, if one is not found it will fallback to the next one.

Example:

#![allow(unused)]
fn main() {
fn app(cx: Scope) -> Element {
    render!(
        label {
            font_family: "DoesntExist Font, Impact",
            "Hello, World!"
        }
    )
}
}

Compatible elements: label, paragraph,

font_size

You can specify the size of the text using font_size.

Example:

#![allow(unused)]
fn main() {
fn app(cx: Scope) -> Element {
    render!(
        label {
            font_size: "50",
            "Hellooooo!"
        }
    )
}
}

Compatible elements: label, paragraph, text

align

You can change the alignment of the text using the align attribute.

Accepted values: center, end, justify, left, right, start

Example

#![allow(unused)]
fn main() {
fn app(cx: Scope) -> Element {
    render!(
        label {
            align: "right",
            "Hello, World!"
        }
    )
}
}

Compatible elements: label, paragraph,

font_style

You can choose a style for a text using the font_style attribute.

Accepted values: upright (default), italic and oblique.

Example:

#![allow(unused)]
fn main() {
fn app(cx: Scope) -> Element {
    render!(
        label {
            font_style: "italic",
            "Hello, World!"
        }
    )
}
}

Compatible elements: text, label.

font_weight

You can choose a weight for a text using the font_weight attribute.

Accepted values:

• invisible
• thin
• extra-light
• light
• normal (default)
• medium
• semi-bold
• bold
• extra-bold
• black
• extra-black
• 50
• 100
• 200
• 300
• 400
• 500
• 600
• 700
• 800
• 900
• 950

Example:

#![allow(unused)]
fn main() {
fn app(cx: Scope) -> Element {
    render!(
        label {
            font_weight: "bold",
            "Hello, World!"
        }
    )
}
}

Compatible elements: text, label.

font_width

You can choose a width for a text using the font_width attribute.

Accepted values:

• ultra-condensed
• extra-condensed
• condensed
• normal (default)
• semi-expanded
• expanded
• extra-expanded
• ultra-expanded

Example:

#![allow(unused)]
fn main() {
fn app(cx: Scope) -> Element {
    render!(
        label {
            font_weight: "bold",
            "Hello, World!"
        }
    )
}
}

Compatible elements: text, label.

line_height

Specify the height of the lines of the text.

Example:

#![allow(unused)]
fn main() {
fn app(cx: Scope) -> Element {
    render!(
        label {
            lines_height: "3",
            "Hello, World! \n Hello, again!"
        }
    )
}
}

max_lines

Determines the amount of lines that the text can have. It has unlimited lines by default.

Example:

#![allow(unused)]
fn main() {
fn app(cx: Scope) -> Element {
    render!(
        label {
            "Hello, World! \n Hello, World! \n Hello, world!" // Will show all three lines
        }
        label {
            max_lines: "2",
            "Hello, World! \n Hello, World! \n Hello, world!" // Will only show two lines
        }
    )
}
}

Compatible elements: text, paragraph.

letter_spacing

Specify the spacing between characters of the text.

Example:

#![allow(unused)]
fn main() {
fn app(cx: Scope) -> Element {
    render!(
        label {
            letter_spacing: "10",
            "Hello, World!"
        }
    )
}
}

Compatible elements: text, paragraph, label.

word_spacing

Specify the spacing between words of the text.

Example:

#![allow(unused)]
fn main() {
fn app(cx: Scope) -> Element {
    render!(
        label {
            word_spacing: "10",
            "Hello, World!"
        }
    )
}
}

Compatible elements: text, paragraph, label.

decoration

Specify the decoration in a text.

Accpted values:

• underline
• line-through
• overline

Example:

#![allow(unused)]
fn main() {
fn app(cx: Scope) -> Element {
    render!(
        label {
            decoration: "line-through",
            "Hello, World!"
        }
    )
}
}

Compatible elements: text, paragraph, label.

decoration_style

Specify the decoration's style in a text.

Accpted values:

• solid (default)
• double
• dotted
• dashed
• wavy

Example:

#![allow(unused)]
fn main() {
fn app(cx: Scope) -> Element {
    render!(
        label {
            decoration: "line-through",
            decoration_style: "dotted",
            "Hello, World!"
        }
    )
}
}

Compatible elements: text, paragraph, label.

decoration_color

Specify the decoration's color in a text.

You can learn about the syntax of this attribute in Color Syntax.

Example:

#![allow(unused)]
fn main() {
fn app(cx: Scope) -> Element {
    render!(
        label {
            decoration: "line-through",
            decoration_color: "orange",
            "Hello, World!"
        }
    )
}
}

Compatible elements: text, paragraph, label.

text_shadow

Specify the shadow of a text.

Syntax: <x> <y> <size> <color>

Example:

#![allow(unused)]
fn main() {
fn app(cx: Scope) -> Element {
    render!(
        label {
            text_shadow: "0 18 12 rgb(0, 0, 0)",
            "Hello, World!"
        }
    )
}
}

Compatible elements: text, label.

text_overflow

Determines how text is treated when it exceeds its max_lines count. By default uses the clip mode, which will cut off any overflowing text, with ellipsis mode it will show ... at the end.

Accepted values:

• clip (default)
• ellipsis

Example:

#![allow(unused)]
fn main() {
fn app(cx: Scope) -> Element {
    render!(
        label {
            max_lines: "3",
            text_overflow: "ellipsis",
            "Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text"
        }
    )
}
}

Compatible elements: label, paragraph.