import Element
import Element.Font as Font
view =
Element.el
[ Font.color (Element.rgb 0 0 1)
, Font.size 18
, Font.family
[ Font.typeface "Open Sans"
, Font.sansSerif
]
]
(Element.text "Woohoo, I'm stylish text")
Note: Font.color
, Font.size
, and Font.family
are inherited, meaning you can set them at the top of your view and all subsequent nodes will have that value.
Other Note: If you're looking for something like line-height
, it's handled by Element.spacing
on a paragraph
.
color : Element.Color -> Element.Attr decorative msg
size : Basics.Int -> Element.Attr decorative msg
Font sizes are always given as px
.
family : List Font -> Element.Attribute msg
import Element
import Element.Font as Font
myElement =
Element.el
[ Font.family
[ Font.typeface "Helvetica"
, Font.sansSerif
]
]
(text "")
Internal.Model.Font
typeface : String -> Font
serif : Font
sansSerif : Font
monospace : Font
external : { url : String, name : String } -> Font
Note it's likely that Font.external
will cause a flash on your page on loading.
To bypass this, import your fonts using a separate stylesheet and just use Font.typeface
.
It's likely that Font.external
will be removed or redesigned in the future to avoid the flashing.
Font.external
can be used to import font files. Let's say you found a neat font on http://fonts.google.com:
import Element
import Element.Font as Font
view =
Element.el
[ Font.family
[ Font.external
{ name = "Roboto"
, url = "https://fonts.googleapis.com/css?family=Roboto"
}
, Font.sansSerif
]
]
(Element.text "Woohoo, I'm stylish text")
alignLeft : Element.Attr decorative msg
Align the font to the left.
alignRight : Element.Attr decorative msg
Align the font to the right.
center : Element.Attr decorative msg
Center align the font.
justify : Element.Attr decorative msg
letterSpacing : Basics.Float -> Element.Attr decorative msg
In px
.
wordSpacing : Basics.Float -> Element.Attr decorative msg
In px
.
underline : Element.Attr decorative msg
strike : Element.Attr decorative msg
italic : Element.Attr decorative msg
unitalicized : Element.Attr decorative msg
This will reset bold and italic.
heavy : Element.Attr decorative msg
extraBold : Element.Attr decorative msg
bold : Element.Attr decorative msg
semiBold : Element.Attr decorative msg
medium : Element.Attr decorative msg
regular : Element.Attr decorative msg
light : Element.Attr decorative msg
extraLight : Element.Attr decorative msg
hairline : Element.Attr decorative msg
weight : Basics.Int -> Element.Attr decorative msg
Internal.Model.Variant
variant : Variant -> Element.Attr decorative msg
You can use this to set a single variant on an element itself such as:
el
[ Font.variant Font.smallCaps
]
(text "rendered with smallCaps")
Note These will not stack. If you want multiple variants, you should use Font.variantList
.
variantList : List Variant -> Element.Attr decorative msg
smallCaps : Variant
Small caps are rendered using uppercase glyphs, but at the size of lowercase glyphs.
slashedZero : Variant
Add a slash when rendering 0
ligatures : Variant
ordinal : Variant
Oridinal markers like 1st
and 2nd
will receive special glyphs.
tabularNumbers : Variant
Number figures will each take up the same space, allowing them to be easily aligned, such as in tables.
stackedFractions : Variant
Render fractions with the numerator stacked on top of the denominator.
diagonalFractions : Variant
Render fractions
swash : Basics.Int -> Variant
feature : String -> Basics.Bool -> Variant
Set a feature by name and whether it should be on or off.
Feature names are four-letter names as defined in the OpenType specification.
indexed : String -> Basics.Int -> Variant
A font variant might have multiple versions within the font.
In these cases we need to specify the index of the version we want.
glow : Element.Color -> Basics.Float -> Element.Attr decorative msg
A glow is just a simplified shadow.
shadow : { offset : ( Basics.Float, Basics.Float ), blur : Basics.Float, color : Element.Color } -> Element.Attr decorative msg