Dev

Ж К П

2020-05-11

В любом текстовом процессоре (Microsoft Word, Google Docs, LibreOffice) кнопки "полужирный", "курсив" и "подчеркнутый" находятся рядом:

Десятилетиями в голове устаканивался паттерн о том, что это свойства одного порядка. Хочешь сделать полужирный курсив, нажимаешь две кнопки рядом:

Хочешь жирный и подчеркнутый:

Про подчеркнутый курсив не буду - это для особенных людей.

В HTML-тегах с этим тоже просто. Есть три тега: b, i и u. Можно вкладывать их друг в друга и получать желаемую комбинацию:

<b><i>полужирный курсив</i></b>
<b><u>полужирный подчеркнутый</u></b>
<i><u>пожалуйста, не надо</u></i>

А в CSS это совершенно разные свойства:

{
/* полужирный */
font-weight: bold;

/* курсив */
font-style: italic;

/* подчеркнутый */
text-decoration: underline;
}

Про font-weight еще более-менее понятно, но правила применения двух остальных свойств я уже 13 лет не могу запомнить. Если нужно сделать подчеркнутый текст, а подсказок взять негде, я могу просто перебрать все варианты, пока не заработает:

text-style: underline;
font-style: underline;
font-decoration: underline;
text-underline: true;

Очень бесит. Хочется либо так:

font-style: bold;
font-style: bold, italic;
font-style: italic, underline;

Либо так:

font-bold: true;
font-underline: true;
font-italic: true;

Большего мне и не надо.

html css