source ⟩ hypertext ⟩ public ⟩ longs ⟩ en.pug

extends ../../views/layout.pug


append head
	style.
		:root {
			--background: #f8f8f8;
			--text: #333;
			--accent: #c43;
		}

		main {
			max-width: 80ch;
		}

		* {
			box-sizing: border-box;
		}

		#widget {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 1em;
		}

		@media only screen and (max-width: 75ch) {
			#widget {
				display: block;
			}
		}

		.form-group {
			margin-top: 1em;
		}

		textarea {
			width: 100%;
			padding: 0.5em;

			font-family: inherit;
			font-size: inherit;
			color: inherit;

			background: transparent;
			border: 1px solid var(--text);
		}

		#output {
			font-style: italic;
			font-size: 1.1rem;
		}

		li {
			hyphens: none;
		}
	script.
		function longify() {
			let inputText = document.getElementById("inputtext").value;
			let outputStyle = undefined;
			const outputArea = document.getElementById("output");

			if (document.getElementById("radios-17").checked) {
				outputStyle = "17th";
			} else {
				outputStyle = "house";
			}

			if (outputStyle == "house") {
				outputArea.innerText = inputText
					.replace(/s/g, "ſ")
					.replace(/([fſ])ſ/g, "$1s")
					.replace(/ſ([^a-zA-Z0-9_áéíóúàèìòùâêîôûſƿþ]|$|f)/g, "s$1")
					.replace(/ſn([’'])t/g, "sn$1t");
			} else if ((outputStyle = "17th")) {
				outputArea.innerText = inputText
					.replace(/s/g, "ſ")
					.replace(/fſ/g, "fs")
					.replace(/ſ([^a-zA-Z0-9_áéíóúàèìòùâêîôûſƿþ]|$|f|b|k)/g, "s$1")
					.replace(/ſn([’'])t/g, "sn$1t");
			}
		}

block content
	p I recently received an email from an anonymous reader aſking if i had any ſort of programme i uſed to inſert the long S (#[strong ſ]) into texts. Uſually, i inſert theſe manually, but on pages like #[a(href="/garden") #[i The Garden]] and #[a(href="/belief") “What i believe”], i include a ſmall programmatic widget allowing a reader to toggle between long and ſhort S-es as they chooſe. I thought i might preſent a more uſer-friendly verſion here: juſt inſert your #[i ſ]-leſs text into the box below and it will ſpit out an equivalent in either #[a(href="/styleguide") my houſe ſtyle] or a ſtyle more authentic to its uſage in 17 #[sup th]-century Engliſh. (For information about the differences between the two, ſee the footer.)
	#widget
		form
			.form-group
				label(for="radios") Output ſtyle
				label(for="radios-house")
					input#radios-house(type="radio", name="radios", value="1", checked="checked", onchange="longify()")
					|  House ſtyle
				label(for="radios-17")
					input#radios-17(type="radio", name="radios", value="2", onchange="longify()")
					|  17#[sup th]-century
			// Textarea
			.form-group
				label(for="textarea") Input text (short  #[i s] -es only, please)
				.col-md-4
					textarea#inputtext.form-control(name="inputtext", onkeyup="longify()")
		#output
			| Your output will appear here…
	hr
	p My houſe ſtyle tends to take more after works publiſhed in the 18#[sup th] and 19#[sup th] centuries, in the tail end of the long S’s faſhionability, than works in the 17#[sup th] century and earlier, to which the anonymous emailer’s requeſt pertained. In particular:
	ul
		li I write #[strong #[i ſk]] where 17#[sup th]-century works would write #[strong #[i sk]]: #[i a#[strong ſk]ing #[strong ſk]eletons] versus #[i a#[strong sk]ing #[strong sk]eletons] .
		li I write #[strong #[i ſb]] where 17#[sup th]-century works would write #[strong #[i sb]]: #[i le#[strong ſb]ians’ ex-hu#[strong ſb]ands] versus #[i le#[strong sb]ians’ ex-hu#[strong sb]ands] .
		li I write #[strong #[i ſs]] word-medially where 17#[sup th]-century works would write #[strong #[i ſſ]]: #[i a#[strong ſs]eſs le#[strong ſs]ons] versus #[i a#[strong ſſ]eſs le#[strong ſſ]ons] .
	p For more detail, ſee #[a(href="https://www.babelstone.co.uk/Blog/2006/06/rules-for-long-s.html") this poſt on #[i babelstone.co.uk]].