elm-athlete / athlete / Elegant.Typography

Typography contains everything about fonts and characters rendering.

Types


type alias Typography =
{ capitalization : Maybe Capitalization
, decoration : Maybe Decoration
, color : Maybe Color
, whiteSpaceWrap : Maybe WhiteSpaceWrap
, userSelect : Maybe UserSelect
, lineHeight : Maybe (Either Elegant.Helpers.Shared.SizeUnit Normal)
, weight : Maybe Basics.Int
, tilt : Maybe FontTilt
, size : Maybe Elegant.Helpers.Shared.SizeUnit
, family : Maybe FontFamily
, letterSpacing : Maybe Elegant.Helpers.Shared.SizeUnit 
}

The Typography record contains everything about fonts rendering, including character rendering. You probably won't use it as is, but instead using Box.typography which automatically generate an empty Typography record. You can then use modifiers. I.E.

Box.typography
    [ Typography.color Color.white
    , Typography.italic
    ]


type Capitalization

Represents the possible transformations of the text. It can be Uppercase, Lowercase, or Capitalize. They are created by uppercase, lowercase and capitalize.


type Decoration

Represents the possible decorations of the text. It can be None, Underline or LineThrough. They are created by noDecoration, underline and lineThrough.


type WhiteSpaceWrap

Represents the whitespaces management in the text. It can be NoWrap, and created by whiteSpaceNoWrap.


type alias UserSelect =
Basics.Bool

Represents the interaction with the user. If set to True, the user can interact with the text, i.e. can select it, copy and paste. If set to False, nothing can be done.


type Normal

Value representing the 'normal' value in line-height.


type FontTilt

Represents the possible tilting of the characters. It can be Normal, Italic, or Oblique. They are created by uppercase, lowercase and capitalize.


type FontFamily

Represents the possible fontFamily of the characters. It can be Inherited from the parent, or customized.


type CustomFontFamily

Represents the font family used to render characters. It can be a system or a custom type. They are created by systemFont and customFont.

Default typography

default : Typography

Generate an empty Typography record, with every field equal to Nothing. You are free to use it as you wish, but it is instanciated automatically by Box.typography.

Typography modifiers

Color

color : Color -> Modifiers.Modifier Typography

Set the color of the typography

Text Transformations

capitalize : Modifiers.Modifier Typography

Capitalize the first letter in the text. 'just an example' is transformed in 'Just an example'.

lowercase : Modifiers.Modifier Typography

Turn the entire text in lowercase. 'JuST an ExAMPle' is transformed in 'just an example'.

uppercase : Modifiers.Modifier Typography

Turn the entire text in uppercase. 'JuST an ExAMPle' is transformed in 'JUST AN EXAMPLE'.

Text Decorations

underline : Modifiers.Modifier Typography

Underline the text.

lineThrough : Modifiers.Modifier Typography

Print a line through the text.

noDecoration : Modifiers.Modifier Typography

Remove every decoration (underline or lineThrough) on the text.

Whitespace Management

whiteSpaceNoWrap : Modifiers.Modifier Typography

Cancel the wrapping of the text on whitespaces. It forces text to stay on one line.

User Interactions

userSelect : Basics.Bool -> Modifiers.Modifier Typography

Allow or disallow user to interact with the text, i.e. select, copy, etc.

Line Height

lineHeightNormal : Modifiers.Modifier Typography

Set the lineHeight property to respect the space defined by the User Agent of the user's browser. It usually is 1.2em, but can vary.

lineHeight : Elegant.Helpers.Shared.SizeUnit -> Modifiers.Modifier Typography

Set the lineHeight to the desired value. Can be px, pt, vh, em or rem.

Weight

weight : Basics.Int -> Modifiers.Modifier Typography

Changes the weight of the characters. Value is defined between 100 and 900 and default weight is equal to 400.

Tilting

tiltNormal : Modifiers.Modifier Typography

Cancels any tilting of the characters.

italic : Modifiers.Modifier Typography

Renders the characters as italic.

oblique : Modifiers.Modifier Typography

Renders the characters as oblique.

Size

size : Elegant.Helpers.Shared.SizeUnit -> Modifiers.Modifier Typography

Set the size of the characters to the desired value. Can be px, pt, vh, em or rem.

Font Family

systemFont : String -> CustomFontFamily

Gives a system font.

customFont : String -> CustomFontFamily

Gives a custom font.

fontFamily : List CustomFontFamily -> Modifiers.Modifier Typography

Set the font family to the desired fonts. All fonts will be tried one by one until one is found either on the browser or user's OS. It is possible to use both system and custom fonts.

fontFamilyInherit : Modifiers.Modifier Typography

Inherits the font from the parents. It is the default behavior of fontFamily.

fontFamilySansSerif : Modifiers.Modifier Typography

Standard Sans Serif font family. Inspired from https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/

Letter Spacing

letterSpacing : Elegant.Helpers.Shared.SizeUnit -> Modifiers.Modifier Typography

Set the letter spacing of the typography.

Shortcuts

bold : Modifiers.Modifier Typography

Compilation

typographyToCouples : Typography -> List ( String, String )

Compiles a Typography record to the corresponding CSS list of tuples. Compiles only styles which are defined, ignoring Nothing fields.