CSS (kind of)
Separate the words in <span>s, and add the class "piglatin" to the container.
<span>
.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 :-/
:first-letter
::after
You can see a demo running on CodePen:
Screen readers still read the sentences right, even when visually they are in pig latin.
So happy to see another CSS solution! It's been awhile lol
Hell of a job!
Yes. The last ones have been impossible. But 4-5 out of 22 is not that bad :P
Oh, this is nice! ☺️
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
CSS (kind of)
Separate the words in
<span>s, and add the class "piglatin" to the container.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:
Screen readers still read the sentences right, even when visually they are in pig latin.
So happy to see another CSS solution! It's been awhile lol
Hell of a job!
Yes. The last ones have been impossible. But 4-5 out of 22 is not that bad :P
Oh, this is nice! ☺️