Typography contains everything about fonts and characters rendering.
{ 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
][]
Represents the possible transformations of the text.
It can be Uppercase, Lowercase, or Capitalize. They are created by uppercase,
lowercase and capitalize.
[]
Represents the possible decorations of the text.
It can be None, Underline or LineThrough. They are created by noDecoration,
underline and lineThrough.
[]
Represents the whitespaces management in the text.
It can be NoWrap, and created by whiteSpaceNoWrap.
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.
[]
Value representing the 'normal' value in line-height.
[]
Represents the possible tilting of the characters.
It can be Normal, Italic, or Oblique. They are created by uppercase,
lowercase and capitalize.
[]
Represents the possible fontFamily of the characters. It can be Inherited from the parent, or customized.
[]
Represents the font family used to render characters.
It can be a system or a custom type. They are created by systemFont and customFont.
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.
Set the color of the typography
Capitalize the first letter in the text. 'just an example' is transformed in 'Just an example'.
Turn the entire text in lowercase. 'JuST an ExAMPle' is transformed in 'just an example'.
Turn the entire text in uppercase. 'JuST an ExAMPle' is transformed in 'JUST AN EXAMPLE'.
Underline the text.
Print a line through the text.
Remove every decoration (underline or lineThrough) on the text.
Cancel the wrapping of the text on whitespaces. It forces text to stay on one line.
Allow or disallow user to interact with the text, i.e. select, copy, etc.
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.
Set the lineHeight to the desired value. Can be px, pt, vh, em or rem.
Changes the weight of the characters. Value is defined between 100 and 900 and default weight is equal to 400.
Cancels any tilting of the characters.
Renders the characters as italic.
Renders the characters as oblique.
Set the size of the characters to the desired value. Can be px, pt, vh, em or rem.
Gives a system font.
Gives a custom font.
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.
Inherits the font from the parents. It is the default behavior of fontFamily.
Standard Sans Serif font family. Inspired from https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
Set the letter spacing of the typography.
Compiles a Typography record to the corresponding CSS list of tuples.
Compiles only styles which are defined, ignoring Nothing fields.