"Change font" menu option

frontend/static/yw/javascript/owot.js

@@ -35,7 +35,7 @@ function decimal(percentage) {
 	return percentage / 100;
 }
 function normFontSize(size) {
-	return Math.floor(size / 0.1) * 0.1;
+	return Math.floor(size * 10) / 10;
 }
 function deviceRatio() {
 	var ratio = window.devicePixelRatio;
@@ -95,6 +95,7 @@ var fontTemplate           = "$px 'Courier New', monospace";
 var specialFontTemplate    = "$px consolas, monospace";
 var fontOrder              = ["Courier New", "monospace"];
 var specialFontOrder       = ["consolas", "monospace"];
+var fontSize               = 16;
 var initiallyFetched       = false;
 var lastLinkHover          = null; // [tileX, tileY, charX, charY]
 var lastTileHover          = null; // [type, tileX, tileY, (charX, charY)]
@@ -743,10 +744,8 @@ function updateScaleConsts() {
 	tileWidth = Math.ceil(tileW);
 	tileHeight = Math.ceil(tileH);
 
-	var fontSize = normFontSize(16 * zoom);
-
-	font = fontTemplate.replace("$", fontSize);
-	specialCharFont = specialFontTemplate.replace("$", fontSize);
+	font = fontTemplate.replace("$", normFontSize(fontSize * zoom));
+	specialCharFont = specialFontTemplate.replace("$", normFontSize(16 * zoom));
 
 	textRenderCanvas.width = tileWidth + 5;
 	textRenderCanvas.height = tileHeight + 5;
@@ -5162,6 +5161,7 @@ function buildMenu() {
 	menuOptions.goToCoords = menu.addOption("Go to coordinates", w.goToCoord);
 	menuOptions.coordLink = menu.addOption("Create link to coordinates", w.coordLink);
 	menuOptions.urlLink = menu.addOption("Create link to URL", w.urlLink);
+	menuOptions.changeFont = menu.addOption("Change font", w.fontModal);
 	menuOptions.ownerArea = menu.addOption("Make an area owner-only", function() {
 		return w.doProtect("owner-only");
 	});
@@ -6560,7 +6560,8 @@ Object.assign(w, {
 		coordGotoModal: null,
 		urlModal: null,
 		colorModal: null,
-		selectionModal: null
+		selectionModal: null,
+		fontModal: null
 	},
 	styles: styles,
 	backgroundInfo: {
@@ -6670,6 +6671,9 @@ Object.assign(w, {
 	coordLink: function() {
 		w.ui.coordLinkModal.open();
 	},
+	fontModal: function() {
+		w.ui.fontModal.open();
+	},
 	doProtect: function(protectType, unprotect) {
 		// show the protection precision menu
 		elm.protect_precision.style.display = "";
@@ -7302,6 +7306,34 @@ function makeColorModal() {
 	w.ui.colorModal = modal;
 }
 
+function makeFontChangeModal() {
+	var modal = new Modal();
+	modal.createForm();
+	modal.setFormTitle("Set font and font size:\n");
+	var fontInput = modal.addEntry("Font", "text").input;
+	fontInput.id = "font_input";
+	fontInput.setAttribute("list", "font_list");
+	fontInput.value = fontTemplate.split(",")[0].slice(5, -1);
+	var fontDatalist = document.createElement('datalist');
+	fontDatalist.id = "font_list";
+	var fontPresets = ["Courier New", "monospace", "Oxygen Mono", "Roboto Mono", "Cousine", "Noto Sans Mono", "IBM Plex Mono", "Kode Mono", "Inconsolata"];
+	for (let font of fontPresets) {
+		const fontOption = document.createElement('option');
+		fontOption.innerText = font;
+		fontDatalist.append(fontOption);
+	}
+	modal.inputField.append(fontDatalist);
+	var fontSizeInput = modal.addEntry("Font size", "text", "number").input;
+	fontSizeInput.id = "fontsize_input"
+	fontSizeInput.value = fontSize;
+	modal.onSubmit(function() {
+		w.changeFont(`$px '${fontInput.value}', monospace, legacycomputing`);
+		fontSize = parseFloat(fontSizeInput.value);
+		updateScaleConsts();
+	});
+	w.ui.fontModal = modal;
+}
+
 function makeSelectionModal() {
 	var headerBar = document.createElement("div");
 
@@ -8075,6 +8107,7 @@ function begin() {
 	makeCoordGotoModal();
 	makeURLModal();
 	makeColorModal();
+	makeFontChangeModal();
 	makeSelectionModal();
 	addColorShortcuts();
 	updateColorPicker();

frontend/static/yw/javascript/renderer.js

@@ -871,7 +871,7 @@ function renderChar(textRender, offsetX, offsetY, char, color, cellW, cellH, pro
 	var checkIdx = 1;
 	if(char.codePointAt(0) > 65535) checkIdx = 2;
 	var isSpecial = char.codePointAt(checkIdx) != void 0;
-	isSpecial = isSpecial || (cCode >= 0x2500 && cCode <= 0x257F);
+	isSpecial = isSpecial || cCode >= 0x2500 && cCode <= 0x257F || cCode >= 0x1CC00 && cCode <= 0x1CCF9 || cCode >= 0x1CDE6 && cCode <= 0x1CEB3 || cCode >= 0x1F8B3 && cCode <= 0x1F8BB || cCode >= 0x1FB7C && cCode <= 0x1FBF9;
 
 	if(ansiBlockFill && isValidSpecialSymbol(cCode) && !(isHalfShard && !isBold) && !isShadeSkipped) {
 		if(!isOverflow) {

frontend/templates/base.html

@@ -8,6 +8,9 @@
 		<link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
 		<link rel="stylesheet" type="text/css" href="/static/css/site.css{{ staticVersion }}">
 		<link rel="shortcut icon" href="/static/favicon.png">
+		<link rel="preconnect" href="https://fonts.googleapis.com">
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+		<link href="https://fonts.googleapis.com/css2?family=Cousine:ital,wght@0,400;0,700;1,400;1,700&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inconsolata:[email protected]&family=Kode+Mono:[email protected]&family=Noto+Sans+Mono:[email protected]&family=Oxygen+Mono&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
 		{% block endhead %}{% endblock %}
 	</head>
 	<body>
@@ -78,4 +81,4 @@
 			makeCollapsableSections();
 		</script>
 	</body>
-</html>
+</html>