Speciale karakters in HTML II: applicatie

Het item Speciale karakters in HTML beschrijft hoe je letters met accenten en speciale karakters kunt gebruiken in HTML, onafhankelijk van karaktersets. Daar is ook een overzicht te vinden van de meest gebruikte, beschikbare karakter-entiteiten. Je vindt daar ook een link naar een site waar je alle, in HTML5 bestaande, karakter-entiteiten kunt vinden.

Bij het typen van (lange lappen) tekst is het het handigste om gewoon de speciale karakters en de letters met accenten te gebruiken en later alles om te zetten naar entiteiten. De applicatie op deze site waar je zelf de entiteiten opzoekt is voor dit doel niet handig. Daarom is iets slimmers gemaakt. Deze is bij uitstek geschikt om code in HTML, CSS en JavaScript om te zetten, waardoor het leesbaar wordt in een HTML-document. Op deze site wordt het veelvuldig gebruikt.
Het algoritme is overgenomen uit het programma DoEntities 1.4, dat door mij is ontwikkeld in Visual Basic 2010. Omdat dat alleen werkt met Windows, is er ook een versie van gemaakt in JavaScript.

De JavaScript-versie die hier besproken wordt, heeft een rare eigenschap: Hij werkt niet goed als die wordt geserveerd door een webserver op internet. Extended karakters zoals ¥ en ¤ en worden dan getoond als rare strings zoals Ã¥ en ¤.
Dit ontstaat als de webserver draait op een computer met een andere codepage dan de computer van de gebruiker, en dat is heel vaak het geval. Dit is een issue waar nog geen oplossing voor is, omdat codepages door verschillende fabrikanten worden bedacht en gemaakt. Die fabrikanten werken niet goed samen, waardoor een codepage van de ene fabrikant iets anders doet dan de dezelfde codepage van een andere fabrikant.
Dan is er nog de enorme verscheidenheid in lettertekens wereldwijd. Met Unicode is men al ver met het stroomlijnen daarvan. De samenwerking tussen Unicode en codepages rammelt echter nog aan alle kanten. Een definitieve oplossing zal nog wel even op zich laten wachten.
Lees meer over codepages in dit (Engelstalige) artikel op Wikipedia.

De code van de applicatie kun je downloaden om op je eigen pc/laptop te installeren en/of om zelf aan door te ontwikkelen.
De aanpak om het te installeren vind je verderop in dit verhaal.

• Werken met de applicatie
   
• Kopiëer het te converteren stuk tekst uit je document met CTRL+C.
• Start de applicatie en maak het tekstveld leeg door op de knop "Veld leegmaken" te klikken.
• Plak de tekst in het tekstveld met CTRL+V.
• De applicatie kan 'harde' regeleinden vervangen door <br>. Als je dat wilt zet je het betreffende vinkje aan.
• De applicatie kan dubbele spaties vervangen door   . Als je dat wilt zet je het betreffende vinkje aan.
• Klik op de knop "Vervang extended karakters ". De extended karakters in de tekst worden omgezet, de inhoud van het tekstveld wordt vervolgens geselecteerd.
• Kopiëer de geconverteerde tekst met CTRL+C en plak het in je document met CTRL+V.

N.B.: Voor het converteren van HTML, CSS en JavaScript wordt aangeraden beide vinkjes "aan" te zetten.

• De werking van het script
   
• HTML
• De HTML van de applicatie bestaat uit een enkele <form>-tag met de klasse formulier. Als het formulier wordt gesubmit wordt de JavaScript-function doeHetWerk() aangeroepen.
  De klasse formulier wordt gebruikt om het formulier op te maken.
• Het formulier bevat een <textarea> waar de te converteren tekst in geplakt kan worden, en waar de geconverteerde tekst in verschijnt. Voor de opmaak heeft het de klasse invoer, de communicatie met JavaScript gaat via id = "sourceCode".
• Het formulier heeft twee checkboxen, om de opties <br> toevoegen en dubbele spaties vervangen door &nbsp;  in of in te schakelen. Deze hebben id = "BRcheckbox" respectievelijk id = "SPcheckbox". Beide checkboxen zijn aangevinkt bij het starten van de applicatie.
• De teksten bij de checkboxen zijn gemaakt met <label>-tags. Ze worden in het formulier gepositioneerd met behulp van een <div>-tag.
• Vervolgens zijn er twee knoppen die zijn gemaakt met <input type="…"> :
  
  • Veld leegmaken Dit is een knop van het type button. Via onclick wordt de JavaScript-function veldLegen() geactiveerd.
  • Vervang extended karakters Dit is een knop van het type submit. Een klik activeert de JavaScript-function doeHetWerk().
• Beide knoppen zijn opgemaakt met een inline style.
• Tenslotte is er een gewone link naar deze pagina als gebruikershandleiding.
   
• CSS
• De CSS staat gedeeltelijk in een style-blok en gedeeltelijk in inline styles.
• De CSS is eenvoudig. Het style-blok definieert de klassen formulier en invoer, die hiervoor al zijn genoemd. Ze bevatten geen speciale zaken die extra toelichting vragen.
• Ook voor de inline style geldt dat de CSS eenvoudig is. De opmaak van de knoppen is verschilt alleen in de kleur en gewone / vette letters.
• De omhullende <div>-tag van zorgt ervoor dat de checkboxen netjes in het midden staan.
   
