Een citaat presenteren à la Teletype
De tekst hierboven wordt — na een korte pauze — karakter voor karakter op het scherm gezet, op de manier zoals dat vroeger gebeurde door een schrijfmachine.
Een Teletype is een schrijvende computer "monitor". Vandaag de dag zie je ze nauwelijks meer, maar in het begin
van het computertijdperk werden ze veel gebruikt. Monitoren waren toen log en duur.
Een Teletype is het beste te vergelijken met een (elektrische) schrijfmachine (bestaan nog wel maar zijn moeilijk te krijgen),
gekoppeld aan een computer. Een andere mogelijke vergelijking is een telex of een naaldenprinter.
Als deze apparaten hebben twee dingen gemeen: Het is verouderde technologie én ze typen karakter voor karakter op papier.
Door die laatste eigenschap te simuleren met HTML en JavaScript, kun je leuke effecten bereiken, vooral om citaten en oneliners
weer te geven op je website.
Op deze pagina wordt getoond hoe je zoiets aan kunt pakken. De code kun je downloaden om zelf te gebruiken.
- Er worden twee items besproken:
- De werking van het script.
- Toepassen in je eigen site.
- Inspiratie voor dit item is ontstaan door de rubriek "Dagelijkse Gebedsinspiratie" in de Bible-app van YouVersion voor Android. Voor deze pagina heb ik iets nagebouwd wat er op lijkt.
- De code bestaat uit HTML, JavaScript en een beetje CSS. Alle code staat in het document, maar gelinkte .css- en .js-bestanden
kunnen natuurlijk ook.
- De werking van het script
- Als de pagina is geladen begint een wachttijd van 2 seconden.
- Daarna wordt met tussenpozen van 0.05 seconde een karakter aan de tekst op het scherm toegevoegd.
- Als het laatste karakter is verwerkt, stopt het script.
- De tekst staat regel voor regel in een array van strings, regeleinden worden door het script toegevoegd.
- HTML
- De HTML bestaat uit een enkele<div>-tag, met id container. Deze tag kan overal in de <body> staan. Een goed vindbare plek, bijvoorbeeld aan het begin van de <body> heeft de voorkeur.
- container dient behalve voor het weergeven van de tekst, ook voor de positionering in het document.
- CSS
- container is relatif gepositioneerd in het document. In het voorbeeld is het gecentreerd in de regel met behulp van margin.
- De afmetingen zijn 400px breed en 200px hoog. Deze afmetingen zijn samen met padding, gekozen om de tekst er goed passend in te krijgen.
- De tekst wordt getoond met een ouderwets PC-lettertype. Hier is dat van de Amstrad PC1512-2y (codepage 437). In het item Ouderwets PC-scherm effect wordt meer over dit font gezegd, o.a. hoe je er aan komt en hoe je webfonts gebruikt.
- De regelhoogte is 30px, vanwege de leesbaarheid.
- JavaScript
- Het script begint met de declaratie van twee constanten (citaat en regels) en vijf variabelen, te weten: verwijzing, karakters, myInterval, rij en kolom.
- citaat bevat het citaat. Het is een array van strings, met één regel van het citaat per array-element. Dit moet voor elke Toepassing apart worden ingesteld.
- regels is het aantal regels in het citaat, dit wordt< automatisch bepaald.
- De vijf variabelen worden door het script zelf ingesteld en gebruikt.
- Als de pagina is geladen, wordt, via window.onload, de function initCitaat() gestart. Deze function zet
een verwijzing naar id container in de variabele verwijzing, maakt container leeg en stelt startwaarden
in op nul voor regel (het regelnummer van het citaat) en kolom (de positie van het onderhanden karakter in de
regel). Ook wordt het aantal karakters in de eerste regel opgeslagen in karakters.
Tenslotte wordt via setTimeout() de function toonCitaat() gestart, na een wachttijd van 2 seconden. - De function toonCitaat() start elke 50 ms (= 0.05 seconde) de function toonKarakter() via setInterval(). De timer wordt bewaard in myInterval.
- toonKarakter() voegt het karakter op positie kolom uit regel rij toe aan container. Daarna wordt kolom vergeleken met karakters.
- Als kolom >= karakters wordt aan container een <br>-tag toegevoegd en wordt de rij opgehoogd.
- Vervolgens wordt gekeken of rij >= regels. Als dat zo is wordt clearInterval() aangeroepen om de herhaalde aanroep van toonKarakter() te stoppen. Anders wordt kolom op nul gezet en wordt karakters opnieuw bepaald voor de nieuwe regel.
- Als echter kolom < karakters wordt kolom opgehoogd.
- Gebruiken in je eigen site
- Download de zip-file en pak hem uit. Bouw de code op zoals hieronder is aangegeven. Je hebt nu een werkend voorbeeld.
- Wijzig de tekst van het citaat in het JavaScript. Voor een lege regel gebruik je een enkele spatie.
- Wijzig eventueel de wachttijd in de regel
setTimeout(toonCitaat,2000); - Wijzig eventueel de snelheid waarmee de tekst wordt getypt, in de regel
myInterval = setInterval(toonKarakter,50); - Wijzig de kleur en het lettertype van de tekst naar je eigen smaak.
- Wijzig de letterhoogte en de regelhoogte van de tekst naar je eigen smaak.
- Pas de grootte van de container aan zodat die in het venster past. Pas eventueel ook de positie van container in de regel aan.
- Wijzig daarbij eventueel de padding binnen de container.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>.)
<style>
@font-face {
font-family: 'px437_amstradpc1512-2yregular';
src: url('../html-5/fonts/px437_amstradpc1512-2y-webfont.woff2') format('woff2'),
url('../html-5/fonts/px437_amstradpc1512-2y-webfont.woff') format('woff');
url('../html-5/fonts/px437_amstradpc1512-2y-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#container {
position:relative;
top:0; left:0;
margin:0 auto;
width:400px; height:200px;
padding:20px;
font-family:'px437_amstradpc1512-2yregular', sans-serif;
font-size:11pt; line-height:30px;
color:green;
}
</style>
<script>
const citaat = ["Japanse wijsheid:"," ","Als het niet van jou is, neem het dan niet.",
"Als het niet goed is, doe het dan niet.", "Als het niet waar is, zeg het dan niet.",
"Als je het niet weet, zwijg dan."]
const regels = citaat.length;
let verwijzing, karakters, myInterval, rij, kolom;
function toonCitaat() {
myInterval = setInterval(toonKarakter,50);
}
function toonKarakter() {
verwijzing.innerHTML += citaat[rij].charAt(kolom);
if (kolom >= karakters) {
verwijzing.innerHTML += "<br>";
rij++;
if (rij >= regels) {
clearInterval(myInterval);
} else {
kolom = 0;
karakters = citaat[rij].length;
}
} else {
kolom++;
}
}
function initCitaat() {
verwijzing = document.getElementById('container');
verwijzing.innerHTML = "";
rij = 0; kolom = 0;
karakters = citaat[rij].length;
setTimeout(toonCitaat,2000);
}
window.onload = initCitaat;
</script>
(Zet dit in de <BODY> op de plaats waar het effect moet verschijnen.)
<div id="container"></div>
Downloaden:
Druk op de knop:
File: voorb128.zip, 883 bytes.
