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.
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.
Koda. Det är ganska mycket det enda stället du bör använda tekniskt.
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 |
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:
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 Notera: Dessa citattecken slits in med pseudoelement, så bara stödjande webbläsare kommer faktiskt att visa citatmärken på detta sätt. 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. 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. 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 Ursäkta för mon français också, om jag har gjort det fel ... Bli smart, det finns ingen ursäkt för att använda dumma citat!Jag vill ha mer makt!
q: före, blockquote: före innehåll: öppet citat; q: efter, blockquote: efter content: no-close-quote;
Language Gap
lang
attribut på html
element för att vara specifikt (tack fliptheweb för det lilla tipset).
...
html [lang = "fr"] q quotes: "\ 00ab" "\ 00bb";
Slutsats
Ytterligare resurser