Difference between revisions of "CSS Speech"

From Level Access Web Labs
Jump to navigation Jump to search
Line 5: Line 5:
 
<head>
 
<head>
 
<style>
 
<style>
.dig {
+
  .box {
speak: digits;
+
    border: thin solid black;
}
+
  }
.punc {
+
  .dig {
speak: literal-punctuation;
+
    speak: digits;
}
+
  }
.spell-out  
+
  .punc {
 +
    speak: literal-punctuation;
 +
  }
 +
  .spell-out  
 
   {
 
   {
  speak:spell-out;
+
    speak:spell-out;
  }
+
  }
 
  </style>
 
  </style>
 
</head>
 
</head>
 
<body>
 
<body>
  
<p>Text with no CSS speech applied</p>
+
<div class="box">
<p> it </p>
+
  <p>Text with no CSS speech applied</p>
 +
  <p> it </p>
 +
  <p>CSS spell-out applied</p>
 +
  <p class="spell-out"> it </p>
 +
</div>
  
<p>CSS spell-out applied</p>
+
<div class="box">
<p class="spell-out"> it </p>
+
  <p>Text without literal punctuation applied</p>
 +
  <p> else { return true; } </p>
 +
  <p>Literal punctuation applied</p>
 +
  <p class="punc"> else { return true; } </p>
 +
</div>
  
<p>Text without literal punctuation applied</p>
+
<div class="box">
<p> else { return true; } </p>
+
  <p>Text without digits applied</p>
<p>Literal punctuation applied</p>
+
  <p> 123 John St. south </p>
<p class="punc"> else { return true; } </p>
+
  <p> 10428 Key St west </p>
 +
  <p>Digits applied</p>
 +
  <p class="dig"> 123 John St. south </p>
 +
  <p class="dig"> 10428 Key St west </p>
 +
</div>
  
<p>Text without digits applied</p>
 
<p> 123 John St. south </p>
 
<p> 10428 Key St west </p>
 
<p>Digits applied</p>
 
<p class="dig"> 123 John St. south </p>
 
<p class="dig"> 10428 Key St west </p>
 
 
</body>
 
</body>
 
</html>
 
</html>
 
[[Category:Techniques]]
 
[[Category:Techniques]]
 
[[Category:CSS]]
 
[[Category:CSS]]

Revision as of 15:34, 2 December 2014

  • 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

CSS spell-out applied

it

Text without literal punctuation applied

else { return true; }

Literal punctuation applied

else { return true; }

Text without digits applied

123 John St. south

10428 Key St west

Digits applied

123 John St. south

10428 Key St west