Расширяемая фигурная скобка с 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="http://stackoverflow.com"> 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;
}

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

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

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

  3. то, как масштабируется скобка, может сделать довольно уродливую скобку, по крайней мере, в шрифте примера, как он в настоящее время стоит. (Возможно!--48-->этот вопрос и ответ может помочь?)

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

2 ответов


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

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

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


нет, на самом деле нет способа эмулировать такие вещи в 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.