-
Notifications
You must be signed in to change notification settings - Fork 0
/
f-slider.html
204 lines (157 loc) · 6.85 KB
/
f-slider.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!-- f-slider.html -->
<!-- Inspired by Mr. Eric A. Meyer,
https://meyerweb.com/eric/thoughts/2023/11/01/blinded-by-the-light-dom/ -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- based https://jsfiddle.net/j08691/6hxohp41/ -->
<title>Slider Test</title>
<style>
html { --slider: 1; }
.slider > * { display: block; }
main h1 { font-size: calc(1rem * var(--slider) * 2.0000);
line-height: calc(1.2 - (0.03 * var(--slider))); }
main h2 { font-size: calc(1rem * var(--slider) * 1.6818);
line-height: calc(1.2 - (0.03 * var(--slider))); }
main h3 { font-size: calc(1rem * var(--slider) * 1.4142);
line-height: calc(1.2 - (0.03 * var(--slider))); }
main h4 { font-size: calc(1rem * var(--slider) * 1.1892);
} /* Using the default line-height */
main p { font-size: calc(1rem * var(--slider));
line-height: 1.25; }
main h5 { font-size: calc(1rem * var(--slider) * 0.8409); }
main h6 { font-size: calc(1rem * var(--slider) * 0.67); }
/* Based on the musical tetratonic scale. See
|* https://spencermortensen.com/articles/typographic-scale/
|* n = 4, r = 2, f0 = 1rem
\* */
/* I want <h1> line-height to be 1.2 at slider 0.5 and 1.0 at slider 5.0 See
|* https://www.smashingmagazine.com/2013/05/typographic-design-patterns-practices-case-study-2013/
\* */
#slider-box {
background: lightgrey;
opacity: 0.7;
font-size: 14px;
width: 170px;
position: fixed;
bottom: 10px;
right: 10px;
}
#to-top {
background: lightgrey;
opacity: 0.7;
height: 40px;
width: 40px;
position: fixed;
bottom: 55px;
right: 85px;
right: calc((170px / 2) - (40px / 2) + 5px);
}
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
main {
/* width: 80ch; */
max-width: 11in;
border: 3px solid blue;
margin: auto;
}
</style>
</head>
<body>
<h1 class="center"><h1>A Demonstration: Let the user control the font-size.</h1></h1>
<p>This text is between <body> and <main>. <main> ... </main is oultlined in blue. This area is reserved for the page header and navigation. It is not part of the demo. </p>
<div id="hold-to-top">
<a href="#"><img id="to-top" src="./../includes/images/to-top.jpg" alt="Go to the top icon.">
</a>
</div>
<div id="slider-box">
<div class="slider" unit="em" target="text-slider">
<label for="t-size" >Move this to change text size.<br></label>
<span class="readout"></span>
<input id="t-size" class="text-slider" type="range" min="0.5" max="5" value="1" step="0.1">
</div>
</div>
<hr>
<main>
My goal is to allow the user to control the font and font size. Media Queries are nice - for the author, maybe not for the viewer. These lines are inside of <main> but are not inside another element. <br>This test was inspired by Mr. Eric A. Meyer's
<a href="https://meyerweb.com/eric/thoughts/2023/11/01/blinded-by-the-light-dom/">Blinded By the Light DOM</a>. <br><br>While his article focused on Web Components, it was his examples of using sliders to change font size that slapped the side of my head. This is my test. <br><br>
Move the slider to change the font size inside my <main> without touching the header or
footer.
<h1>This is an <h1>. The font goes from 16px to 160px with the slider. The line-height
goes from 18.9667px to 168px. The Line-height reduces from 1.19 to 1.05.</h1>
<h2>This is an <h2>. The font goes from 13.4544px to 134.544px with the slider. The
line-height goes from 15.95px to 141.267px. The Line-height decreases from 1.185 to 1.05</h2>
<h3>This is an <h3>.<br>
Without understanding them, I have used Web Components to load a Site Header. In my <head> ... <head> I have <script src="./includes/header.js"></script>. In the <body> ... </body> the Web Component is called with <header-component></header-component>.</h3>
<h4>This is an <h4>.<br>
Within the header.js file, only the first and last few lines are JavaScript. Everything else is straight HTML-5. Mine is:<br><br>
class Header extends HTMLElement {
constructor() { super(); }<br>
connectedCallback() { this.innerHTML = `<br>
//<br>
// <header> (everything) </header> <br>
//<br>
`; }}
customElements.define('header-component', Header);
<br><br>As Mr Meyer has said, it may be ugly, but it does work.
</h4>
<p>This is my test <p>. <br>
It loads at the user's chosen font-size (normally 16px with a line-height
of 20px, a 1.25 ratio) With the slider, the font-size range is 8px
to 100px with the same line-height.
</p>
<h5>This is an <h5>.<br>
My Web Components are from my "Found and Saved" file. I found this on stackoverflow.com while searching for a way to include HTML in a document. <br>
<object name="header" type="text/html" data="./includes/header."></object> <br>
and <embed type="text/html" src="./includes/header.inc">
did not work for me.
</h5>
<h6>This is an <h6>.<br>
Of course, these “rules” are not set in stone. Rather, they are a set of rough guidelines
you can use as a basis for setting typography. Every website is unique, and you may want
to modify your choices at each stage of your design to suit your layout.</h6>
</main>
<footer><br>
<table class="center"><tr><td>
<img src="./../includes/images/creativecommons.png"
alt="Creative Commons Icon for CC-A-NC-SA.">
</td><td>
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">
This work is under the Creative Commons <br>
Attribution - NonCommercial - ShareAlike International License.</a>
</td></tr></table>
</footer>
<script>
const root = document.documentElement
const range = document.querySelector('.text-slider')
//As the slider range value changes, do something
range.addEventListener('input', handleSlider)
//as the value in the input changes, do something.
function handleInputChange(e) {
let value = e.target.value
let inputId = e.target.parentNode.id
let inputBg = `--bg-${inputId}`
root.style.setProperty(inputBg, value)
}
function handleSlider(e) {
let value = e.target.value
root.style.setProperty('--slider', value)
}
let reset = slider.getAttribute('--slider');
let resetter = document.createElement('button');
resetter.textContent = '↺';
resetter.setAttribute('title', reset + unit);
resetter.addEventListener("click",(e) => {
slider.value = reset;
slider.dispatchEvent(
new MouseEvent('input', {view: window, bubbles: false})
);
});
slider.after(resetter);
</script>
</body>
</html>