howdy/ui/direction

Direction: which way text runs, for a whole page or part of one.

page.new("طلبات")
|> page.lang("ar")
|> page.direction(direction.Rtl)

direction.provider(direction.Rtl, [], [hebrew_quote])

Components lay themselves out from the start of the line to its end, so in right-to-left text the sidebar sits on the right, a menu’s tick on the right, and so on. The arrow keys follow what the reader sees: right moves to the tab on the right, whichever way the text runs, and arrows such as a carousel’s point the way the text goes. Charts and one-time codes keep reading left to right, as they usually do.

Set the direction once, on the page; use provider for a passage in another direction. Both set the HTML dir attribute, so the browser does the rest. of gives the direction of a locale, so a page in the reader’s language can follow it:

let l = locale.detect(ctx, locales)
page.new(title)
|> page.lang(locale.to_string(l))
|> page.direction(direction.of(l))

Types

pub type Direction {
  Ltr
  Rtl
  Auto
}

Constructors

  • Ltr

    Left to right, as in English.

  • Rtl

    Right to left, as in Arabic and Hebrew.

  • Auto

    Whichever the text itself starts with, for content from users.

Values

pub fn classes() -> List(css.Class)

Every class this module uses, for howdy/ui/export.

pub fn dir(direction: Direction) -> attribute.Attribute(msg)

The dir attribute for a direction, for any element.

pub fn of(language: locale.Locale) -> Direction

The direction text in a locale runs: Rtl for Arabic, Hebrew, Persian and others written right to left, Ltr for the rest.

pub fn of_tag(tag: String) -> Direction

The direction of a BCP 47 tag, such as a translator’s locale. A tag that cannot be read is left to right.

pub fn provider(
  direction: Direction,
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

A part of the page in another direction.

pub fn provider_class() -> css.Class
✨ Search Document