import Element.WithContext as Element
import Element.WithContext.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.
Font sizes are always given as px.
import Element.WithContext as Element
import Element.WithContext.Font as Font
myElement =
Element.el
[ Font.family
[ Font.typeface "Helvetica"
, Font.sansSerif
]
]
(text "")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")Align the font to the left.
Align the font to the right.
Center align the font.
In px.
In px.
This will reset bold and italic.
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.
Small caps are rendered using uppercase glyphs, but at the size of lowercase glyphs.
Add a slash when rendering 0
Oridinal markers like 1st and 2nd will receive special glyphs.
Number figures will each take up the same space, allowing them to be easily aligned, such as in tables.
Render fractions with the numerator stacked on top of the denominator.
Render fractions
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.
A font variant might have multiple versions within the font.
In these cases we need to specify the index of the version we want.
A glow is just a simplified shadow.