Выравнивание символа по верху соседних букв

Question

Я хочу выровнять символ в HTML по верхам символов рядом с ним. Кажется, мне нужен атрибут css vertical-align, но у меня возникли некоторые проблемы.

Использование vertical-align: text-top не похоже на то, что я хочу, но я подумал, что это следует из чтения спецификации.

В настоящее время я использую vertical-align: 10%, что является разумным решением, за исключением того, что мне нужно рассчитать правильное число для каждой платформы, чтобы оно выглядело правильно. Обнаружение браузером установки значения, которое, я думаю, является правильным, кажется неправильным решением.

Answer 1

Попробуйте тег <sup>. Он предназначен для того, что вы пытаетесь сделать. После того, как вы это сделаете, вы сможете еще больше контролировать его с помощью css.

Пример: M<sup>c</sup>Phe yeilds M ^c Phe

http://www.w3schools.com/TAGS/tag_sup.asp

Если буква "c" слишком мала, просто наберите <style> sup { font-size: 9pt } </style> или что-то в этом роде.

Answer 2

Некоторые из этих идей находятся на правильном пути, но ни одна из них не работает. В итоге я соединил предложение Джоша Стодолы использовать text-transform: uppercase; с предложением Keltex использовать заглавную букву более мелким шрифтом, чтобы иметь псевдо-маленькие заглавные буквы, даже если использование таблиц является неестественным.

Он все еще зависит от размера шрифта и высоты строк, но я могу получить более последовательный эффект, по крайней мере, таким образом.

Предложение использовать <sup> не очень полезно, так как в любом случае мне придется переопределить все его стили, чтобы оно не отличалось от <span>. Семантически может быть разница, но достаточно мала, чтобы это не имело значения.

Answer 3

Комментарий Энтони к вопросу дал мне идею обернуть "c" семантически правильным тегом <sup> (или, я думаю, вы могли бы продолжать использовать <span>), а затем использовать CSS text-transform: uppercase; на нем .

Answer 4

Ужасно, но вы можете использовать ячейки таблицы.

Сначала определите некоторые стили:

.bigletter
{
  font-size:20px;
  line-height:20px;
}
.upletter
{
  font-size:14px;
  line-height:14px;
  vertical-align:top;
}
.downletter
{
  font-size:14px;
  line-height:14px;
  vertical-align:bottom;
}

Тогда HTML:

<tr>
  <td class='bigletter'>M</td>
  <td class='upletter'>C</td>
  <td class='bigletter'>P</td>
  <td class='downletter'>hexxx</td>
</tr>