Ouderwets PC-scherm effect
In oude tijden, toen MS-DOS versie 2.0 een modern operating system was, zag het beeld op het PC-scherm er anders uit dan tegenwoordig. Van een palet van 16,7 miljoen (of meer) kleuren was geen sprake, laat staan van software zoals Windows. De schermen konden precies één kleur laten zien. Dat was groen of bruingeel (amber).
Hieronder zie je een venster (<iframe>) met daar iets wat op zo'n oud PC scherm lijkt. Enig praktisch nut heeft het volgens mij niet, maar voor de liefhebbers en/of nostalgici onder ons kan het een leuk gimmick zijn voor een website over oude computers, elektronica, enz.
Inspiratie voor dit item is ontstaan door een artikel in Webdesigner Magazine 95 (mei 2017), pag. 14 t.m. 16.
Dit blad wordt sinds eind november 2017 niet meer gemaakt.
Voor deze site heb ik het voorbeeld voorzien van een echt ouderwets font, nl. van de Amstrad PC1512-2y (codepage 437).
De code van het voorbeeld kun je downloaden om zelf mee aan de slag te gaan, echter zonder de font-bestanden. Op deze pagina vind je informatie over hoe je daar aankomt en hoe je er webfonts van maakt.
- Er worden twee items besproken:
- De werking van het script.
- Toepassen in je eigen site.
- Op deze pagina is het voorbeeld in een <iframe> gezet. Het voorbeeld kan ook als zelfstandig document worden ingezet.
- Zie het item Window-in-Window: Floating frames voor meer informatie over <iframe>.
- De werking van het script
- Het script bestaat uit HTML en CSS. JavaScript komt er niet an te pas. In het voorbeeld staan ze alle twee in het document, maar de CSS kan natuurlijk ook in een aparte, gelinkte file staan.
- Hieronder wordt alleen de code van het voorbeeld in het iframe besproken. De code van het hoofddocument wordt buiten
beschouwing gelaten, maar wordt onderaan de bladzijde wel getoond.
- HTML
- Binnen de <body> bevindt zich één enkele <div>-tag met klasse oldDOS.
- Binnen oldDOS bevindt zich alle content voor het ouderwetse DOS-scherm.
- De content bestaat uit een enkele <p>-tag. Daarbinnen wordt alleen <br> gebruikt voor de regeleinden.
Voor het maken van witruimte in een regel zijn afwisselen gewone spaties en non-breaking spaces ( ) ingezet, omdat
HTML reeksen spaties omzet in één spatie (of helemaal geen spaties als het aan het begin van de regel staat).
- CSS
- De CSS begint met de definitie van het lettertype @font-face. In het voorbeeld is het smalle font van de Amstrad PC 1512 gebruikt, dat geschikt is voor gebruik met codepage 437. Dit font heeft een vaste breedte. Alle karakters zijn dus even breed, zoals dat destijds gebruikelijk was. Dat geeft ook de mogelijkheid om spaties te gebruiken voor het positioneren van de tekst in de opeenvolgende tekstregels.
- Daarna volgt een bescheiden reset van de body. Alleen de noodzakelijke zaken worden ingesteld. Voor de tekstkleur wordt een lichtgroene kleur gebruikt, de achtergrond is zwart.
- Nu is de klasse oldDOS aan de beurt. Hier wordt het met @font-face gedefinieerde lettertype ingeschakeld, samen met de lettergrootte.
- Met de instelling white-space: nowrap; zorg je er voor dat te lange tekstregels niet op de volgende regel doorgaan.
Je kunt je afvragen of dat correct is. Op MS-DOS-PC's gingen te lange tekstregels wel door op de volgende regel. - Met de klasse blinking wordt de knipperende cursor gemaakt (onderaan de pagina). Deze werkt met @keyframes.
De naam van de animatie is cursorBlink.
- Toepassen in je eigen site
- Als eerste het je een lettertype nodig. Op de website int10h.org vind je een hele verzameling oude PC-fonts. Die kun je daar downloaden. Zorg er wel voor dat je het type .ttf (truetype) ophaalt. Het .fon-type kan problemen geven bij de conversie in de volgende stap.
- Om er webfonts van te maken bied je het gekozen .ttf-bestand aan bij fontSquirrel.com
voor de conversie. Je krijgt een gezipte file terug, met daarin de webfont-files, een style-sheet en een voorbeeld in
HTML-formaat.
Waarschijnlijk wordt er alleen geconverteerd naar de formaten .woff en .woff2. In de huidige stand van de techniek (juni 2019) zou dat voldoende moeten zijn. - Download nu de .zip-file van deze site en pak hem uit. Hernoem de file html566a naar index.html of iets dergelijks. Zet de namen van de webfont-files in de CSS en pas de naam van de font-family aan (2x). Je hebt nu een werkend voorbeeld.
- Pas de content van het voorbeeld aan aan je eigen wensen. Zorg er daarbij voor dat een regel niet langer is dan 80 karakters.
- Zet het voorbeeld eventueel in een <iframe;>, zoals hier onder is aangegeven.
- Een paar verwijzingen naar items in deze site die je kunnen helpen bij het toepassen van deze code:
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het <iframe> in het hoofddocument ziet er als volgt uit:
(Zet dit in de <BODY> op de plaats waar het <iframe> moet verschijnen).
<div style="text-align:center">
<iframe width="580" height="300" src="voorbeeld.htm"
style="border:3px outset black;">Helaas kunt u dit deel
van deze webpagina niet bekijken. Deze site gebruikt nl.
Inline Frames (<IFRAME>). Dat wordt door uw browser
niet ondersteund!</iframe>
</div>
De code van het voorbeeld in het <iframe> ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
.
. (CSS-code)
.
.</style>
(Zet dit in de <BODY>).
<div class="oldDOS">
<p>A:\>cd fonts<br>
.
.
.
A:\fonts\><br>
cd ..<br>
A:\<span class="blinking">_</span></p>
<div>
Downloaden:
Druk op de knop:
File: voorb566.zip, 1335 bytes.
