Discussion on: Daily Challenge #22 - Simple Pig Latin

[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:

[Corey Alexander]

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

Hell of a job!

[Alvaro Montoro]

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

[Florin Pop]

Oh, this is nice! ☺️

[Alvaro Montoro]

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