-
Notifications
You must be signed in to change notification settings - Fork 0
/
trueritalics.html
83 lines (67 loc) · 4.05 KB
/
trueritalics.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
---
layout: iframe
---
<div id="truerItalics" class="module container container-sm clearfix">
<input id="grsController" type="range" min="-15.00" max="0.00" value="-7.50" step="0.01" >
<div class="slider-group text-right float-left">
<div class="slider-label">Upright<br><span>0</span></div>
<div class="slidecontainer">
<input type="range" min="-15.00" max="0.00" value="-7.50" step="0.01" class="slider" id="grSlider">
<output id="grOutput" class="text-right">-7.5</output>
</div>
<div class="slider-label"><span>-15</span><br>Slanted</div>
</div>
<div class="grs float-left">
<div class="grs-top">
<span class="ital-0">gr</span><span class="ital-1">gr</span><span class="ital-2">gr</span>
</div>
<div class="grs-bottom">
<span class="ital-0">gr</span><span class="ital-1">gr</span><span class="ital-2">gr</span>
</div>
<div id="grsMiddle">
<span class="ital-0" id="ital0">gr</span><span class="ital-1" id="ital1">gr</span><span class="ital-2" id="ital2">gr</span>
<div class="labels">
<span>ital: 0 (off)</span>
<span>ital: 0.5 (auto)</span>
<span>ital: 1 (on)</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
let grSlider = document.getElementById('grSlider'),
o2 = document.getElementById('grOutput'),
grs = document.getElementById("grsMiddle"),
controller = document.getElementById("grsController");
o2.innerHTML = grSlider.value;
o2.style.left = "50%";
document.getElementById('ital0').style.fontVariationSettings = "'MONO' 1, 'CRSV' 0, 'wght' 800, 'slnt' -7.5";
document.getElementById('ital1').style.fontVariationSettings = "'MONO' 1, 'CRSV' 0.5, 'wght' 800, 'slnt' -7.5";
document.getElementById('ital2').style.fontVariationSettings = "'MONO' 1, 'CRSV' 1, 'wght' 800, 'slnt' -7.5";
grSlider.addEventListener('input', function () {
controller.value = this.value;
o2.style.left = 100 - grSlider.value*6.667 *-1 + "%";
let variable = -15 - grSlider.value ;
o2.innerHTML = Math.floor(variable);
grs.style.top = 100 - grSlider.value*6.667 * -1 + "%";
let newStyle = '"CRSV" 0, "CASL" 0, "MONO" 1, "slnt" ' + variable + ', "wght" 800';
document.getElementById('ital0').style.fontVariationSettings = "'MONO' 1, 'CRSV' 0, 'wght' 800, 'slnt' " + variable;
document.getElementById('ital1').style.fontVariationSettings = "'MONO' 1, 'CRSV' 0.5, 'wght' 800, 'slnt' " + variable;
document.getElementById('ital2').style.fontVariationSettings = "'MONO' 1, 'CRSV' 1, 'wght' 800, 'slnt' " + variable;
// document.getElementById('ital2').style.fontVariationSettings = "'CASL' " + ampersandSlider.value;
}, false);
controller.addEventListener('input', function () {
grSlider.value = this.value;
o2.style.left = 100 - grSlider.value*6.667 *-1 + "%";
let variable = -15 - grSlider.value ;
o2.innerHTML = Math.floor(variable);
grs.style.top = 100 - grSlider.value*6.667 * -1 + "%";
let newStyle = '"CRSV" 0, "CASL" 0, "MONO" 1, "slnt" ' + variable + ', "wght" 800';
document.getElementById('ital0').style.fontVariationSettings = "'MONO' 1, 'CRSV' 0, 'wght' 800, 'slnt' " + variable;
document.getElementById('ital1').style.fontVariationSettings = "'MONO' 1, 'CRSV' 0.5, 'wght' 800, 'slnt' " + variable;
document.getElementById('ital2').style.fontVariationSettings = "'MONO' 1, 'CRSV' 1, 'wght' 800, 'slnt' " + variable;
}, false);
function interpolate(value, low1, high1, low2, high2) {
return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
}
</script>