translation styles

For the past couple of weeks, I've been thinking of interesting ways to use CSS to represent the ambiguities inherent in translation. Words very rarely have a true one-to-one equivalence and even ignoring meanings that don't make much sense in a given context, I'm frequently left with two or three reasonable ways to render a word.

So, I thought I'd test out some options. This is a pretty stream-of-consciousness post—I needed a page to test out my ideas and I figured out I might as well make a thing of it.

As an example, I'll be using one of my favorite classical ambiguities, Heroides 1.57–58:

victor abes, nec scire mihi, quae causa morandi,

aut in quo lateas^[1] ferreus orbe, licet!

As a general thing, all of these styles are going to use my code font because I want a monowidth font (I think it just looks nicer to have letter-for-letter equivalence here).

tests

opacity

You, victorious, are absent and I am not allowed to know why you died,

or where in the world you, iron-heartyou hard man, are hiddenburiedretired.

So, this is the first thing I imagined, but I don't love that it makes it straight-up unreadable. I could see myself maybe coming around on that point.

stacking

You, victorious, are absent and I am not allowed to know why you died,

or where in the world you, iron-heartyou hard man, are hiddenburiedretired.

Again, a bit messy, but I could maybe come around on the mess. In this case, though, I don't think that'll happen, if only because I can't figure out how to split the extra space equally above and below the baseline, rather than having all of it below.

opacity + hover

You, victorious, are absent and I am not allowed to know why you died,

or where in the world you, iron-heartyou hard man, are hiddenburiedretired.

I love that this allows me to both represent ambiguities and also to show my choice—I think this might be the best representation of how translation looks inside my brain.

The downside is that it doesn't make the other choices visible to the audience, only the fact that there are other choices (and, to some degree, the number of them).

stacking + hover

You, victorious, are absent and I am not allowed to know why you died,

or where in the world you, iron-heartyou hard man, are hiddenburiedretired.

This option is definitely the best for representing all choices, and I love the way I can use the strikethroughs to represent the choices I didn't make. I can also have multiple choices, just by not striking out more than one choice. I'm pretty pleased with the result; I think this is going to be my go-to.

code

/* opacity */
.ambig-1 {
	color: rgba(var(--main-text), 0.7);
	font-family: var(--code-font);

	*:not(:last-child) {
		position: absolute;
	}
}

/* stacking */
.ambig-2 {
	--ct: 2;

	font-family: var(--code-font);
	box-sizing: border-box;
	display: inline-grid;
	grid-template-rows: repeat(var(--ct), var(--main-size));
}

/* opacity + hover */
.ambig-3 {
	color: rgba(var(--main-text), 0.7);
	font-family: var(--code-font);

	*:not(:last-child) {
		position: absolute;
	}

	&:hover :not(.choice) {
		color:transparent;
	}

	&:hover .choice {
		color:rgb(var(--main-text));
	}
}

/* stacking + hover */
.ambig-4 {
	--ct: 2;

	font-family: var(--code-font);
	display: inline-grid;
	grid-template-rows: repeat(
		var(--ct), 
		calc(var(--main-size) / calc(var(--ct) * var(--ct) * 10))
	); /* i have no idea why the math in that last clause is like that,
	but it is necessary to make it work so. there it is. */

	&:hover {
		grid-template-rows: repeat(var(--ct), var(--main-size));
	}

	&:hover :not(.choice) {
		text-decoration: line-through 0.1rem currentColor;
	}
}

1. It's a favorite because this word is a three-way pun, dependent on a use that only really appears in Ovid: here, it can mean "hidden", "buried" (like, hidden by earth), and "retired" (like, fucked off to the countryside to live out of the public eye).^{^}