JSFiddle - React, Tailwind, and code Playground

by Mike Gifford

HTML

<h1>I am Paul, and I speak headings.</h1>

<p class="heidi">Hello, I am Heidi.</p>
<p class="peter"> <span class="special">Can you hear me ?</span>
I am Peter.</p>
<p class="speak-none">This shouldn't be read.</p>
<p class="speak-none">Neither should this.</p>

<p class="display-none">This shouldn't be seen.</p>
<p>Too bad about <span class="acronym">CIDA</span> and also DFATD least not inac. I hope that at 1234 that they call me <span class="digits">1234</span> 
</p>
<p class="romeo" xml:lang="en-US">The French text below will be spoken with an English voice: <span style="voice-family: preserve;" xml:lang="fr-FR">Bonjour monsieur !</span>
The English text below will be spoken with a voice different than that corresponding to the class "romeo" (which is inherited from the "p" parent element): <span style="voice-family: female;">Hello sir!</span>

</p>

CSS

h1, h2, h3, h4, h5, h6 {
    voice-family: paul;
    voice-stress: moderate;
    voice-volume: medium 6dB;
}
p.heidi {
    voice-family: female;
    voice-balance: left;
    voice-pitch: high;
    voice-volume: -6dB;
}
p.peter {
    voice-family: male;
    voice-balance: right;
    voice-rate: fast;
}
span.special {
    voice-volume: soft;
    pause-after: strong;
}
.speak-none {
    speak: none;
}
.voice-volume {
    voice-volume:silent;
}
.display-none {
    display: none;
}
.acronym {
    speak-as: spell-out;
}
.digits {
    speak-as: digits;
}
.pause-before {
    pause-before: strong;
}
.pause-after {
    pause-after: strong;
}
}
h1 {
    voice-family: announcer, old male;
}
p.romeo {
    voice-family: romeo, young male;
}
p.juliet {
    voice-family: juliet, young female;
}
p.mercutio {
    voice-family: young male;
}
p.tybalt {
    voice-family: young male;
}
p.nurse {
    voice-family: amelie;
}