git.iko.soy/typeable/elm-ui
on master help sign in
Font adjustment experiment
d6aeec7Matthew Griffith
experiments/font-adjustment/FontAdjustment.elmnew file+175
compare with master
unifiedsplit
@@ -0,0 +1,175 @@
1+module Main exposing (main)
2+
3+{-| Line Height as its specified through CSS doesn't make a whole lot of sense typographically.
4+
5+We also run into issues with sizing a font. The font size generally refers to the full type size (from the top of ascendors to the bottom of descenders)
6+
7+However, sometimes we might want to size things from the top of the Capital to the baseline.
8+
9+Or from the top of the x-height to the baseline.
10+
11+The main place this shows up is for dropped capitals, and for text on buttons.
12+
13+-}
14+
15+import Browser
16+import Element exposing (..)
17+import Element.Background as Background
18+import Element.Border as Border
19+import Element.Font as Font
20+import Element.Input as Input
21+import Element.Lazy
22+import Html.Attributes
23+
24+
25+type alias FontAdjustment =
26+ { capital : Adjustment
27+ , lowercase : Adjustment
28+ , baseline : Adjustment
29+ , descender : Adjustment
30+ }
31+
32+
33+type alias Adjustment =
34+ Float
35+
36+
37+type Msg
38+ = UpdateAdjustment FontAdjustment
39+
40+
41+edges =
42+ { top = 0, right = 0, bottom = 0, left = 0 }
43+
44+
45+init =
46+ { adjustment =
47+ { capital = 0.07
48+ , lowercase = 0.57
49+ , baseline = 0.265
50+ , descender = 0.755
51+ }
52+ }
53+
54+
55+update msg model =
56+ case msg of
57+ UpdateAdjustment adj ->
58+ { model | adjustment = adj }
59+
60+
61+main =
62+ Browser.sandbox
63+ { init = init
64+ , update = update
65+ , view = view
66+ }
67+
68+
69+view model =
70+ Element.layout
71+ [ Background.color (rgba 1 1 1 1)
72+ , Font.color (rgba 0 0 0 1)
73+ , Font.family
74+ [ Font.external
75+ { url = "https://fonts.googleapis.com/css?family=EB+Garamond"
76+ , name = "EB Garamond"
77+ }
78+ , Font.sansSerif
79+ ]
80+ ]
81+ <|
82+ adjustor 240 model.adjustment
83+
84+
85+fontSize pixels lineHeight up =
86+ [ Font.size pixels
87+
88+ -- , htmlAttribute (Html.Attributes.style "line-height" lineHeight)
89+ -- , Background.color (rgb 0 0.8 0.9)
90+ -- , onLeft
91+ -- (el
92+ -- [ Background.color (rgb 0 0 0)
93+ -- , width (px 20)
94+ -- , height (px pixels)
95+ -- , moveUp up
96+ -- ]
97+ -- none
98+ -- )
99+ ]
100+
101+
102+charcoal =
103+ rgb 0.7 0.7 0.7
104+
105+
106+viewAdjustment label adjustment size left updateWith =
107+ onLeft
108+ (el [ moveLeft left, moveUp (0.25 * toFloat size), height (px (round (toFloat size * 1.5))) ] <|
109+ Input.slider
110+ [ Font.size 24
111+ , Element.behindContent
112+ (Element.el
113+ [ Element.width (Element.px 1)
114+ , Element.height Element.fill
115+ , Element.centerY
116+ , Background.color charcoal
117+ , Border.rounded 2
118+ ]
119+ Element.none
120+ )
121+ , height (px (round (toFloat size * 1.5)))
122+ , width (px 1)
123+ , Background.color charcoal
124+ , below (el [ centerX ] (text (String.fromFloat adjustment)))
125+ ]
126+ { label = Input.labelAbove [ Font.size 18 ] (text "")
127+ , max = 1.0
128+ , min = 0
129+ , onChange =
130+ \x ->
131+ UpdateAdjustment
132+ (updateWith x)
133+ , step = Just 0.005
134+ , thumb =
135+ Input.thumb
136+ [ Element.width (Element.px 16)
137+ , Element.height (Element.px 16)
138+ , Border.rounded 8
139+ , Border.width 1
140+ , Border.color (Element.rgb 0.5 0.5 0.5)
141+ , Background.color (Element.rgb 1 1 1)
142+ , onRight
143+ (el
144+ [ height (px 0)
145+ , width (px 1200)
146+ , moveDown 8
147+ , Border.color charcoal
148+ , Border.dashed
149+ , Border.widthEach
150+ { top = 1
151+ , right = 0
152+ , bottom = 0
153+ , left = 0
154+ }
155+ ]
156+ none
157+ )
158+ ]
159+ , value = adjustment
160+ }
161+ )
162+
163+
164+adjustor size adjustment =
165+ let
166+ labels =
167+ [ viewAdjustment "Type Height" adjustment.capital size 180 (\capital -> { adjustment | capital = capital })
168+ , viewAdjustment "Lowercase Height" adjustment.lowercase size 60 (\lowercase -> { adjustment | lowercase = lowercase })
169+ , viewAdjustment "Baseline" adjustment.baseline size 120 (\baseline -> { adjustment | baseline = baseline })
170+ , viewAdjustment "Descender" adjustment.descender size 0 (\descender -> { adjustment | descender = descender })
171+ ]
172+ in
173+ el
174+ ([ centerX, centerY ] ++ labels ++ fontSize size "1.0" 0)
175+ (text "Typography")
experiments/font-adjustment/elm.jsonnew file+25
@@ -0,0 +1,25 @@
1+{
2+ "type": "application",
3+ "source-directories": [
4+ ".",
5+ "../../src/"
6+ ],
7+ "elm-version": "0.19.0",
8+ "dependencies": {
9+ "direct": {
10+ "elm/browser": "1.0.0",
11+ "elm/core": "1.0.0",
12+ "elm/html": "1.0.0",
13+ "elm/json": "1.0.0",
14+ "elm/virtual-dom": "1.0.0"
15+ },
16+ "indirect": {
17+ "elm/time": "1.0.0",
18+ "elm/url": "1.0.0"
19+ }
20+ },
21+ "test-dependencies": {
22+ "direct": {},
23+ "indirect": {}
24+ }
25+}