Hover/Tap Translations

A Twist on Translation

Using CSS to create a hover over stanza's to transition original text into its translation.

If not, Winter: Fragments of Sappho are poems translated by Anne Carson from Greek to English.

Hover/Tap the stanza above to activate the effect.

The Code

The layering of the stanzas is created by the parameter webkit-blur in CSS. Combined with :hover, the right z-indexing to layer the paragraphs, and a bit of animation to make the transition smooth to create this effect.

View the code on my CodePen

The Design

Typically, translations are put side to side (or omit the original text outright) like below.

While this is how translations have been presented for ages, and is far more simpler to consume. I feel like it doesn't serve a poem justice. Why? Poems depend a lot on it's originating language. Aspects like phonetics are lost, but even more importantly, there are sayings in one languages that do not have an equivalent in another. So to see this translation as an interpretation becomes the next challenge.

Poem II Stanza 1

.ρανοθεν κατιοθ[σ-
δευρυμ† μεκρητας π[    ].  ναῦον
ἄγνον ὄππ[αι    ]  χάριεν μὲν ἄλσος
μαλί[αν], βῶμοι †δεμιθυμιάμε-
    ωοι [λι]βώντωι·

The poems that are presented are also fragments, as all the text was not able to be recovered fully, and thus makes the translation even more up to the imagination. Anne Carson's translation was chosen as she does create a beautiful interpretation. However, presented like above, it still does not suggest any of the issues the translation may present.

So what if we placed them on top each other?

This is obviously unreadable. So a few more tweaks are made.

With the text layered behind and blurred, it lets the reader see the original text without being intrusive. Hovering over the stanza then allows the user to see the translation, inverting the opacity and blur. This allows the reader to now see the interpretation while seeing the original text hinted behind it, making it more obvious that it isn't one to one. allowing the reader to determine what may or may not be originally intended in the poem.

With the code mentioned earlier, I chose to make the it reveal per stanza as it allows the reader to take the poem at the right pace. Per line would be slow and tedious, even with fast transitions, and any more would break the pace of the poem.

Conclusion

While it may be overkill to present this poem in this way, making the reader more aware of the content they are consuming may be beneficial in certain cases. Would this make sense in a very technical manual? Not at all. But what would Martin Luther King's I have a dream speech look like in Chinese using this format? How would it be interpreted? That would obviously have its own issues in terms of how much to reveal at a time, how close should the text be layered on top the original, etc. Would it even make sense in translating foreign political transcripts? In the case of poetry however, This should be feasible and a different way to present any poems from a foreign language.

Also, a note if to be implemented, there should still be separate tabs for the content so that users/readers can highlight the text easier.