Fatal编程技术网
  • html/
  • 带有HTML和CSS的可扩展花括号

带有HTML和CSS的可扩展花括号

html css

带有HTML和CSS的可扩展花括号,html,css,Html,Css,有没有一种简单的方法可以用HTML和CSS在LaTeX中模拟amsmath提供的cases环境 例如，在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 \ldo

有没有一种简单的方法可以用HTML和CSS在LaTeX中模拟
amsmath
提供的
cases
环境

例如，在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中做同样的事情

到目前为止，我已经尝试过这个（请参见）：

HTML:

我希望使用这种样式在博客页面上显示博客文章的元数据。然而，到目前为止，我所尝试的方法存在一些问题

  • 首先，当博客文章的标题（或任何一行）变得过长时，它会遇到问题。
    {
    当前设置为固定大小，不会随博客文章的元数据动态缩放。这可以在中看到，其中的“标记”行现在位于花括号的底部下方。如果不可能进行动态缩放，我愿意满足于
    空白：nowrap；
    ，
    溢出：隐藏；
    ，和
    文本溢出：省略号；
    -删除博客文章的元数据，只保留三行文本，而不考虑元数据的长度

  • 我的代码似乎也与字体有关。如果在中取消注释CSS部分顶部的字体更改，您将看到在更改字体后，大括号中间不再与文章日期对齐

  • 括号的缩放方式可能会造成一个非常难看的括号，至少在当前示例的字体中是这样。（也许会有帮助？）

    • 因此，我的问题是，是否有一种方法可以修复我迄今为止尝试过的问题，以解决这些问题，或者是否有更好的方法来处理HTML和CSS。最好的解决方案是只使用HTML和CSS。

    您可以轻松地使用它。您只需要一个
    ：before
    伪元素把卷曲的中间部分放进去，使它的比例非常好

    问题在于潜在的浏览器支持。虽然MDN报告了从IE9开始运行的核心功能，但从我在MDN上看到的情况来看，旧版IE应该（带有
    -ms
    前缀）支持您在这种情况下需要的所有功能

    编辑：
    。遗憾的是，IE10及以下版本中存在混乱。

    不，在HTML和CSS中真的没有办法模仿这些东西。如果你尝试使用大括号“{”，它会变得非常难看，因为笔划宽度会增加。对于200%或250%，这可能是可以忍受的，但对于700%来说则不是

    实用的方法是使用，这是一个广泛使用的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}
\]

    
大支架演示
\[
\正文{2014-01-05}\n
\开始{cases}\text{Lorem ipsum…}\\
\文本{Lorem ipsum…}\\
\文本{Lorem ipsum…}\\
\结束{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>

    
大括号演示2
2014-01-05 
同侧眼线…
同侧眼线…
同侧眼线…
    原则上，您可以只使用MathML代码，而不使用MathJax支持，但是a）这不是真正的HTML（即使HTML5允许以这种方式包括MathML代码，即使是在HTML序列化中），b）浏览器支持会受到限制，主要是Firefox。

    看起来并不像一个合适的大括号。大括号是一个图像，如果需要的话，可以明显不同。还有什么方法可以改变MathJax使用的字体吗？经过一些实验后，我发现CSS
    body
    方法不会改变它。@Adam，这是一个有趣的问题但是实际上是一个单独的问题，可能应该单独讨论（在检查文档之后）.Hmm，好的。我必须进一步研究这个问题。无论如何，+1。感谢你的建议，尽管目前的情况是，我更喜欢只依赖HTML和CSS的解决方案，所以我接受了Niels的答案。未来的提示：cdn.mathjax.org即将结束，请查看迁移提示（也许还可以为将来的读者更新你的文章）。 
    <!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}
\]

    <!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>