Блог

Я пытаюсь создать стиль HTML, который форматирует абзац аналогично директиве Sphinx:

Я получил довольно хорошее приближение, определив ::before псевдоэлемент, содержащий имя директивы:

 p.todo {
    border-width: 1pt;
    border-color: chocolate;
    padding: 4px 4px 4px 4px !important;
    background-color: bisque;
}

p.todo::before {
    display: block;
    height: 1.6em;
    margin: 8px 2px 8px 2px;
    background-color:firebrick;
    color: white;
    font-weight: bolder;
    content: "  To Do: ";    /* Leading spaces are no-break spaces, 0xA0. */
 

Это содержание…

 <p class="todo">Read the directive, dummy!</p>
 

…производит этот вывод:

Есть две вещи, которые я хочу изменить, но не могу понять.

Во-первых, я хочу центрировать текст заголовка по вертикали. Если я использую vertical-align: middle , мой браузер сообщает мне, что я не могу этого сделать, если я не использую display: inline или display: table-cell . Если я использую display: inline , текст располагается после заголовка, а не под ним:

Если я использую display: table-ячейка, элемент заголовка сжимается, чтобы соответствовать содержимому:

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

Вторая проблема касается левого и правого полей элемента заголовка. В примерах, которые я показал, с каждой стороны есть 4 пикселя пространства, где виден цвет фона элемента директивы. Я хочу, чтобы заголовок был таким же широким, как и элемент директивы, как в выводе Sphinx. Я могу сделать это, изменив p.todo стиль padding-left и padding-right атрибуты на ноль, но это также уменьшает отступы вокруг текста директивы. Я не могу найти способ расширить элемент заголовка до полей элемента директивы, не позволяя тексту директивы делать то же самое.

A final note: You may be tempted to say, “Figure out how Sphinx does it, and do it the same way.” But Sphinx doesn’t compose a directive with a styled paragraph; it does this:

 <div class="admonition-todo admonition">
    <p class="admonition-title>
        ::before
        Todo
    </p>
    <p> text of admonition </p>
</div>
 

The whole point of this exercise is to get a similar result with HTML that is easy to remember and convenient to type. Doing it the way Sphinx does it isn’t the solution; it is the problem!