@@ -23,14 +23,15 @@ import Html.Attributes
2323
2424
2525type alias FontAdjustment =
26− { capital : Adjustment
27− , lowercase : Adjustment
28− , baseline : Adjustment
29− , descender : Adjustment
26+ { lineHeight : Float
27+ , capital : Line
28+ , lowercase : Line
29+ , baseline : Line
30+ , descender : Line
3031 }
3132
3233
33−type alias Adjustment =
34+type alias Line =
3435 Float
3536
3637
@@ -42,20 +43,30 @@ edges =
4243 { top = 0, right = 0, bottom = 0, left = 0 }
4344
4445
46+default =
47+ { capital = 1.15
48+ , lowercase = 0.96
49+ , baseline = 0.465
50+ , descender = 0.245
51+ , lineHeight = 1.5
52+ }
53+
54+
4555init =
4656 { adjustment =
47− { capital = 0.07
48− , lowercase = 0.57
49− , baseline = 0.265
50− , descender = 0.755
51− }
57+ default
58+ , converted =
59+ convertAdjustment default
5260 }
5361
5462
5563update msg model =
5664 case msg of
5765 UpdateAdjustment adj ->
58− { model | adjustment = adj }
66+ { model
67+ | adjustment = adj
68+ , converted = convertAdjustment adj
69+ }
5970
6071
6172main =
@@ -71,15 +82,26 @@ view model =
7182 [ Background.color (rgba 1 1 1 1)
7283 , Font.color (rgba 0 0 0 1)
7384 , Font.family
74− [ Font.external
75− { url = "https://fonts.googleapis.com/css?family=EB+Garamond"
76− , name = "EB Garamond"
85+ [ -- Font.external
86+ -- { url = "https://fonts.googleapis.com/css?family=EB+Garamond"
87+ -- , name = "EB Garamond"
88+ -- }
89+ Font.external
90+ { url = "https://fonts.googleapis.com/css?family=Catamaran"
91+ , name = "Catamaran"
7792 }
7893 , Font.sansSerif
7994 ]
8095 ]
8196 <|
82− adjustor 240 model.adjustment
97+ column [ width fill, height fill, spacing 128 ]
98+ [ adjustor 120 model.adjustment
99+ , adjusted 120 model.converted
100+ ]
101+
102+
103+style name val =
104+ htmlAttribute (Html.Attributes.style name val)
83105
84106
85107fontSize pixels lineHeight up =
@@ -103,9 +125,159 @@ charcoal =
103125 rgb 0.7 0.7 0.7
104126
105127
106−viewAdjustment label adjustment size left updateWith =
128+adjustor size adjustment =
129+ let
130+ labels =
131+ [ viewAdjustment "Type Height" adjustment.capital size 180 adjustment.lineHeight (\capital -> { adjustment | capital = capital })
132+ , viewAdjustment "Lowercase Height" adjustment.lowercase size 60 adjustment.lineHeight (\lowercase -> { adjustment | lowercase = lowercase })
133+ , viewAdjustment "Baseline" adjustment.baseline size 120 adjustment.lineHeight (\baseline -> { adjustment | baseline = baseline })
134+ , viewAdjustment "Descender" adjustment.descender size 0 adjustment.lineHeight (\descender -> { adjustment | descender = descender })
135+ ]
136+ in
137+ el
138+ ([ centerX
139+ , centerY
140+ , Background.color (rgb 0 0.8 0.9)
141+ , style "line-height" (String.fromFloat adjustment.lineHeight)
142+ , onRight
143+ (el
144+ [ centerY
145+ , width (px 40)
146+
147+ -- , height (px (round (toFloat size * (1 / 1.5))))
148+ , height (px size)
149+ , Background.color (rgb 0.9 0.8 0)
150+ ]
151+ none
152+ )
153+ , Font.size size
154+ ]
155+ ++ labels
156+ )
157+ (text "Typography")
158+
159+
160+adjusted size adjustment =
161+ row
162+ [ centerX
163+ , centerY
164+ , spacing 32
165+ , Font.size 120
166+ ]
167+ [ el
168+ [ Background.color (rgb 0 0.8 0.9)
169+ , style "line-height" "normal"
170+ , above (el [ Font.size 12 ] (text "line-height: normal"))
171+ ]
172+ (text "Typography")
173+ , el
174+ [ Background.color (rgb 0 0.8 0.9)
175+ , style "line-height" "1"
176+ , above (el [ Font.size 12 ] (text "line-height: 1"))
177+ ]
178+ (text "Typography")
179+ , corrected adjustment.full "corrected"
180+ , corrected adjustment.capital "corrected capital"
181+ , paragraph [ Font.size 25, spacing 5, width (px 200) ]
182+ [ el [ Font.size 55, alignLeft ] (text "L")
183+ , text "orem Ipsum is simply dummy text of the printing and typesetting industry."
184+ ]
185+ ]
186+
187+
188+corrected converted label =
189+ el
190+ [ Background.color (rgb 0 0.8 0.9)
191+ , style "display" "block"
192+ , above (el [ Font.size 12, moveUp 6 ] (text label))
193+ , style "line-height" (String.fromFloat converted.height)
194+ , below
195+ (column [ Font.size 12, spacing 5, moveDown 10 ]
196+ [ text ("height: " ++ String.left 5 (String.fromFloat converted.height))
197+ , text ("vertical: " ++ String.left 5 (String.fromFloat converted.vertical))
198+ ]
199+ )
200+ ]
201+ (el
202+ [ style "display" "inline-block"
203+ , style "line-height" (String.fromFloat converted.height)
204+ , style "vertical-align" (String.fromFloat converted.vertical ++ "em")
205+ ]
206+ (text "Typography")
207+ )
208+
209+
210+convertAdjustment adjustment =
211+ let
212+ base =
213+ adjustment.lineHeight
214+
215+ normalDescender =
216+ (adjustment.lineHeight - 1)
217+ / 2
218+
219+ oldMiddle =
220+ adjustment.lineHeight / 2
221+
222+ newCapitalMiddle =
223+ ((ascender - newBaseline) / 2) + newBaseline
224+
225+ newFullMiddle =
226+ ((ascender - descender) / 2) + descender
227+
228+ lines =
229+ [ adjustment.capital
230+ , adjustment.baseline
231+ , adjustment.descender
232+ , adjustment.lowercase
233+ ]
234+
235+ ascender =
236+ Maybe.withDefault adjustment.capital (List.maximum lines)
237+
238+ descender =
239+ Maybe.withDefault adjustment.descender (List.minimum lines)
240+
241+ newBaseline =
242+ lines
243+ |> List.filter (\x -> x /= descender)
244+ |> List.minimum
245+ |> Maybe.withDefault adjustment.baseline
246+
247+
248+
249+ capitalVertical =
250+ (oldMiddle - newCapitalMiddle) * 2
251+
252+ fullVertical =
253+ (oldMiddle - newFullMiddle) * 2
254+ in
255+ { full =
256+ { vertical = fullVertical
257+ , height =
258+ (ascender - descender)
259+ - abs fullVertical
260+ }
261+ , capital =
262+ { vertical = capitalVertical
263+ , height = (ascender - newBaseline) - abs capitalVertical
264+ }
265+ }
266+
267+
268+viewAdjustment label adjustment size left lineHeight updateWith =
269+ let
270+ fullHeight =
271+ toFloat size * 1.5
272+ in
107273 onLeft
108− (el [ moveLeft left, moveUp (0.25 * toFloat size), height (px (round (toFloat size * 1.5))) ] <|
274+ (el
275+ [ moveLeft left
276+
277+ -- , moveUp (0.125 * toFloat size)
278+ , height (px (round (toFloat size * lineHeight)))
279+ ]
280+ <|
109281 Input.slider
110282 [ Font.size 24
111283 , Element.behindContent
@@ -118,13 +290,32 @@ viewAdjustment label adjustment size left updateWith =
118290 ]
119291 Element.none
120292 )
121− , height (px (round (toFloat size * 1.5)))
293+ , height (px (round fullHeight))
122294 , width (px 1)
295+ , spacing 0
123296 , Background.color charcoal
124297 , below (el [ centerX ] (text (String.fromFloat adjustment)))
298+ , onRight
299+ (el
300+ [ height (px 0)
301+ , width (px 800)
302+ , moveRight 10
303+ , alignBottom
304+ , moveUp (fullHeight * (adjustment / lineHeight))
305+ , Border.color (rgb 0 0 0)
306+ , Border.dashed
307+ , Border.widthEach
308+ { top = 1
309+ , right = 0
310+ , bottom = 0
311+ , left = 0
312+ }
313+ ]
314+ none
315+ )
125316 ]
126317 { label = Input.labelAbove [ Font.size 18 ] (text "")
127− , max = 1.0
318+ , max = lineHeight
128319 , min = 0
129320 , onChange =
130321 \x ->
@@ -139,37 +330,24 @@ viewAdjustment label adjustment size left updateWith =
139330 , Border.width 1
140331 , Border.color (Element.rgb 0.5 0.5 0.5)
141332 , 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− )
333+
334+ -- , onRight
335+ -- (el
336+ -- [ height (px 0)
337+ -- , width (px 1200)
338+ -- , moveDown 8
339+ -- , Border.color (rgb 0 0 0)
340+ -- , Border.dashed
341+ -- , Border.widthEach
342+ -- { top = 1
343+ -- , right = 0
344+ -- , bottom = 0
345+ -- , left = 0
346+ -- }
347+ -- ]
348+ -- none
349+ -- )
158350 ]
159351 , value = adjustment
160352 }
161353 )
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")