Warning: The magic method Vc_Manager::__wakeup() must have public visibility in /usr/home/mateuszkozlowski/domains/pyrfekt.com/public_html/wp-content/plugins/js_composer_salient/include/classes/core/class-vc-manager.php on line 205 CSS który mówi - Pÿrfekt

Kiedy słyszymy nazwę CSS na myśl przychodzą, jako pierwsze – wygląd, które są opisywane za pomocą stylów, a także ruch i położenie. Mało kto jednak wie, że za popularnymi CSS-ami kryje się także, obecnie już wycofany moduł, który służył nadawaniu własciwości… głosu syntezatorów i czytników głosowych.

Reprezentacja fonetyczna treści tekstowej jest powszechnie używana przecież przez osoby cierpiące na choroby narządu wzroku, jak niewidome czy niewidzące, a także w jakikolwiek inny sposób niemogące korzystać z tekstu pisanego. Jak już zostało to wspomniane, programy takie jak czytniki ekranu pozwalają na interakcję niewidomych użytkowników z interfejsami wizualnymi, które w innym przypadku byłby dla nich niedostępne. Ale istnieją przecież też takie okoliczności, w których słuchanie treści, w przeciwieństwie do jej czytanie, jest preferowane, a nawet bywa i jedynym możliwym wyjściem, niezależnie od fizycznych zdolności i ograniczeń użytkownika. Najbardziej trywialnym i przychodzącycm najszybciej na myśl są kierowcy słuchający audiobooków podczas prowadzenia pojazdów, czy też aplikacje stworzone do nauki małych dzieci czytania.

Już ponad osiem lat temu, bo w sierpniu 2011 roku organizacja W3C, która stoi na straży rozwoju między innymi HTML-a i CSS-a oprublikowała pierwszy szkic modułu, który miał za zadanie definiować sposób generowania głosu przez programy odczytujące na głos treści zawarte na stronach intenrnetowych.

Jeżeli jednak moduł ten jest tak innowacyjny i nietypowy, dlaczego prawdopodnie nigdy o nim nie słyszałeś? Odpowiedź jest niestety, dosyć trywialna. Otóż, ze względu na to, że (prawie) żadna z dostępnych przegladarek internetowych nie nie obsługiwała, został on wycofany przez W3C w sierpniu 2018 roku.

Jak wyglądała jego historia? Kiedy ponad dwadzieścia lat temu opublikowany został standard CSS 2.0, jednym z jego modułów był fonetyczny, w oryginale ACSS (Aural CSS). Szybko jednak jego nazwa została zmieniona, i w standardzie CSS 2.1 funkcjonował on pod nazwą modułu głosowego (CSS Speech Module). Co ciekawe, w specyfikacji standardu, funkcjonował on jedynie jako zarezerwowana nazwa, bez zdefiniowanych własciwości ani przyjmowanych wartości. Dopiero w 2012 roku moduł głosowy osiągnął status CR (Candidate Recommendation – kandydat do włączenia do specyfikacji). Pomimo tego, jego status quo był niezmienny aż do wycofania w w 2018 roku, niedoczewkawszy się, jak już zostało to wspomniane, implementacji w silniku żadnej z popularnych przeglądarek.

Model formatowania fonetycznego

Podobnie jak elementy wizualne znajdują się w przestrzeni będąc opisanymi, marginesami, paddingiem i borderami, również i poszczególne wyrazy i frazy podobnie mogą cechować się właściwościami takimi jak pause (pauza), cue (wstępnie nagrany klip audio umieszczony pod danym adresem URL odtwarzany przed lub po danej frazie) and rest (pauza dopełeniająca).

Model formatowania CSS dla mediów słuchowych opiera się na sekwencji dźwięków i ciszy, które występują w zagnieżdżonym kontekście podobnym do wizualnego modelu pudełkowego, który możnaby nazwać, nawiązując do wizualnego pierwowzoru, dźwiękowym modelem pudełkowym.

Myśląc o CSS-ie, nie można przecież też zapomnieć o takich właściwościach związanych z wyświetlaniem tekstu, jak font, jego rozmiar czy kolor. Także i te cechy zostały poniekąd odzworowane w module związanych z fonetyką. I tak, mamy tutaj dowolność w zmianie typu głosu za pomocą znacznika voice-family (co jak widać jest bezpośrednim odpowiednikiem font-family). Również szybkość mówionego tekstu podlega dostosowywaniu, podobnie jak wysokość głosu (voive-pitch), akcentowanie (voice-stress) czy jego skala (voice-range).

