Difference between revisions of "CSS Speech"
Jump to navigation
Jump to search
(And again...) |
|||
| (14 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
* This page demonstrates some aspects of the CSS 3 Speech functionality: digits and literal-punctuation. | * This page demonstrates some aspects of the CSS 3 Speech functionality: digits and literal-punctuation. | ||
| + | * Currently these are only supported by VoiceOver on iOS | ||
| + | |||
<html> | <html> | ||
<head> | <head> | ||
<style> | <style> | ||
| − | + | .box { | |
| − | + | border: thin solid black; | |
| − | + | margin:1em; | |
| − | + | padding:.5em; | |
| − | + | } | |
| − | + | .dig { | |
| + | speak: digits; | ||
| + | } | ||
| + | .punc { | ||
| + | speak: literal-punctuation; | ||
| + | } | ||
| + | .spell-out | ||
| + | { | ||
| + | speak:spell-out; | ||
| + | } | ||
</style> | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
| − | <p> | + | |
| − | <p class=" | + | <div class="box"> |
| − | <p class=" | + | <h3>Text with no CSS speech applied</h3> |
| − | <p> John St. | + | <p> it </p> |
| − | <p> Key St | + | <h3>Text with CSS spell-out applied</h3> |
| − | <p class=" | + | <p class="spell-out"> it </p> |
| − | <p class=" | + | </div> |
| − | <p class="dig"> 123 John St. south </p> | + | |
| − | <p class="dig"> 10428 Key St west </p> | + | <div class="box"> |
| + | <h3>Text without literal punctuation applied</h3> | ||
| + | <p> else { return true; } </p> | ||
| + | <h3>Text with Literal punctuation applied</h3> | ||
| + | <p class="punc"> else { return true; } </p> | ||
| + | </div> | ||
| + | |||
| + | <div class="box"> | ||
| + | <h3>Text without digits applied</h3> | ||
| + | <p> 123 John St. south </p> | ||
| + | <p> 10428 Key St west </p> | ||
| + | <h3>Text with Digits applied</h3> | ||
| + | <p class="dig"> 123 John St. south </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> | ||
| + | |||
</body> | </body> | ||
</html> | </html> | ||
[[Category:Techniques]] | [[Category:Techniques]] | ||
| + | [[Category:CSS]] | ||
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
