Есть ли символ кавычки, который не плавает высоко над базовой линией?

ProgramBox

Есть ли символ кавычки, который не плавает высоко над базовой линией?

Post author:admin
Запись опубликована:18 декабря, 2022
Post category:Вопросы по программированию

#html #css #unicode

#HTML #css #юникод

Вопрос:

Просматривая мою веб-страницу, я вижу, что кавычки " ' или любой другой вариант, который я пытаюсь найти, например, amp;ldquo; или amp;rdquo; все, как и следовало ожидать, имеют под собой большой пробел — для них нормально, чтобы они плавали над базовой линией.

Существует ли какой-либо символ Unicode или HTML, который является просто знаком кавычки, а не плавает высоко над линией? Я думаю, это эквивалентно вопросу: «Есть ли кавычка, которая вертикально центрирована внутри своего поля?» или «Есть ли кавычка, которая опирается на базовую линию?» что вряд ли существует. Я попытался просмотреть w3.org списки и места, подобные CSS-трюкам, но безуспешно.

Это проблема, потому что при использовании такого глифа в вертикальных макетах Flexbox создается иллюзия большого пространства между ним и элементом ниже.

Я пытался использовать margin-bottom: -8px; знак кавычки, чтобы отрицать это, но это не гибкое решение, особенно после того, как я возился с высотой строки.

Ссылка на скрипку: https://jsfiddle.net/ab6m5fvo /

1. Пожалуйста, опубликуйте фрагмент JSFiddle или StackOverflow, который демонстрирует эту проблему.

2. Добавлена скрипка. Я пытаюсь создать дизайн для блочной кавычки. Это будет левый край блочной кавычки, большой символ кавычки с вертикальной линией сверху и снизу и кавычка справа, если это поможет.

3. Может « быть, и » (двойные угловые кавычки)? u00AB и u00BB

4. Можете ли вы подробнее рассказать о том, когда вы будете работать с пользовательским line-height интерфейсом? Вы всегда можете установить фиксированный и известный line-height только для элемента с двойными кавычками, который делает ваши опасения line-height неуместными.

5. @Dai Я возился со стилем встроенного кода like what you see here . Изменение заполнения для встроенного кода приводит к тому, что фон кода перекрывается с фоном встроенного кода над ним, чего я пытался избежать, изменяя высоту строки. Плюс, общие улучшения читаемости. Ваша точка зрения — это то, что я попробую.

Ответ №1:

Отказ от ответственности :: По состоянию на февраль 2021 года lh устройство не поддерживается никакими основными браузерами. В конечном итоге это будет — но пока мой ответ не сработает).

Я пытался использовать margin-bottom: -8px; знак кавычки, чтобы отрицать это, но это не гибкое решение, особенно после того, как я возился с высотой строки.

Для этого lh и предназначен модуль.

 .flexParent {
  display: flex;
  flex-direction: column;
  height: 100px;
}

.flexParent > .l {
  height: 20px;
  width: 1px;
  background-color: black;
}

.flexParent > .q {
    margin-bottom: -0.4lh; /* NOTE: The value is `-0.4 * lh`, not `-0.41 * h` */
    display: inline-block;
    width: 2em;
}

.flexParent:hover > .q {
  outline: 1px solid blue;
}

 <div class="flexParent">
  <div class="l"></div>
  <div class="q">"</div>
  <div class="l"></div>
</div>

Развернуть фрагмент кода

1. @TemaniAfif Я удалил свои замечания, предполагающие ch , что я не думал, когда писал свой ответ. Этот ответ теперь касается только (официального, но в настоящее время не поддерживаемого) lh устройства. Я действительно думал о том, чтобы предложить ex , поскольку это относится к высоте глифа, но OP хочет получить ответ относительно line-height , и только lh подразделение делает это.

2. ch сработало заклинание, и пока никаких проблем нет

Ответ №2:

Различные низкие кавычки в Юникоде:

 ‚ U 201A SINGLE LOW-9 QUOTATION MARK
„ U 201E DOUBLE LOW-9 QUOTATION MARK
❟ U 275F HEAVY LOW SINGLE COMMA QUOTATION MARK ORNAMENT
❠ U 2760 HEAVY LOW DOUBLE COMMA QUOTATION MARK ORNAMENT
⹂ U 2E42 DOUBLE LOW-REVERSED-9 QUOTATION MARK
〟U 301F LOW DOUBLE PRIME QUOTATION MARK
🙸 U 1F678 SANS-SERIF HEAVY LOW DOUBLE COMMA QUOTATION MARK ORNAMENT

Ответ №3:

Вы могли бы использовать обычные кавычки и пользовательский веб-шрифт, который отображает кавычки по вертикали по центру.

Если вы уже используете веб-шрифт, настройте его так, чтобы один из многих символов кавычек в Юникоде отображался в середине строки.

Или просто используйте изображение или html <svg> -тег.