loading...

Discussion on: Daily Challenge #22 - Simple Pig Latin

Collapse
alvaromontoro profile image
Alvaro Montoro

CSS (kind of)

Separate the words in <span>s, and add the class "piglatin" to the container.

.piglatin span {
  display: inline-block;
  position: relative;
  margin-right: 1em;
}

.piglatin span::first-letter {
  float: right;
}

.piglatin span::after {
  content: "ay";
  position: absolute;
  left: 100%;
}

The idea is based on floating the first letter to the right using the pseudo-class :first-letter, and then adding "ay" using the pseudo-element ::after... although it doesn't work well with punctuation :-/

You can see a demo running on CodePen:

Collapse
florinpop17 profile image
Florin Pop

Oh, this is nice! ☺️

Collapse
alvaromontoro profile image
Alvaro Montoro

Screen readers still read the sentences right, even when visually they are in pig latin.

Collapse
coreyja profile image
Corey Alexander

So happy to see another CSS solution! It's been awhile lol

Hell of a job!

Collapse
alvaromontoro profile image
Alvaro Montoro

Yes. The last ones have been impossible. But 4-5 out of 22 is not that bad :P