Właściwości głosu

voice-volume

Służy do kontrolowania amplitudy (głośności) dźwięku, który będzie generowany przez syntezator. Można go również użyć do dostosowania względnego poziomu głośności wybranego elementu.

voice-balance

Określa balans (rozkład przestrzenny) wygenerowanego dźwięku w stosunku do pozycji słuchacza. Prawidłowy zakres wynosi od -100 do 100.

speak

Wskazuje, czy dany element może być rendrowany dźwiękowo.

speak-as

Determinuje, jak dany element jest rendrowany – normalnie, literując wyrazy, czytając cyfry osobno, czy też odczytując znaki interpunkcyjne.

Zastosowanie

W celu pokazania, jak omawiany moduł wyglądał i działał w praktyce posłużę się przykładem zamieszczonym przez Wc3 w zasobach dokumentacji, nieznacznie tylko modyfikując go na nasze potrzeby.

Patrząc na zamieszczony poniżej fragment kodu można zobaczyć, jak autor kodu mógł wskazać syntezatorowi mowy, aby wypowiadał wszystkie nagłówki głosem nazwanym „seba”, który używa „umiarkowanego” nacisku (czyli większego niż „normalny”), równocześnie odtwarzając przed każdym wypowiadanym nagłówkiem plik dzwiękowy, który został wcześniej nagrany i wskazany jako adres URL. Przyjmując, że syntezator obsługuje dwa kanały audio w układzie stereo, akapity oznaczone klasą „janina” są rendrowane na lewym kanale audio (z wykorzystaniem damskiego, cichego, wysokiego głosu) a z kolei akapity z o klasie „janusz” odczytywane są używając głosu męskiego, którego szybkość jest większa niż domyślna, redrując się na prawym kanale audio. Poziom głośności tekstów oznaczonych klasą „special” jest niższy niż zwykle, a granica prozodyczna jest tworzona przez wprowadzenie silnej pauzy po danym spanie. Warto tu zwrócić także uwagę, jak element span dziedziczy rodzinę głosu z akapitu nadrzędnego.

h1, h2, h3, h4, h5, h6 {
    voice-family: seba;
    voice-stress: moderate;
    cue-before: url(../audio/bells.mp3);
    voice-volume: medium 2dB;
    }

p.janina {
    voice-family: female;
    voice-balance: left;
    voice-pitch: high;
    voice-volume: -10dB;
    }

p.janusz {
    voice-family: male;
    voice-balance: right;
    voice-rate: fast;
    }

span.special {
    voice-volume: soft;
    pause-after: strong;
    }

...

<h1>Jestem Seba i czytam nagłówki.</h1>
<p class="janina">Cześć, jestem Janina i czytam ten paragraf.</p>
<p class="Janusz">Jestem Janusz.
    <span class="special">Kiedyś to było.</span>
</p>

Na koniec

Również i dla mnie istnienie modułu w kaskadowych arkuszach stylów odpowiedzialnego za mowę był swego rodzaju niespodzianką. Gdyby nie przypadkowe trafienie na artykuł o nim prawdopodobnie nigdy bym nie widział o nim i o jego możliwościach, które nigdy nie znalazły zastosowania. 

Patrząc na obecne trendy, a także coraz większą popularność asystentów głosowych i serwisów, które można obsługiwać jedynie za pomocą głosu, nasuwa się jedno pytanie. Czy jeżeli W3C nie zdecydowała się na wycofanie z użycia tego modułu w 2018 roku, obecnie dostępne oprogramowanie nie wpłynęło by na jego rozkwit i popularyzację? Samo to, że możliwe było definiowanie różnych rodzajów głosu, mogłoby mieć zastosowanie w audiobookach, czy też transkrypcjach wywiadów dostępnych online, co zwiększyło by dostępność treści przedstawianej w postaci tekstowej dla osób, dla których wzrok nie jest podstawowym zmysłem komunikacji.

Zobacz też

Dokumentacja CSS Speech Module na stronie W3C.

Demo zastosowania modułu.

Skomentuj