@@ -1,11 +1,11 @@
11module Element.Font exposing
22 ( color, size
33 , family, Font, typeface, serif, sansSerif, monospace
4− , external, with, sizeByCapital, full
4+ , external
55 , alignLeft, alignRight, center, justify, letterSpacing, wordSpacing
66 , underline, strike, italic, unitalicized
77 , heavy, extraBold, bold, semiBold, medium, regular, light, extraLight, hairline
8− , Variant, variant, smallCaps, slashedZero, ligatures, ordinal, tabularNumbers, stackedFractions, diagonalFractions, swash, feature, indexed
8+ , Variant, variant, variantList, smallCaps, slashedZero, ligatures, ordinal, tabularNumbers, stackedFractions, diagonalFractions, swash, feature, indexed
99 , glow, shadow
1010 )
1111
@@ -36,24 +36,7 @@ module Element.Font exposing
3636
3737@docs family, Font, typeface, serif, sansSerif, monospace
3838
39−@docs external, with, sizeByCapital, full
40−
41−`Font.external` can be used to import font files. Let's say you found a neat font on <http://fonts.google.com>:
42−
43− import Element
44− import Element.Font as Font
45−
46− view =
47− Element.el
48− [ Font.family
49− [ Font.external
50− { name = "Roboto"
51− , url = "https://fonts.googleapis.com/css?family=Roboto"
52− }
53− , Font.sansSerif
54− ]
55− ]
56− (Element.text "Woohoo, I'm stylish text")
39+@docs external
5740
5841
5942## Alignment and Spacing
@@ -73,7 +56,7 @@ module Element.Font exposing
7356
7457## Variants
7558
76−@docs Variant, variant, smallCaps, slashedZero, ligatures, ordinal, tabularNumbers, stackedFractions, diagonalFractions, swash, feature, indexed
59+@docs Variant, variant, variantList, smallCaps, slashedZero, ligatures, ordinal, tabularNumbers, stackedFractions, diagonalFractions, swash, feature, indexed
7760
7861
7962## Shadows
@@ -96,7 +79,13 @@ type alias Font =
9679{-| -}
9780color : Color -> Attr decorative msg
9881color fontColor =
99− Internal.StyleClass Flag.fontColor (Internal.Colored ("fc-" ++ Internal.formatColorClass fontColor) "color" fontColor)
82+ Internal.StyleClass
83+ Flag.fontColor
84+ (Internal.Colored
85+ ("fc-" ++ Internal.formatColorClass fontColor)
86+ "color"
87+ fontColor
88+ )
10089
10190
10291{-|
@@ -116,7 +105,12 @@ color fontColor =
116105-}
117106family : List Font -> Attribute msg
118107family families =
119− Internal.StyleClass Flag.fontFamily <| Internal.FontFamily (List.foldl Internal.renderFontClassName "ff-" families) families
108+ Internal.StyleClass
109+ Flag.fontFamily
110+ (Internal.FontFamily
111+ (List.foldl Internal.renderFontClassName "ff-" families)
112+ families
113+ )
120114
121115
122116{-| -}
@@ -155,8 +149,7 @@ type alias Adjustment =
155149{-| -}
156150with :
157151 { name : String
158− , adjustment : Adjustment
159− , url : Maybe String
152+ , adjustment : Maybe Adjustment
160153 , variants : List Variant
161154 }
162155 -> Font
@@ -176,7 +169,30 @@ full =
176169 Internal.htmlClass classes.fullSize
177170
178171
179−{-| -}
172+{-| **Note** it's likely that `Font.external` will cause a flash on your page on loading.
173+
174+To bypass this, import your fonts using a separate stylesheet and just use `Font.typeface`.
175+
176+It's likely that `Font.external` will be removed or redesigned in the future to avoid the flashing.
177+
178+`Font.external` can be used to import font files. Let's say you found a neat font on <http://fonts.google.com>:
179+
180+ import Element
181+ import Element.Font as Font
182+
183+ view =
184+ Element.el
185+ [ Font.family
186+ [ Font.external
187+ { name = "Roboto"
188+ , url = "https://fonts.googleapis.com/css?family=Roboto"
189+ }
190+ , Font.sansSerif
191+ ]
192+ ]
193+ (Element.text "Woohoo, I'm stylish text")
194+
195+-}
180196external : { url : String, name : String } -> Font
181197external { url, name } =
182198 Internal.ImportFont name url
@@ -364,9 +380,7 @@ type alias Variant =
364380 ]
365381 (text "rendered with smallcaps")
366382
367−**Note** These will **not** stack. If you want multiple variants, you should use `Font.with`.
368−
369−If you specify a font variant on an element, then it will override all variants listed in `Font.with`.
383+**Note** These will **not** stack. If you want multiple variants, you should use `Font.variantList`.
370384
371385-}
372386variant : Variant -> Attribute msg
@@ -385,6 +399,54 @@ variant var =
385399 ("\"" ++ name ++ "\" " ++ String.fromInt index)
386400
387401
402+isSmallCaps x =
403+ case x of
404+ Internal.VariantActive feat ->
405+ feat == "smcp"
406+
407+ _ ->
408+ False
409+
410+
411+{-| -}
412+variantList : List Variant -> Attribute msg
413+variantList vars =
414+ let
415+ features =
416+ vars
417+ |> List.map Internal.renderVariant
418+
419+ hasSmallCaps =
420+ List.any isSmallCaps vars
421+
422+ name =
423+ if hasSmallCaps then
424+ vars
425+ |> List.map Internal.variantName
426+ |> String.join "-"
427+ |> (\x -> x ++ "-sc")
428+
429+ else
430+ vars
431+ |> List.map Internal.variantName
432+ |> String.join "-"
433+
434+ featureString =
435+ String.join ", " features
436+ in
437+ Internal.StyleClass Flag.fontVariant <|
438+ Internal.Style ("v-" ++ name)
439+ [ Internal.Property "font-feature-settings" featureString
440+ , Internal.Property "font-variant"
441+ (if hasSmallCaps then
442+ "small-caps"
443+
444+ else
445+ "normal"
446+ )
447+ ]
448+
449+
388450{-| [Small caps](https://en.wikipedia.org/wiki/Small_caps) are rendered using uppercase glyphs, but at the size of lowercase glyphs.
389451-}
390452smallCaps : Variant