Als je doof bent, of als je om een andere reden geen geluid kunt horen, dan mis je veel informatie als je een film kijkt. Knisperende voetstappen, langzaam aanzwellende muziek, nerveus getik op een deur, je hoort het natuurlijk allemaal niet. Nu bestaat er zoiets als closed caption, wat een type ondertiteling is waarbij ook dingen als omgevingsgeluiden en de muziek beschreven worden. Hierdoor krijgt een kijker die informatie wel binnen.
Alleen wordt die auditieve informatie nogal neutraal beschreven. Het geluid van huilend persoon zou bijvoorbeeld beschreven kunnen worden als snikgeluid op de achtergrond. En iemand die lacht zou geschreven kunnen worden als iemand lacht. Heel neutraal, bijna zakelijk, en bovendien allebei in precies hetzelfde neutrale lettertype. Terwijl het toch echt over twee heel verschillende emoties gaat.
Dat kan visueel sterker.
En dat gaan jullie doen.
- Je kan de kennis over vormgeving die je hebt geleerd tijdens de minor technisch toepassen met behulp van CSS
- Je kan verborgen nuance uit een audiotrack overtuigend vertalen naar visuele typografische beelden
- Je kan je typografische keuzes onderbouwen.
- Je hebt het experiment niet geschuwd
Je moet kiezen, en je keuze moet je onderbouwen:
De eerste optie is dat je gebruik maakt van het zogenaamde systeemfont van degene die naar jouw werk kijkt. Dit font verschilt per operating system, en het verschilt soms zelfs per versie van het operating system. Het is ook aan te passen door de gebruiker zelf. In dit geval heb je beschikking over normal, bold en italic.
Je kan er ook voor kiezen om gebruik te maken van de complete Brenner familie. Dit is een zeer uitgebreid en uiterst flexibel font. Hier kan je je verdiepen in dit font. Als je kiest voor dit font dan heb je de beschikking over een sans serif, een condensed, een serif, een monotype, een slab, een display en een script versie. En veel van deze versies hebben varianten van light tot bold, en allemaal zowel bold als italic.
Met Brenner zijn er natuurlijk veel en veel meer mogelijkheden dan met systeemfonts. Dat kan zowel een voordeel als een nadeel zijn.
Voor een overzicht, zie de brenner.pdf.
Ik heb een fragment voorbereid. Het gaat om twee scenes uit Blade Runner 2049. De captions staan in de HTML, en ze verschijnen in sync met de video. Kijk maar.
De captions staan in de html, in het bestand index.html. Je kan aan elke paragraaf eventueel een of meer classes toevoegen. Bijvoorbeeld voice1 of voice2 soft. Classes voeg je handmatig toe in de html.
Met JavaScript worden er een paar dingen extra gedaan:
- er wordt aan elke paragraaf een unieke class toegevoegd (
p0,p1, etc) - Elk woord wordt in een aparte
spangezet. Hierdoor kan je elk woord apart stylen, en eventueel ook na elkaar laten verschijnen.
Tijdens het afspeelen wordt er een class on op de caption gezet als hij moet verschijnen, en een class off als hij klaar is. Zowel class on als class off blijft op de caption staan!
De timimg van de captions kan je aanpassen in closed-captions/captions.js.
Er verschijnen ook classes op de body op momenten dat er geluiden worden afgespeeld, zoals sound1 en sound2. Je kan geluiden toevoegen in closed-captions/sounds.js.
let op, de geluiden zijn niet compleet, dit zal je zelf moeten aanvullen.
Je kan er ook voor kiezen om een eigen, beter fragment te gebruiken. Je kan dan de nodige HTML en JavaScript genereren door gebruik te maken van caption generator (in Google Chrome).