Расширяемая фигурная скобка с HTML и CSS

Есть ли простой способ эмулировать среду cases, предоставляемую amsmath в LaTeX с помощью HTML и CSS?

Например, в LaTeX можно написать:

\documentclass{article}

\usepackage{amsmath}

\begin{document}

\[
\text{2014-01-05} \quad
\begin{cases} \text{Lorem ipsum \ldots} \\
\text{Lorem ipsum \ldots} \\
\text{Lorem ipsum \ldots} \\
\end{cases}
\]

\end{document}

который производит:

enter image description here

Я хотел бы иметь возможность делать то же самое в HTML и CSS.

Итак, да, я пробовал это (см. его JSFiddle):

HTML:

<div id="blog-post-date">
2013-07-01
</div>

<div id="blog-post-brace">
<span style="font-size:700%">{</span>
</div>

<div id="blog-post-content">

    <div id="blog-floater"></div>

    <div id="blog-post-content-child">

        <p>Title: <a href="#" onclick="location.href='http://stackoverflow.com'; return false;"> Blog about stackoverflow with a really, really, really, really, excessively long title in order to demonstrate a problem </a></p>

        <p>Categories: website, help</p>

        <p>Tags: HTML, CSS</p>

    </div>

</div>

И CSS:

/*
body{
        font-family: "Palatino Linotype", Palatino, serif;
}
*/

#blog-post-date{
        display:inline-block;
        width: 5em;
        height: 10em;
        line-height: 10em;
        text-align: center;
        overflow: hidden;
        margin: 0;
        padding: 0;
        font-weight:900;
}

#blog-post-brace{
        display: inline-block;
        width: 2em;
        height: 10em;
        line-height: 10em;
        text-align: center;
        overflow: hidden;
        margin: 0;
        padding: 0;
}

#blog-post-content{
        position: relative;
        display: inline-block;
        width: 20em;
        height: 10em;
        overflow: hidden;
        margin: 0;
        padding: 0;
        font-size: small;
}

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

  • Во-первых, он сталкивается с проблемами, когда заголовок сообщения в блоге (или любая строка, действительно) становится чрезмерно длинным. { в настоящее время установлен на фиксированный размер и не динамически масштабируется с метаданными для сообщения в блоге. Это можно увидеть в примере JSFiddle, где линия "Теги" теперь находится ниже нижней части фигурной скобки. Если динамическое масштабирование невозможно, я готов согласиться на white-space: nowrap;, overflow: hidden; и text-overflow: ellipsis; - на метаданные сообщения в блоге и просто с тремя строками текста, независимо от длины метаданных.

  • Мой код также зависит от шрифта. Если вы раскомментируете изменение шрифта в верхней части раздела CSS в JSFiddle example, вы увидите, что середина фигурного скобки больше не совпадает с датой публикации после изменения шрифта.

  • Способ масштабирования скобки может сделать довольно уродливую скобку, по крайней мере, в шрифте примера, который в настоящее время стоит. (Возможно, этот вопрос и этот ответ мог бы помочь?)

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

Ответы

Ответ 1

Вы можете легко сделать это с помощью border-image CSS. Вам просто нужен псевдоэлемент :before, чтобы поместить средний кусочек курчавого в него, чтобы сделать его очень красивым.

Проблема заключается в потенциальной поддержке браузера. В то время как MDN сообщает, что основные функции, которые должны работать с IE9, говорят, что это IE11 и выше. Из того, что я вижу в MDN, старый IE должен (с префиксом -ms) поддерживать все функции, которые вам нужны для этого случая.

изменить Рабочий пример в IE11, FF и Chrome. К сожалению, это беспорядок в IE10 и ниже.

Ответ 2

Нет, эмуляции таких вещей в HTML и CSS не существует. Если вы попытаетесь использовать скобу "{" в больших размерах, она станет очень уродливой, по мере увеличения ширины хода. Для 200% или 250% это может быть приемлемым, но не для 700%.

Прагматический подход заключается в использовании MathJax, широко используемой библиотеки JavaScript, которая форматирует математические выражения. Он также может обрабатывать подмножество LaTeX:

<!doctype html>
<title>Big brace demo</title>
<script src=
http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML
></script>
\[
\text{2014-01-05} \quad
\begin{cases} \text{Lorem ipsum …} \\
\text{Lorem ipsum …} \\
\text{Lorem ipsum …} \\
\end{cases}
\]

Дело в том, что MathJax обрабатывает HTML-документ и распознает и реализует код LaTeX (который является только символьным данным с точки зрения HTML).

В качестве альтернативы вы можете использовать MathJax для реализации подмножества MathML:

<!doctype html>
<title>Big brace demo 2</title>
<script src=
http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML
></script>
<math>
<mtext>2014-01-05 </mtext>
<mfenced open="{" close="">
<mtable>
<mrow><mtext>Lorem ipsum …</mtext></mrow>
<mrow><mtext>Lorem ipsum …</mtext></mrow>
<mrow><mtext>Lorem ipsum …</mtext></mrow>
</mtable>
</mfenced>
</math>

В принципе, вы можете использовать только код MathML без поддержки MathJax, но a) это не будет действительно HTML (хотя HTML5 позволяет включить MathML-код таким образом даже в сериализации HTML), b) поддержка браузера быть ограниченным, главным образом Firefox.