A little trick for you when making your games! With the power of the css "display" property, you can make just about anything into an HTML tag!
mytag {
display: inline-block;
}
Or, block, or inline, or anything else found on this list: https://www.w3schools.com/cssref/pr_class_display.asp.
Doing so with anything you want will allow you to use anything you want as if it were an HTML5 tag. How is this useful? Well! Take a look at this CSS:
shaky {
position: relative;
display:inline-block;
animation: .1s shake infinite;
}
@keyframes shake {
0% { transform: skewX(-8deg); }
100% { transform: skewX(8deg); }
}
And then this line of Monogatari:
"y Anyway, I--<shaky>Woah!</shaky> Did you feel that?",
By making <shaky> an inline block, we can apply transform properties to it! That allows us to use the skew transformation method as I've done here to wiggle the line back and forth, which gives us this!
But Remi, why not just use a span with a class?
I mean... you could but... I mean... You could also do thi--Look maybe it's easier I don't know!
Actually, I have a real reason. The only way to select a specific character's NAME in the game to stylize it with CSS is like this:
[data-spoke="characterName"] span {
display: none;
}
And doing so means that it will also select all span tags inside of your text! So if you ever need to stylize the names for any reason, you can't use span tags unless you want them to be stylized the same way the name is stylized, so there.
Anyway! I hope this tip helps you, and if nothing else, I hope you enjoy the opportunity to have shaky text in your game! And remember, inline blocks are BLOCKS so make sure to only use <shaky> on one word at a time, or else, should you come to a line break, it will take all of the words to the next line with them. If you need to do multiple shaking words in a row like this, you're best off doing it <shaky>like</shaky> <shaky>this</shaky>.
Have fun!