Telephone Numbers

Abstract

Recent versions of Opera have a voice plug-in which can be used to read out text from the screen. When it comes to telephone numbers however, it tries to be clever, and adds in "thousands", "hundreds" etc. This page is a test case of how to avoid that, and get the text-to-speech browser to read each number out as a digit.

Use Opera, or a seperate text-to-speech browser to read out each of the examples below.

Example

Plain number

01234 567890

speak: spell-out; CSS

01234 567890

speak-numeral: digits; CSS

01234 567890

speak: digits; CSS

01234 567890

Space between digits, and letter-spacing: -0.13em; CSS to remove visual space

0 1 2 3 4 5 6 7 8 9 0

Code Used

  1. <h3>Plain number</h3>
  2. <p>01234 567890</p>
  3.  
  4. <h3>speak: spell-out; CSS</h3>
  5. <p class="spell-out">01234 567890</p>
  6.  
  7. <h3>speak-numeral: digits; CSS</h3>
  8. <p class="speak-numeral">01234 567890</p>
  9.  
  10. <h3>speak: digits; CSS</h3>
  11. <p class="speak">01234 567890</p>
  12.  
  13. <h3>Space between digits, and letter-spacing: -0.13em; CSS to remove visual space</h3>
  14. <p class="tight">0 1 2 3 4<span> </span>5 6 7 8 9 0</p>
  1. .spellout {
  2. speak: spell-out;
  3. }
  4. .speak-numeral {
  5. speak-numeral: digits;
  6. }
  7. .speak {
  8. speak: digits;
  9. }
  10. .tight {
  11. letter-spacing: 0.13em;
  12. }
  13. .tight span {
  14. letter-spacing: normal;
  15. }

Conclusion

For me, the speak: spell-out; worked best. The speak-numeral property seems to have been suggested previously, but since dropped in CSS2.1 and CSS3. speak: digits; statement seems to be CSS3 only, and the final test doesn't look great, relying on changing the content, and fixing it for speech rather than the logical other way around.

Tags