Att använda kodade tecken i uppmärkning och CSS

Intended audience: Kodare av HTML/XML/CSS (som använder texteditorer eller scripts), skriptutvecklare (PHP, JSP, etc.), och alla som behöver ytterligare råd om hur och när man ska använda (eller inte ska använda) andra representationsformer för ett konkret tecken i ett dokument.

Question

Hur kan jag använda kodade tecken i uppmärkning och i CSS, och när bör jag använda sådana, och när inte göra det?

Answer

Vilka typer av kodade tecken kan användas i uppmärkning?

Du kan använda ett kodat tecken (character escape) för att representera alla Unicode-tecken i HTML, XHTML och XML, genom att enbart använda tecken i ASCII.

Numeriska teckenreferenser (numeric character references, NCRs) och namngivna teckenreferenser (named character references) är olika typer av kodade tecken vilka används inom uppmärkning. Så ges nedan exempel på olika sätt att representera tecknet U+00A0 NO-BREAK SPACE.

(Tecknet NO-BREAK SPACE ser ut som ett blanktecken, men det förhindrar radbrytning mellan tecknen på ömse sidor om detta tecknet. I det franska språket används det ofta tillsammans med interpunktion som kolon och utropstecken, vilka föregås av ett blankt tecken, men som själv inte får placeras först på en rad vid radbrytning.)

 
En hexadecimal numerisk teckenreferens. Alla numeriska teckenreferenser börjar med &# och slutar med ;. Bokstaven x anger att det som följer är ett hexadecimalt tal vilket representerar värdet för kodpunkten (code point value) för ett tecken i Unicode. Det hexadecimala talet är inte känsligt för stora/små bokstäver.
<p>Vive la France&#xA0;!</p>
&#160;
En decimal numerisk teckenreferens. Denna använder ett decimalt tal för att representera samma kodpunkt i Unicode.
<p>Vive la France&#160;!</p>
&nbsp;
En namngiven teckenreferens. Detta är en helt annat sätt att koda tecken. Namngivna teckenreferenser definieras i specifikationen av uppmärkningsspråket. Detta betyder till exempel att, för HTML, kan bara en begränsad mängd tecken (definierad i specifikationen av HTML) representeras som namngivna teckenreferenser (och detta utgör endast en liten delmängd av tecknen i Unicode). Observera att sådana namn är känsliga för stora/små tecken: i HTML representerar &Aacute; den versala bokstaven Á, medan &aacute; representerar den gemena bokstaven á.
<p>Vive la France&nbsp;!</p>

