Extensible curly bracket with HTML and CSS

Question

Is there an easy way to emulate the cases environment provided by amsmath in LaTeX with HTML and CSS?

For example, in LaTeX, one can write:

\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}

which produces:

I would like to be able to do the same thing in HTML and CSS.

So, far, I've tried this (see it on 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>

And 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;
}

I'm hoping to use this kind of styling to display the metadata for blog posts on a blog page. What I have tried so far, however, has a few problems.

1. First, it runs into problems when the title of the blog post (or any line, really) becomes excessively long. The { is currently set to a fixed size and does not dynamically scale with the metadata for the blog post. This can be seen in the JSFiddle example, where the "Tags" line is now below the bottom of the curly bracket. If dynamic scaling is impossible, I would be willing to settle for white-space: nowrap;, overflow: hidden;, and text-overflow: ellipsis;-ing the metadata of the blog post and just having three lines of text, regardless of the length of the metadata.

2. My code also seems to be font-dependent. If you uncomment the font change at the top of the CSS section in the JSFiddle example, you will see that the middle of the curly bracket is no longer aligned with the date of the post after changing the font.

3. The way that the bracket is scaled can make for a pretty ugly bracket, at least in the font of the example as it currently stands. (Perhaps this question and this answer could help?)

Thus, my question is whether there is a way to fix what I have tried so far in order to address these problems or whether there is a better way to go about doing this with HTML and CSS. Preferably, the solution would only use HTML and CSS.

Answer 1

You can easily do this with CSS border-image. You'd just need a :before pseudoelement to put the middle bit of the curly in there to make it scale really nice.

The problem is potentially browser support. While MDN reports the core features to be working as of IE9, others say it's IE11 and up. From what I see on MDN the older IE's should (with -ms prefix) support all the features you need for this case though.

edit: Working example in IE11, FF and Chrome. Regrettably it's a mess in IE10 and below.

Answer 2

No, there is really no way to emulate such things in HTML and CSS. If you try to use a brace “{” in large size, it will get very ugly, as the stroke width increases. For 200% or 250%, this might be tolerable, but for 700% not.

The pragmatic approach is to use MathJax, a widely used JavaScript library that formats mathematical expressions. It can handle a subset of LaTeX, too:

<!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}
\]

The point here is that MathJax processes the HTML document and recognizes and implements LaTeX code (which is just character data from the HTML perspective).

Alternatively, you can use MathJax to implement a subset of 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>

In principle, you could use just the MathML code, without MathJax support, but a) this would not really be HTML (even though HTML5 allows MathML code to be included this way even in HTML serialization), b) browser support would be limited, mainly Firefox.