• JavaScript
• Het JavaScript van de applicatie staat helemaal in de head. Alleen de aanroepen staan in het HTML-formulier.
• De data die nodig zijn om extended karakters om te zetten in karakter-entiteiten staan in de lijst myList, die is geprogrammeerd als const. Dit omdat de inhoud van myList een vaststaand gegeven is tijdens de uitvoering van het script, en niet mag veranderen.
• De data in myList bestaat uit paren: eerst het extended karakter, daarna de entiteit, echter zonder de ampersand (&) en de puntkomma. Het aantal elementen in myList is dus altijd een even getal. Als dat om een of andere reden niet het geval is, ontstaat een foutmelding en stopt de uitvoering van het script.
• Als eerste wordt de string myChars gemaakt waarin de extended karakters uit myList worden verzameld. Dit om het vinden van extended karakters in de tekst te vergemakkelijken.
• De function veldLegen() wordt geactiveerd door op de knop Veld leegmaken te klikken. Deze function doet niet anders dan het tekstveld leeg te maken, waarna het tekstveld de focus krijgt (zie het item De focus van een HTML-element wijzigen).
• De function doeHetWerk() wordt geactiveerd door op de knop Vervang extended karakters te klikken. Deze function voert de conversie uit. Dit gaat als volgt:
  
  • De inhoud van het tekstveld wordt opgehaald en in de variabele myOldText gezet. De lengte van deze string wordt bepaald.
  • De variabele myNewText wordt gemaakt; dit is een lege string.
  • De stand van de Checkbox voor het toevoegen van <br> aan het einde van de regel wordt bepaald en opgeslagen in brChecked: true als het vinkje aan staat, anders false.
  • Vervolgens wordt van elk karakter in myOldText apart gekeken of het in myChars staat. Dat gaat via de string-object methode indexOf(). Het resultaat wordt opgeslagen in myPos.
  • Nu wordt er nagekeken of er in myChar een string delimiter staat. Dat is een karakter waarmee het begin en/of einde van een tekststring staat. Binnen Visual Basic (de taal waar dit programma oorspronkelijk in is gemaakt), maar ook in JavaScript, kan dat problemen geven.
    Er wordt gekeken naar Unicode 34 (= ", wordt &quot;), Unicode 39 (= ', wordt &apos;), Unicode 8820 (= “, wordt &ldquo;) en Unicode 8821 (= ”, wordt &rdquo;). De laatste twee worden op het scherm vaak weergegeven als ".
  • Als myChar.chartAtCode(0) één van bovenstaande codes terugggeeft, wordt de bijbehorende entiteit toegevoegd aan . Als dat niet het geval is wordt gekeken of myPos groter of gelijk is aan nul. Als dat zo is wordt de bijbehorende karakterentiteit opgezocht in myList en aan myNewtext toegevoegd.
  • Als myPos kleiner is dan nul staat het karakter in myChar niet in myChars en dus niet in myList. Er wordt dan gekeken of myChar een hard regeleinde (\n) bevat. Als dat zo is én als brChecked gelijk is aan true, wordt "<br>" toegevoegd aan myNewtext.
  • Daarna wordt myChar toegevoegd aan myNewtext.
• Als de hele inhoud van myOldText op deze manier is behandeld, wordt gekeken naar de stand van SPcheckbox. Als deze is aangevinkt wordt via de string-methode replace() alle dubbele spaties in één keer vervangen door &nbsp; plus een spatie. Hierbij wordt de reguliere expressie / /g ingezet. Dit wordt twee keer gedaan, om te zorgen dat een oneven aantal spaties toch goed wordt verwerkt.
• Tenslotte wordt de inhoud van het tekstveld in het formulier vervangen door myNewtext. Het tekstveld krijgt de focus en de volledige inhoud wordt geselecteerd.
• De gebruiker kan de geconverteerde tekst nu eenvoudig naar het klembord kopiëren en in zijn document plakken.
   
• Installeren op je eigen computer
• Maak een map "ergens" op je computer.
• Download de .zip-file en pak hem uit in de map die je zojuist hebt gemaakt.
• •  Op een Windows-PC dubbelklik je op de file doentities.htm. De standaard-browser wordt geopend en de applicatie start op.
• º  Gebruik van een lokale webserver, bijvoorbeeld zoals beschreven in het item Eenvoudige lokale webserver met node.js is ook mogelijk.
• •  Op een Android-tablet heb je een lokale webserver nodig. Ikzelf heb goede ervaringen met de gratis versie van NiM Web Server, te vinden in de Playstore. Deze server kun je eenvoudig in je tablet opsluiten, waardoor er geen internetverbindingen van buiten je tablet ontstaan.
• ∇  Gebruik op een mobiele telefoon is mogelijk, maar werkt niet prettig vanwege de grootte van het scherm(pje).

Downloaden:
 
Druk op de knop:  File: voorb675.zip, 7795 bytes.