@@ -5,6 +5,7 @@ module Element.Font exposing
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, disable, feature, indexed
89 , glow, shadow
910 )
1011
@@ -70,6 +71,11 @@ module Element.Font exposing
7071@docs heavy, extraBold, bold, semiBold, medium, regular, light, extraLight, hairline
7172
7273
74+## Variants
75+
76+@docs Variant, variant, smallCaps, slashedZero, ligatures, ordinal, tabularNumbers, stackedFractions, diagonalFractions, swash, disable, feature, indexed
77+
78+
7379## Shadows
7480
7581@docs glow, shadow
@@ -151,6 +157,7 @@ with :
151157 { name : String
152158 , adjustment : Adjustment
153159 , url : Maybe String
160+ , variants : List Variant
154161 }
155162 -> Font
156163with =
@@ -333,3 +340,138 @@ glow clr i =
333340 in
334341 Internal.StyleClass Flag.txtShadows <|
335342 Internal.Single (Internal.textShadowName shade) "text-shadow" (Internal.formatTextShadow shade)
343+
344+
345+
346+{- Variants -}
347+
348+
349+type alias Variant =
350+ Internal.Variant
351+
352+
353+{-| You can use this to set a single variant on an element itself such as:
354+
355+ el
356+ [ Font.variant Font.smallcaps
357+ ]
358+ (text "rendered with smallcaps")
359+
360+**Note** These will **not** stack. If you want multiple variants, you should use `Font.with`.
361+
362+-}
363+variant : Variant -> Attribute msg
364+variant var =
365+ case var of
366+ Internal.VariantActive name ->
367+ Internal.Class Flag.fontVariant ("v-" ++ name)
368+
369+ Internal.VariantOff name ->
370+ Internal.Class Flag.fontVariant ("v-" ++ name ++ "-off")
371+
372+ Internal.VariantIndexed name index ->
373+ Internal.StyleClass Flag.fontVariant <|
374+ Internal.Single ("v-" ++ name ++ "-" ++ String.fromInt index)
375+ "font-feature-settings"
376+ ("\"" ++ name ++ "\" " ++ String.fromInt index)
377+
378+
379+{-| Less often you might want to disable an active variant.
380+
381+ el
382+ [ Font.variant (Font.disable Font.smallCaps)
383+ ]
384+ (text "Is not smallcaps")
385+
386+**Note** Generally try to set yourself up so that this isn't really necessary.
387+
388+-}
389+disable : Variant -> Variant
390+disable var =
391+ case var of
392+ Internal.VariantActive name ->
393+ Internal.VariantOff name
394+
395+ Internal.VariantIndexed name index ->
396+ Internal.VariantOff name
397+
398+ Internal.VariantOff name ->
399+ var
400+
401+
402+{-| [Small caps](https://en.wikipedia.org/wiki/Small_caps) are rendered using uppercase glyphs, but at the size of lowercase glyphs.
403+-}
404+smallCaps : Variant
405+smallCaps =
406+ Internal.VariantActive "smcp"
407+
408+
409+{-| Add a slash when rendering `0`
410+-}
411+slashedZero : Variant
412+slashedZero =
413+ Internal.VariantActive "zero"
414+
415+
416+{-| -}
417+ligatures : Variant
418+ligatures =
419+ Internal.VariantActive "liga"
420+
421+
422+{-| Oridinal markers like `1st` and `2nd` will receive special glyphs.
423+-}
424+ordinal : Variant
425+ordinal =
426+ Internal.VariantActive "ordn"
427+
428+
429+{-| Number figures will each take up the same space, allowing them to be easily aligned, such as in tables.
430+-}
431+tabularNumbers : Variant
432+tabularNumbers =
433+ Internal.VariantActive "tnum"
434+
435+
436+{-| Render fractions with the numerator stacked on top of the denominator.
437+-}
438+stackedFractions : Variant
439+stackedFractions =
440+ Internal.VariantActive "afrc"
441+
442+
443+{-| Render fractions
444+-}
445+diagonalFractions : Variant
446+diagonalFractions =
447+ Internal.VariantActive "frac"
448+
449+
450+{-| -}
451+swash : Int -> Variant
452+swash =
453+ Internal.VariantIndexed "swsh"
454+
455+
456+{-| Set a feature by name and whether it should be on or off.
457+
458+Feature names are four-letter names as defined in the [OpenType specification](https://docs.microsoft.com/en-us/typography/opentype/spec/featurelist).
459+
460+-}
461+feature : String -> Bool -> Variant
462+feature name on =
463+ if on then
464+ Internal.VariantIndexed name 1
465+
466+ else
467+ Internal.VariantIndexed name 0
468+
469+
470+{-| A font variant might have multiple versions within the font.
471+
472+In these cases we need to specify the index of the version we want.
473+
474+-}
475+indexed : String -> Int -> Variant
476+indexed name on =
477+ Internal.VariantIndexed name on