Typography contains everything about fonts and characters rendering.
{ 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
]
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
.
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
.
color : Color -> Modifiers.Modifier Typography
Set the color of the typography
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'.
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.
whiteSpaceNoWrap : Modifiers.Modifier Typography
Cancel the wrapping of the text on whitespaces. It forces text to stay on one line.
userSelect : Basics.Bool -> Modifiers.Modifier Typography
Allow or disallow user to interact with the text, i.e. select, copy, etc.
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 : 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.
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 : 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.
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/
letterSpacing : Elegant.Helpers.Shared.SizeUnit -> Modifiers.Modifier Typography
Set the letter spacing of the typography.
bold : Modifiers.Modifier Typography
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.