علامت نقل قول، علامت گفتار، کاما معکوس. این اشکال نقطه گذاری را هر چه بنامید، ممکن است به اشتباه از آنها استفاده کنید. بیایید نگاهی اجمالی به مواردی که درست است، چه چیزی درست نیست و چه کارهایی می‌توانید در CSS خود انجام دهید تا مطمئن شوید نقل قول‌های شما به درستی قالب‌بندی شده‌اند، بیاندازیم.
اصطلاحات نقل قول سریع
بیایید با توضیح آنچه در اینجا در مورد آن صحبت می کنیم شروع کنیم. اشکال مختلفی از آنچه ما به عنوان علامت نقل قول می شناسیم وجود دارد و هر کدام هدف خاص خود را دارند. هنگام نقطه گذاری نوشتار، باید از «نقل قول های هوشمند» یا «نقل قول های فرفری» استفاده کنید:
این برای هر دو دوبل صدق می کند و گیومه های تک
و حتی آپستروف ها:
“گیومه های فرفری علامت نقل قول هایی هستند که در تایپوگرافی خوب استفاده می شوند.” – typographyforlawyers.com
با این حال، در وب معمولاً “نقل قول های گنگ” را می بینید. اینها نسخه های مستقیم هستند که اغلب به دلیل پیش فرض های تنظیم شده در CMS ها و برنامه ها استفاده می شوند. حتی صفحه کلید شما معمولاً استفاده از هر چیزی جز نقل قول های گنگ را دشوار می کند.
نقل قول های احمقانه را نباید اشتباه گرفتاول”؛ علامت های جداگانه ای که برای نشان دادن اندازه گیری استفاده می شوند، مانند پا و اینچ، مختصات و حتی واحدهای پیچیده تر مورد استفاده در ساعت سازی، به عنوان مثال.
حروف اول معمولاً از این جهت که کمی مایل هستند با نقل قول‌های گنگ متفاوت هستند، اما این البته کاملاً به نوع فونت مربوط می‌شود.
پس نقل قول های احمقانه برای چیست؟!
کد. این تقریباً تنها جایی است که از نظر فنی باید از آنها استفاده کنید.
استفاده از نقل قول های مناسب
همانطور که گفته شد، وقتی می خواهید از نقل قول های صحیح استفاده کنید، صفحه کلید شما کمک زیادی به شما نمی کند. در واقع، وقتی این را روی صفحه‌کلید انگلیسی Mac OS خود تایپ می‌کنم، از موارد ناخوشایند استفاده می‌کنم:
| گلیف | میانبر صفحه کلید |
| “ |
alt + [
|
| ” |
alt + shift + [
|
| ‘ |
alt + ]
|
| ‘ |
alt + shift + ]
|
هنگام نوشتن HTML، اگر سند شما از charset utf-8 استفاده می کند
1 |
<meta charset="utf-8" /> |
سپس می‌توانید علامت‌های نقل قول صحیح را مستقیماً در آن جای‌گذاری کنید. همچنین، باید از HTML نامگذاری شده یا موجودیت‌های عددی یا (برای CSS) مقادیر یونیکد فرار شده استفاده کنید:
| گلیف | موجودیت نامگذاری شده | موجودیت عددی | از یونیکد فرار کرد |
“
|
“ | “ | \ 201C |
”
|
” | ” | \201D |
‘
|
‘ | ‘ | \ 2018 |
‘
|
’ | ’ | \ 2019 |
نقل قول در CSS
ما می توانیم استفاده کنیم quotes دارایی در CSS برای اطمینان از ما <q> عناصر به درستی با علامت نقل قول درست تزئین شده اند. را quotes ویژگی چهار مقدار را به ترتیب می پذیرد، که هر یک تعیین می کند که در هر شرایط از کدام کاراکتر استفاده شود:
- نقل قول افتتاحیه
- نقل قول پایانی
- باز کردن نقل قول تودرتو
- بستن نقل قول تودرتو
با مقادیر یونیکد فرار (که قبلا در جدول ذکر شد) ممکن است کمی شبیه به این باشد:
1 |
q { |
2 |
quotes: "\201C" "\201D" "\2018" "\2019"; |
3 |
}
|
یا اگر ترجیح می دهید آنچه را که انجام می دهید واضح تر ببینید:
1 |
q { |
2 |
quotes: '“' '”' "‘" "’"; |
3 |
}
|
جالب اینجاست که CSS quotes اموال هیچ تاثیری در <blockquote> (اگرچه مطمئنم قبلا اینطور بود؟).
ما از مقادیر مختلف برای تعیین اینکه کدام حروف برای باز و بسته کردن عناصر نقل قول استفاده می شود استفاده می کنیم. ما اعلام کرده‌ایم که می‌خواهیم یک علامت گیومه دوبل باز شود، سپس علامت بسته شدن دو برابر برای بسته شدن باشد. عناصر نقل قول تودرتو دارای علائم تکی اعمال می شوند.
این علامت های نقل قول با استفاده از عناصر شبه شکاف داده می شوند.
کنترل مستقیم عناصر شبه
ویژگی های بیشتر به ما امکان کنترل بیشتر می دهد. می‌توانیم به طور خاص آن عناصر شبه را کنترل کنیم و بگوییم که آیا مایلیم علائم باز یا بسته شدن اصلاً نمایش داده شوند. این حتی در مورد <blockquote> تگ، که مرورگرها به طور پیش فرض بدون علامت نقل قول نمایش می دهند.
1 |
q:before, |
2 |
blockquote:before { |
3 |
content: open-quote; |
4 |
}
|
5 |
q:after, |
6 |
blockquote:after { |
7 |
content: no-close-quote; |
8 |
}
|
در این کد، محتوای شبه عناصر را تغییر داده‌ایم و می‌گوییم که در واقع نمی‌خواهیم نقل قول پایانی نمایش داده شود.
