'Is there an efficient way to create static wavy text?

(I'm really sorry if that's not the right way to phrase what I'm looking for.)
I'm trying to create text that looks like this:

this. Further example.

It alternates subscript, normal, superscript, normal... etc.
Currently, I'm writing it like this:

<sub>t</sub>h<sup>i</sup>s<sub>.</sub> F<sup>u</sup>r<sub>t</sub>h<sup>e</sup>r <sub>e</sub>x<sup>a</sup>m<sub>p</sub>l<sup>e</sup>.

I'm individually typing in each < sub > and < sup >. Is there a more efficient way to do this/create this effect? If so, what is it? If not, what are some alternatives? Thank you!

html


Solution 1:[1]

Edit: :nth-child doesn't apply to text as they are not children.

Use the :nth-child() CSS selector. See this answer for styling every third element. Then add the vertical-align property.

Solution 2:[2]

You can do that with js.

testElem.innerHTML = 'string'.map(item => {
  if (item % 3) return `<sub>${item}</sub>`
  if (item % 2) return `<sup>${item}</sup>`
  return item
}).join('')

P. S. Why do you need it?

Solution 3:[3]

I had fun coding this, but it's in JavaScript, not HTML or pure CSS.

function wavyGravy(el, text) {

    const decorators = [
        "<sub>#</sub>",
        "<span style='text-transform: lowercase'>#</span>",
        "<span style='text-transform: uppercase'>#</span>", 
        "<sup>#</sup>",
        "<span style='text-transform: uppercase'>#</span>",
        "<span style='text-transform: lowercase'>#</span>"
    ]
    
    let it = 0;
    let innerHTML = "";
    text.split("").forEach(c => {
       innerHTML += (c === " ") ? c : decorators[it++%decorators.length].replace("#", c);
    })
    
    el.innerHTML = innerHTML;
}
<div id='parent-element'>This is a sample text!</div>
<button onClick="wavyGravy(document.getElementById('parent-element'), 'This is a groovy sample text!')">
Click me!
</button>

Basically what you do is provide a parent element and a text you want to transform. For example if you have an element with the ID "this-element" and want a text "Groovy text!" then you call

let el = document.findElementById("this-element");
const text = "Groovy text!";
wavyGravy(el, text);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Vladyslav Yukhanov
Solution 3 Dropout

Related Questions