Börja använda citat Markerar Korrekt sätt

Citatmärken, talmärken, inverterade kommatecken; Oavsett vad du kallar dessa former av skiljetecken kan du använda dem felaktigt. Låt oss ta en snabb titt på vad som är korrekt, vad som inte är och vad du kan göra inom din CSS för att se till att dina citat är korrekt formaterade.


Snabbt terminologi

Låt oss börja med att illustrera vad vi pratar om här. Det finns flera former av vad vi känner igen som citattecken, och varje har sitt eget specifika syfte. När du skriver beteckningar, ska du använda "smarta citat" eller "lockiga citat":


Det gäller både dubbelt och enkla citattecken.


Och även apostrofer:


På webben ser du vanligtvis "dumma citat". Dessa är raka versioner, som ofta används på grund av standardinställningar i CMS och applikationer. Även ditt tangentbord gör det vanligtvis svårt att använda allt annat än dumma citat.



Dumma citat ska inte misstas för "primer"; separata glyfer som används för att indikera mätning, såsom fötter och tum, koordinater och ännu mer komplicerade enheter som används vid klocktillverkning, till exempel.


Primer är vanligtvis annorlunda än dumma citat genom att de sned sig något, men det är förstås helt ned till typsnittet.

Så vad är dumma citat för då?!

Koda. Det är ganska mycket det enda stället du bör använda tekniskt.


Använda korrekta citat

Som nämnts kommer ditt tangentbord inte att hjälpa dig mycket när du försöker använda korrekta citat. I själva verket, när jag skriver detta, kastar jag dumma citat överallt - jag måste göra en sökning och ersätta efteråt!

Om ditt dokument använder charset utf-8

 

då kan du klistra in de korrekta citattecken direkt. Alternativt måste du använda de HTML-namngivna eller numeriska enheterna eller (för CSS) de escaped unicode-värdena:

glyf namngiven enhet numerisk enhet flydde unicode

\ 201C

\ 201D

'

\ 2018

'

\ 2019

Citat i CSS

Vi kan använda citat egendom i CSS för att se till att vår och

elementen är ordentligt dekorerade med rätt citattecken. De citat egendom accepterar fyra värden i följd, var och en definierar vilket tecken som ska användas under varje omständighet:

  • Öppnande offert
  • Avslutande citat
  • Öppnar kapslade citat
  • Avslutande näst citat

Det kan se lite ut så här:

 q, blockquote quotes: "\ 201C" "\ 201D" "\ 2018" "\ 2019"; 

Här riktar vi in ​​både citat och blocknoteringar. Vi använder escaped unicode-värden (nämnd i tabellen tidigare) för att diktera vilka glyfer som ska användas för att öppna och stänga våra citatelement. Vi har sagt att vi vill ha ett dubbelnoteringsmärke för att öppna, då dubbel stängningsmärke för att stänga. Nested quotation-element kommer att ha ensammärkningar.

Ta en titt på denna demo. I det ser du en

ingen styling applicerad, då en med korrekt styling.

Notera: Dessa citattecken slits in med pseudoelement, så bara stödjande webbläsare kommer faktiskt att visa citatmärken på detta sätt.

Jag vill ha mer makt!

Ytterligare egenskaper ger oss ännu mer kontroll. Vi kan fortsätta att specifikt styra dessa pseudoelement, med angivande av huruvida vi vill att öppningen eller slutmärkena ska visas alls.

 q: före, blockquote: före innehåll: öppet citat;  q: efter, blockquote: efter content: no-close-quote; 

I den här koden har vi ändrat innehållet i pseudoelementen och sagt att vi faktiskt inte vill ha en avslutande citat som ska visas.


Language Gap

Inte alla visar citatmärken på samma sätt. Ta en titt på vad franska använder, till exempel.


Dessa kallas guillemets (nej, inte guillemots) och de är bara ett exempel på alternativa citattecken. Lyckligtvis är vi fria att använda rätt enheter för vilket språk vi behöver. Och vi kan rikta oss mot lang attribut på html element för att vara specifikt (tack fliptheweb för det lilla tipset).

  ... 
 html [lang = "fr"] q quotes: "\ 00ab" "\ 00bb"; 

Ursäkta för mon français också, om jag har gjort det fel ...


Slutsats

Bli smart, det finns ingen ursäkt för att använda dumma citat!


Ytterligare resurser

  • Inline citat på html5doctor.com
  • Rak och lockiga citat på typographyforlawyers.com
  • quotesandaccents.com
  • Teknisk webbtypografi: Riktlinjer och tekniker av Harry Roberts
  • Internationell variation i citattecken på Wikipedia
  • Smarta citat för smarta människor