Кавички

Тия дни зачекнах темата с кавичките и уеб представянето им. Ето какво излезе…

В българския език правилните кавички са следните – за отварящи (леви) се използват две кавички, text baseline подравнени и отворени (обърнати) на ляво; за затварящи (десни) се използват две кавички x-height подравнени и отворени (обърнати) на дясно. Можете да видите правилното изписване в този пример на Wikipedia.

В Unicode стандарта, това са символи с номера 201E (отваряща) и 201C (затваряща). Можете да ги намерите (заедно с други пунктуационни символи) в тази таблица в PDF формат.

При въвеждане в HTML документи се препоръчва да се използва цифровия код за тези кавички, който е съответно 8222 и 8220 за отваряща и затваряща (добавя се &# преди числото и ; след него). Друг вариант за добавяне са кодовите имена – bdquo и ldquo (отваряща и затваряща; добавя се & преди името и ; след него). Могат да се извикват и с клавишна комбинация alt+число – alt+0132 и alt+0147 (отваряща и затваряща; използвайте цифрите на numpad-а).

Първоначално си мислех, че браузърите имат някакви различния в интерпретацията на тези кавички, но явно това не е проблемът. Проблемът се състои във факта, че при определени шрифтове точно тези кавички изглеждат ужасно. Един от тези шрифтове е широко употреблявания Verdana. За да тествам с тоя-оня шрифт направих една проста страничка с няколко примера.

Там може да се види, че като цяло серифните шрифтове нямат никакви проблеми, monospaces не е наред работата, а от несерифните Verdana и Lucida Sans Unicode засират положението. Дори Impact се държи много добре.

Тъй като за блога ползвам Требушет, кавичките излизат добре – „ето, правя демонстрация“. Тъй че препоръчвам, ако държите на кавичките да избягвате Вердана.

пп: От бате Гена линкове по темата:

§ 104. Кавички

§ 62. Екранна типография

ппп: От същия бате един CSS код, който ползва псевдо-селекторите :after и :before, което пък ще рече, че не работи под IE:

blockquote {
    quotes: "\201E" "\201C";
}
blockquote:before {
    content: open-quote;
}
blockquote:after {
    content: close-quote;
}

Leave a Reply

Your email address will not be published. Required fields are marked *