Difference between revisions of "CSS Speech"

From Level Access Web Labs
Jump to navigation Jump to search
(And again...)
 
(6 intermediate revisions by 2 users not shown)
Line 7: Line 7:
 
   .box {
 
   .box {
 
     border: thin solid black;
 
     border: thin solid black;
 +
    margin:1em;
 +
    padding:.5em;
 
   }
 
   }
 
   .dig {
 
   .dig {
Line 23: Line 25:
  
 
<div class="box">
 
<div class="box">
   <p>Text with no CSS speech applied</p>
+
   <h3>Text with no CSS speech applied</h3>
 
   <p> it </p>
 
   <p> it </p>
   <p>CSS spell-out applied</p>
+
   <h3>Text with CSS spell-out applied</h3>
 
   <p class="spell-out"> it </p>
 
   <p class="spell-out"> it </p>
 
</div>
 
</div>
  
 
<div class="box">
 
<div class="box">
   <p>Text without literal punctuation applied</p>
+
   <h3>Text without literal punctuation applied</h3>
 
   <p> else { return true; } </p>
 
   <p> else { return true; } </p>
   <p>Literal punctuation applied</p>
+
   <h3>Text with Literal punctuation applied</h3>
 
   <p class="punc"> else { return true; } </p>
 
   <p class="punc"> else { return true; } </p>
 
</div>
 
</div>
  
 
<div class="box">
 
<div class="box">
   <p>Text without digits applied</p>
+
   <h3>Text without digits applied</h3>
 
   <p> 123 John St. south </p>
 
   <p> 123 John St. south </p>
 
   <p> 10428 Key St west </p>
 
   <p> 10428 Key St west </p>
   <p>Digits applied</p>
+
   <h3>Text with Digits applied</h3>
 
   <p class="dig"> 123 John St. south </p>
 
   <p class="dig"> 123 John St. south </p>
 
   <p class="dig"> 10428 Key St west </p>
 
   <p class="dig"> 10428 Key St west </p>
 +
  <h3>Text with Digits and spell-out applied</h3>
 +
  <p class="dig spell-out"> 123 John St. south </p>
 +
  <p class="dig spell-out"> 10428 Key St west </p>
 +
</div>
 +
 +
<div class="box">
 +
  <h3>Wierd Spanish issue</h3>
 +
  <p lang="es">CP2000/CP2501/CP3219A</p>
 +
  <h3>Text with spell-out applied</h3>
 +
  <p class="spell-out"  lang="es">cp2000/cp2501/cp3219a</p>
 
</div>
 
</div>
  

Latest revision as of 01:25, 20 May 2017

  • This page demonstrates some aspects of the CSS 3 Speech functionality: digits and literal-punctuation.
  • Currently these are only supported by VoiceOver on iOS

Text with no CSS speech applied

it

Text with CSS spell-out applied

it

Text without literal punctuation applied

else { return true; }

Text with Literal punctuation applied

else { return true; }

Text without digits applied

123 John St. south

10428 Key St west

Text with Digits applied

123 John St. south

10428 Key St west

Text with Digits and spell-out applied

123 John St. south

10428 Key St west

Wierd Spanish issue

CP2000/CP2501/CP3219A

Text with spell-out applied

cp2000/cp2501/cp3219a