Det är värt att påpeka att värdet för numeriska teckenreferenser (såsom &#x20AC; eller &#8364; vilka står för euro-tecknet €) tolkas som Unicode-tecken – oavsett vilken kodning du använder för ditt dokument. Ofta ser man att de som arbetar med innehåll kodat i Windows kodsida 1252 försöker representera euro-tecknet genom att ange &#x80;, eftersom eurotecknet finns i position 80 (hexadecimalt) i Windows kodsida 1252. Men om man använder &#x80; i HTML-innehåll, så borde det faktiskt skapa ett kontrolltecken (control character), eftersom denna kodning ska expanderas till tecknet i position 80 i Unicode-repertoaren. (Men webbläsare brukar helt tyst korrigera detta fel. Se testsidor.)

CSS-kodningar

I CSS representeras kodade tecken på ett annat sätt. För att representera ett tecken genom kodning, så ange först ett omvänt snedstreck, och ange sedan det hexadecimala talet som representerar det önskade tecknets kodpunktvärde i Unicode.

Om det därefter följande tecknet inte är ett av tecknen A–F, a–f eller 0–9, så behöver du inte ange något mer. Följande exempel representerar ordet émotion.

.\E9motion { ... }

Om, å andra sidan, det omedelbart följande tecknet är ett tecken som kan användas för att hexadecimalt ange ett tal, då är det tvetydigt var talets representation slutar. I sådana fall finns det två alternativa tillvägagångssätt. Det första är att använda ett blanktecken efter kodningen. Detta blanktecken är en del av kodningens syntax, och kommer inte att finnas kvar efter det att representationen av det kodade tecknet analyserats. Följande exempel visar hur du kan representera ordet édition.

.\E9 dition { ... }

Alternativt kan du ange ett sexsiffrigt hexadecimalt tal, med eller utan ett avslutande blanktecken. Här följer ett alternativt sätt att skriva édition.

.\0000E9dition { ... }

Eftersom ett blanktecken som följer efter ett hexadecimalt tal räknas som en del i kodningen, så måste du, om du faktiskt vill att det kodade tecknet ska följas av ett blanktecken, ange två blanktecken (efter ett hexadecimalt tal av godtycklig längd).

Omvänt snedstreck kan i CSS även användas före sådana tecken som har speciell betydelse i CSS, för att förhindra att detta tecken hanteras som del i kodningen av ett kodat tecken. Mer information om kodade tecken i CSS finns i CSS Syntax Module.

När man inte bör använda kodade tecken

Det är nästan alltid bäst att använda en teckenkodning i vilken du kan använda tecken på deras normala sätt, istället för att använda namngivna teckenreferenser eller numeriska teckenreferenser.

Om man använder kodade tecken så kan det vara svårt att läsa och underhålla källkoden, och det kan även avsevärt öka filstorleken.

Många engelsktalande utvecklare tror att man i andra språk enbart i begränsad omfattning använder tecken utanför ASCII, men detta är fel.

Tag till exempel följande textstycke i tjeckiska.

Jako efektivnější se nám jeví pořádání tzv. Road Show prostřednictvím našich autorizovaných dealerů v Čechách a na Moravě, které proběhnou v průběhu září a října.

Om du skulle använda numeriska teckenreferenser för alla tecken som inte är ASCII, så skulle detta stycke vara oläsbart, svårt att underhålla, och mycket mer voluminöst. Det skulle naturligtvis bli ännu värre i ett språk som inte använder latinska bokstäver.

Jako efektivn&#x115;j&#x161;&#xED; se n&#xE1;m jev&#xED; po&#x159;&#xE1;d&#xE1;n&#xED; tzv. Road Show prost&#x159;ednictv&#xED;m na&#x161;ich autorizovan&#xFD;ch dealer&#x16F; v &#x10C;ech&#xE1;ch a na Morav&#x11B;, kter&#xE9; prob&#x11B;hnou v pr&#x16F;b&#x11B;hu z&#xE1;&#x159;&#xED; a &#x159;&#xED;jna.

Som nämnts tidigare, så bör man använda direkta tecken snarare än kodade tecken i vanlig text.

Användning i XHTML. Det kan vara problematiskt att använda namngivna teckenreferenser i dokument som skall analyseras som XML, om dessa teckenentiteter definieras separat från ditt dokument, och om de verktyg som bearbetar XML inte läser in externa filer. I sådana fall kommer entitetsreferenserna inte att ersättas av sina motsvarande tecken. Av detta skäl bör du, om du måste använda kodade tecken, helst använda numeriska teckenreferenser, eller definiera - i dokumentet ifråga - de teckenentiteter som du behöver använda.

Om du använder teckenentitetsreferenser definierade av HTML (såsom &aacute;) för att representera tecken i XHTML, så bör du vara uppmärksam på vad som händer när ditt innehåll bearbetas med XML-analysatorer eller andra verktyg.

När man bör använda kodade tecken

Syntax-specifika tecken. Det finns tre tecken som alltid bör kodas när de förekommer i innehåll, så att de inte oavsiktligt påverkar syntaxen av uppmärkningen. Dessa är reserverade delar av språket för alla dokument som baseras på HTML, och för XML.

Du kanske även behöva representera dubbelt citationstecken (") som som &quot;, och enkelt citationstecken (') som &apos; – särskilt i attributtext när du i attributvärden behöver använda samma typ av citationstecken som du använder för att omge attributvärden.

Osynliga eller tvetydiga tecken. En speciellt viktig användning av kodade tecken är när man behöver representera tecken som är osynliga eller tvetydiga vid visuell presentation.

Ett exempel på detta är Unicode-tecknet U+200F RIGHT-TO-LEFT MARK. Detta tecken kan användas för att förtydliga textuell riktning i dubbelriktad text (t.ex. när man använder arabiskt eller hebreiskt skriftspråk). Det har dock ingen grafiskt visuell representation, så det är svårt att se var sådana direktrepresenterade tecken förekommer i text, och om de försvinner eller glöms bort, så kan de ge upphov till oväntade resultat vid senare redigering av innehåll. Om man istället använder &rlm; (eller dess motsvarande numeriska teckenreferens &#x200F;) så är det mycket lättare att upptäcka dessa tecken.

Ett exempel på ett tvetydigt tecken är U+00A0 NO-BREAK SPACE. Denna typ av blanktecken förhindrar radbrytning, men, när det används som tecken, så ser det ut som vilket annat blanktecken som helst. Om man använder &nbsp; (eller &#xA0;) så blir det lättare att upptäcka var sådana blanktecken förekommer i texten.

Inmatningsproblem. Om ditt redigeringsverktyg inte gör det lätt att direkt mata in de tecken du behöver använda, så kan du vara tvingad att tillgripa kodade tecken. Observera att detta inte är en långsiktig lösning, och inte heller en smidig lösning om du måste mata in många sådana tecken – det tar längre tid och gör det svårare att underhålla innehåll. Idealfallet är att du kan välja ett redigeringsverktyg som ger dig möjlighet att mata in dessa tecken i direkt form. Alternativt, om du bara vid sällsynta tillfällen behöver använda besvärliga tecken, så kan du använda ett inmatningsverktyg som arbetar med teckenavbildningar (character map tools) eller en teckenväljare.

Ofullständiga teckenkodningar. Kodade tecken kan vara praktiskt att använda för att representera tecken som inte stöds av den teckenkodning du valt för dokumentet, t.ex. för att representera kinesiska tecken i ett dokument med Windows-1252 som teckenkodning. Du bör dock först fundera på om det inte vore bäst att byte teckenkodningen för dokumentet till UTF-8, som ju täcker alla tecken du behöver.

Att använda kodade tecken i formateringsattribut

Observera! Det är bäst att använda teckenkodningen UTF-8 i formatmallar, så att du direkt kan använda tecknen i CSS-deklarationer. Denna sektion beskriver vad som bör göras i de sällsynta fall när du kan ha valt att använda kodade tecken.

Det är vanligtvis en bra idé att placera formateringsinformation i en extern formatmall eller i ett style-element i huvudet av en HTML-fil. Av och till, eller kanske rent temporärt, kan du istället använda ett style-attribut på ett visst element. I ännu mer sällsynta fall kan du vilja representera ett eller flera tecken i ett style-attribut genom att använda kodade tecken.

I ett style-attribut i HTML kan man representera tecken med numeriska teckenreferenser, genom namngivna teckenreferenser, eller genom att använda CSS-kodade tecken. Å andra sidan kan style-elementet i HTML vare sig innehålla numeriska teckenreferenser eller namngivna teckenreferenser, och detsamma gäller för en extern formatmall.

Eftersom det är vanligt att flytta formateringsdeklarationer från attribut till formateringselementet, eller till en extern formatmall (vilket t.ex. kan ske automatiskt genom att använda något program eller skript), så är de säkrast att enbart använda CSS-kodade tecken.

Så är det till exempel bättre att formulera sig som

<span style="font-family: L\FC beck">...</span>

än att formulera sig som

<span style="font-family: L&#xFC;beck">...</span>

By the way

Om du byter angiven teckenkodning till UTF-8, så måste du spara din fil. Om du använder teckenkodningen UTF-8 för din sida, så kan du nästan helt undvika att koda tecken, och istället arbeta med direkta tecken. Observera dock att om du vill ändra teckenkodningen av ditt dokument, så räcker det inte med att bara ändra deklarationen av teckenkodningen (vilken typiskt förekommer i början av dokumentet) eller bara ändra deklaration av teckenkodning för din webbserver. Du måste även spara undan ditt dokument i den kodningen. För att förstå hur du gör detta med dina redigeringsverktyg, se mer om detta i Setting encoding in web authoring applications.

Hex vs. decimal. Unicode-standarden använder normalt hexadecimalt värde när den refererar till eller ger en lista av tecken. Så kan till exempel kodpunkten för bokstaven á refereras till som U+00E1. Eftersom detta är en så vanlig konvention, så är det ofta praktiskt (även om inte nödvändigt) att använda hexadecimala värden snarare än decimala värden i numeriskt kodade tecken. Du behöver inte ange inledande nollor i numeriskt kodade tecken, dvs á skulle kunna representeras som &#xE1;.

Tilläggstecken (supplementary characters). Tilläggstecken kallas de Unicode-tecken som har kodpunkter högre upp jämfört med tecknen i Unicodes Basic Multilingual Plane (BMP). I UTF-16 kodas ett tilläggstecken genom att använda två 16-bitars surrogatkodpunkter från BMP. Av detta skäl förekommer missuppfattningen att tilläggstecken måste representeras med två kodade tecken, men det är ett felaktigt antagande – du måste använda det unika kodpunktvärdet för det aktuella tecknet. Därför ska du till exempel använda &#x233B4; och inte &#xD84C;&#xDFB4;.

Enkla och-tecken (&, ampersand). Fastän webbverktyg för HTML ofta försöker korrigera förekomst av ett enkelt och-tecken (&), så bör du aldrig själv placera ett enkelt och-tecken (&) i dina dokument. Du bör bör speciellt uppmärksamma URI:er som innehåller parametrar. Till exempel bör ditt dokument innehålla http://example.org/my-script.php?class=guest&amp;name=user istället för http://example.org/my-script.php?class=guest&name=user.