Elegant.Typography

Typography contains everything about fonts and characters rendering.

Types


type alias Typography =

{ capitalization : Maybe.Maybe Elegant.Typography.Capitalization, decoration : Maybe.Maybe Elegant.Typography.Decoration, color : Maybe.Maybe Color.Color, whiteSpaceWrap : Maybe.Maybe Elegant.Typography.WhiteSpaceWrap, userSelect : Maybe.Maybe Elegant.Typography.UserSelect, lineHeight : Maybe.Maybe (Either.Either Elegant.Helpers.Shared.SizeUnit Elegant.Typography.Normal), weight : Maybe.Maybe Basics.Int, tilt : Maybe.Maybe Elegant.Typography.FontTilt, size : Maybe.Maybe Elegant.Helpers.Shared.SizeUnit, family : Maybe.Maybe Elegant.Typography.FontFamily, letterSpacing : Maybe.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 : Elegant.Typography.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.Color -> Modifiers.Modifier Elegant.Typography.Typography

Set the color of the typography


Text Transformations


capitalize : Modifiers.Modifier Elegant.Typography.Typography

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



lowercase : Modifiers.Modifier Elegant.Typography.Typography

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



uppercase : Modifiers.Modifier Elegant.Typography.Typography

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


Text Decorations


underline : Modifiers.Modifier Elegant.Typography.Typography

Underline the text.



lineThrough : Modifiers.Modifier Elegant.Typography.Typography

Print a line through the text.



noDecoration : Modifiers.Modifier Elegant.Typography.Typography

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


Whitespace Management


whiteSpaceNoWrap : Modifiers.Modifier Elegant.Typography.Typography

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


User Interactions


userSelect : Basics.Bool -> Modifiers.Modifier Elegant.Typography.Typography

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


Line Height


lineHeightNormal : Modifiers.Modifier Elegant.Typography.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 Elegant.Typography.Typography

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


Weight


weight : Basics.Int -> Modifiers.Modifier Elegant.Typography.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 Elegant.Typography.Typography

Cancels any tilting of the characters.



italic : Modifiers.Modifier Elegant.Typography.Typography

Renders the characters as italic.



oblique : Modifiers.Modifier Elegant.Typography.Typography

Renders the characters as oblique.


Size


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

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


Font Family


systemFont : String.String -> Elegant.Typography.CustomFontFamily

Gives a system font.



customFont : String.String -> Elegant.Typography.CustomFontFamily

Gives a custom font.



fontFamily : List.List Elegant.Typography.CustomFontFamily -> Modifiers.Modifier Elegant.Typography.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 Elegant.Typography.Typography

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



fontFamilySansSerif : Modifiers.Modifier Elegant.Typography.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 Elegant.Typography.Typography

Set the letter spacing of the typography.


Shortcuts


bold : Modifiers.Modifier Elegant.Typography.Typography


Compilation


typographyToCouples : Elegant.Typography.Typography -> List.List ( String.String, String.String )

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