~alcinnz/rhapsode

ref: 86729618330cab4ab7aca5cc758c6f36f859d7a7 rhapsode/docs/CSS-Speech-Tutorial.md -rw-r--r-- 2.3 KiB
86729618 — Adrian Cochrane Localize CSS into Dutch 4 years ago

Wanted: Guidance on creating a great audio theme. Maybe based on voice acting or public speaking theory.

Rhapsode still lets you apply CSS styles to your webpages, but since it outputs audio rather than video it supports a different set of CSS properties. This page provides an overview of these properties.

#Should it be spoken?

You can use the speak property to determine whether an HTML element should be read aloud or not, and the speak-as property to determine how it reads digits and/or punctuation.

Setting speak: never is not the same as setting voice-volume: silent as the latter still takes up the same ammount of time as it would've to read the text aloud.

#The Voice

You can use the voice-family attribute to select a voice either by age/gender/variant or by it's name. Just like font-family this'll make a big difference to the look of your page.

#Speaking Style

You can alter the voice you choose by varying it's volume, rate, pitch, range, and stress. Doing so helps people pay attention, especially if it reinforces the meaning of your text.

#Keywords & Offsets

All the speaking style properties provides keywords you can use instead of a number. In which case write a number after a keyword to represent an offset from that keyword.

#The CSS Speech "Box Model"

On either end of your text you can place an audio cue to identify it, and on either end of those you can insert additional silence. If two silences are directly adjacent, the smaller one will be removed.

The inner pauses are called the element's rest and the outer ones are called it's pause.

The user agent stylesheet, for example, uses audio cues to indicate list bullets and links. And silence functions exactly like whitespace in a visual browser.

#Text Generation

Rhapsode supports (some of) the same text generation attributes as visual browsers, namely:

  • counter-reset
  • counter-increment
  • counter-set
  • content

Though more may be added in the future.

However unlike visual browsers you can apply the content property the element itself to replace it's own children.