font

Font styling functions for lustre_stylish.

This module provides functions for styling text, including:

Font families (typeface, serif, sans-serif, monospace)
Font size and color
Text alignment (left, right, center, justify)
Font weight (bold, light, etc.)
Font styles (italic, underline, strike-through)
Letter and word spacing

Example

import lustre_stylish as el
import lustre/stylish/font

el.el([
  font.color(el.rgb(0.0, 0.0, 1.0)),
  font.size(18),
  font.family([font.typeface("Open Sans"), font.sans_serif]),
], el.text("Stylish text!"))

Note: font.color, font.size, and font.family are inherited, meaning you can set them at the top of your view and all subsequent nodes will have that value.

Types

Attribute

</>

An attribute that can be attached to an element.

pub type Attribute(msg) =
  @internal Attribute(@internal Aligned, msg)

Font

</>

A font family specification.

pub type Font =
  @internal Font

Values

align_left

</>

pub const align_left: @internal Attribute(@internal Aligned, msg)

Align text to the left.

align_right

</>

pub const align_right: @internal Attribute(@internal Aligned, msg)

Align text to the right.

bold

</>

pub const bold: @internal Attribute(@internal Aligned, msg)

Font weight 700.

center

</>

pub const center: @internal Attribute(@internal Aligned, msg)

Center text horizontally.

color

</>

pub fn color(
  font_color: stylish.Color,
) -> @internal Attribute(@internal Aligned, msg)

Set the text color.

This is inherited by child elements.

Example

el.el([font.color(el.rgb(1.0, 0.0, 0.0))], el.text("Red text"))

extra_bold

</>

pub const extra_bold: @internal Attribute(@internal Aligned, msg)

Font weight 800.

extra_light

</>

pub const extra_light: @internal Attribute(@internal Aligned, msg)

Font weight 200.

family

</>

pub fn family(
  families: List(Font),
) -> @internal Attribute(@internal Aligned, msg)

Set the font family stack.

This is inherited by child elements. Fonts are tried in order until one is available on the user’s system.

Example

el.el([
  font.family([
    font.typeface("Helvetica Neue"),
    font.typeface("Helvetica"),
    font.sans_serif,
  ])
], el.text("Clean text"))

hairline

</>

pub const hairline: @internal Attribute(@internal Aligned, msg)

Font weight 100 (lightest).

heavy

</>

pub const heavy: @internal Attribute(@internal Aligned, msg)

Font weight 900 (heaviest).

italic

</>

pub const italic: @internal Attribute(@internal Aligned, msg)

Italic text.

justify

</>

pub const justify: @internal Attribute(@internal Aligned, msg)

Justify text to both edges.

letter_spacing

</>

pub fn letter_spacing(
  offset: Float,
) -> @internal Attribute(@internal Aligned, msg)

Set spacing between letters.

Example

el.el([font.letter_spacing(2.0)], el.text("S p a c e d"))

light

</>

pub const light: @internal Attribute(@internal Aligned, msg)

Font weight 300.

medium

</>

pub const medium: @internal Attribute(@internal Aligned, msg)

Font weight 500.

monospace

</>

pub const monospace: Font

Generic monospace font family.

regular

</>

pub const regular: @internal Attribute(@internal Aligned, msg)

Font weight 400 (normal/regular).

sans_serif

</>

pub const sans_serif: Font

Generic sans-serif font family.

semi_bold

</>

pub const semi_bold: @internal Attribute(@internal Aligned, msg)

Font weight 600.

serif

</>

pub const serif: Font

Generic serif font family.

size

</>

pub fn size(
  size: Int,
) -> @internal Attribute(@internal Aligned, msg)

Set the font size in pixels.

This is inherited by child elements.

Example

el.el([font.size(24)], el.text("Large text"))

strike

</>

pub const strike: @internal Attribute(@internal Aligned, msg)

Strike through text.

typeface

</>

pub fn typeface(name: String) -> Font

A specific typeface by name.

Example

font.typeface("Open Sans")

underline

</>

pub const underline: @internal Attribute(@internal Aligned, msg)

Underline text.

unitalicized

</>

pub const unitalicized: @internal Attribute(
  @internal Aligned,
  msg,
)

Remove italic styling (useful for overriding inherited italic).

word_spacing

</>

pub fn word_spacing(
  offset: Float,
) -> @internal Attribute(@internal Aligned, msg)

Set spacing between words.

Example

el.el([font.word_spacing(10.0)], el.text("Wide words"))