Function $FontBox

src/$FontBox.js:52–194

* @returns {OSGUI$Window}

()

 * @returns {OSGUI$Window}
 */
function $FontBox() {
	const $fb = $(E("div")).addClass("font-box");

	// This complex cast tells it that jQuery's val() method can return a string and not an array of strings.
	// See the types for val().
	const $family = /** @type {JQuery<HTMLSelectElement & { type: "select-one" }>} */(
		$(E("select")).addClass("inset-deep").attr({
			"aria-label": "Font Family",
			"aria-description": localize("Selects the font used by the text."),
		})
	);
	const $size = $(E("input")).addClass("inset-deep").attr({
		type: "number",
		min: 8,
		max: 72,
		value: text_tool_font.size,
		"aria-label": "Font Size",
		"aria-description": localize("Selects the point size of the text."),
	}).css({
		maxWidth: 50,
	});
	const $button_group = $(E("span")).addClass("text-toolbar-button-group");
	// @TODO: localized labels
	const $bold = $Toggle(0, "bold", "Bold", localize("Sets or clears the text bold attribute."));
	const $italic = $Toggle(1, "italic", "Italic", localize("Sets or clears the text italic attribute."));
	const $underline = $Toggle(2, "underline", "Underline", localize("Sets or clears the text underline attribute."));
	// The original text from MS Paint is simply not true: browsers that support vertical writing also work with Latin text
	// However, vertical-lr is a bit weird for Latin text.
	// const $vertical = $Toggle(3, "vertical", "Vertical Writing Mode", localize("Only a Far East font can be used for vertical editing."));
	// So alternate text, which we won't have translations for...
	const $vertical = $Toggle(3, "vertical", "Vertical Writing Mode", localize("Vertical writing is intended for Far East scripts."));
	// const $vertical = $Toggle(3, "vertical", "Vertical Writing Mode", localize("Vertical writing works best with Far East scripts."));
	$vertical.prop("disabled", !supports_vertical_writing_mode());

	$button_group.append($bold, $italic, $underline, $vertical);
	$fb.append($family, $size, $button_group);

	const update_font = () => {
		text_tool_font.size = Number($size.val());
		text_tool_font.family = $family.val();
		$G.trigger("option-changed");
	};

	const originalFamily = text_tool_font.family;
	eachFont((font) => {
		const $option = $(E("option"));
		$option.val(font).text(font.name);
		// Insert in alphabetical order
		const $options = $family.children("option");
		let i = 0;
		for (; i < $options.length; i++) {
			if ($options.eq(i).text().localeCompare(font.name) > 0) {
				break;
			}
		}
		if ($options.eq(i).length) {
			$options.eq(i).before($option);
		} else {