blog

commit: cfe9f03da07aa9ab75ae6be1c2599274153d580d
parent 37e915867c2aaefa9e16c7dfab3371099559ef89
Author: Haelwenn (lanodan) Monnier <contact@hacktivis.me>
Date:   Sat, 24 Aug 2024 20:27:06 +0200

notes/font-test: Add ability to change the font size

Diffstat:
M
notes/font-test.js
21
+++++++++++++++++++++

1 file changed, 21 insertions(+), 0 deletions(-)
diff --git a/notes/font-test.js b/notes/font-test.js
@@ -12,6 +12,11 @@ var fontfamilies = "";
 	"system-ui", "serif", "sans-serif", "monospace", "cursive", "fantasy", "ui-serif", "ui-sans-serif", "ui-monospace", "ui-rounded", "math", "emoji", "fangsong"
 ].forEach(function(e) {fontfamilies += `\t\t<option>${e}</option>\n`});
 
+var fontunits = "";
+[
+	"px", "pt"
+].forEach(function(e) {fontunits += `\t\t<option>${e}</option>\n`});
+
 var fontweights = "";
 [
 	"100", "200", "300", "400", "500", "600", "700", "800", "900", "950"
@@ -27,6 +32,11 @@ document.getElementById('fontsel').innerHTML = `
 		<input id="fontsel_in" type="text" list="fontfamilies"/>
 		<datalist id="fontfamilies">${fontfamilies}</datalist>
 	</label>
+	<label>Size (<span id="fontsel_size_val">14px</span>):
+		<input id="fontsel_size" type="range" max="30" min="1" step="1" value="14"/>
+		<input id="fontsel_unit" type="text" list="fontunits"/>
+		<datalist id="fontunits">${fontunits}</datalist>
+	</label>
 	<label>Weight (<span id="fontsel_weight_val">400</span>):
 		<input id="fontsel_weight" type="range" max="1000" min="1" step="50" value="400" list="fontweights"/>
 		<datalist id="fontweights">${fontweights}</datalist>
@@ -41,6 +51,17 @@ document.getElementById('fontsel_in').addEventListener('change', (e) => {
 	main.style.fontFamily = e.target.value;
 });
 
+document.getElementById('fontsel_size').addEventListener('change', (e) => {
+	main.style.fontSize = e.target.value + document.getElementById("fontsel_unit").value;
+	document.getElementById('fontsel_size_val').innerText = main.style.fontSize;
+});
+
+document.getElementById('fontsel_unit').addEventListener('change', (e) => {
+	main.style.fontSize = document.getElementById("fontsel_size").value + e.target.value;
+	document.getElementById('fontsel_size_val').innerText = main.style.fontSize;
+});
+
+main.style.fontSize = "14px";
 main.style.fontWeight = 400; // Normal
 
 document.getElementById('fontsel_weight').addEventListener('change', (e) => {