B I U
In any text processor (Microsoft Word, Google Docs, LibreOffice), the "bold", "italic", and "underline" buttons are located next to each other:
For decades, the pattern has been established in our minds that these are properties of the same order. If you want to make bold and italic text, you press two buttons next to each other:
If you want bold and underlined text:
I won't talk about underlined italics - that's for special people.
In HTML tags, it's just as simple. There are three tags: b, i, and u. You can nest them inside each other to get the desired combination:
<b><i>bold italic</i></b> <b><u>bold underlined</u></b> <i><u>please don't</u></i>
But in CSS, these are completely different properties:
{
/* bold */
font-weight: bold;
/* italic */
font-style: italic;
/* underline */
text-decoration: underline;
}
I can somewhat understand font-weight, but I haven't been able to remember the rules for applying the other two properties for 13 years now. If I need to make underlined text and have no hints, I can simply try all the options until it works:
text-style: underline;
font-style: underline;
font-decoration: underline;
text-underline: true;
It's very annoying. I want it either like this:
font-style: bold;
font-style: bold, italic;
font-style: italic, underline;
Or like this:
font-bold: true;
font-underline: true;
font-italic: true;
That's all I need.
Ж К П
В любом текстовом процессоре (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;
Большего мне и не надо.