Расширяемая фигурная скобка с 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}
что производит:
я хотел бы иметь возможность делать то же самое в 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;
}
я надеюсь использовать такой стиль для отображения метаданных для сообщений в блоге на странице блога. Однако то, что я пробовал до сих пор, имеет несколько проблем.
во-первых, он сталкивается с проблемами, когда заголовок сообщения в блоге (или любой строки, действительно) становится чрезмерно длинным. The
{
в настоящее время установлен фиксированный размер и не динамически масштабируется с метаданными для сообщения в блоге. Это можно увидеть вJSFiddle
пример, где строка "Теги" теперь находится ниже нижней части фигурной скобки. Если динамическое масштабирование невозможно, я был бы готов согласиться наwhite-space: nowrap;
,overflow: hidden;
иtext-overflow: ellipsis;
-ing метаданных сообщения в блоге и просто имея три строки текста, независимо от длины метаданных.мой код также, кажется, зависит от шрифта. Если вы раскомментируете изменение шрифта в верхней части раздела CSS в
JSFiddle
пример, вы увидите что середина фигурной скобки больше не совпадает с датой публикации после изменения шрифта.то, как масштабируется скобка, может сделать довольно уродливую скобку, по крайней мере, в шрифте примера, как он в настоящее время стоит. (Возможно!--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.