Scalable Surrounding Brackets
 
User @tarragon on freenode#css asked if there was a way to make curly backets that expand to always surround a set of contents, no matter how many lines long. There are a few ways you can try to emulate this: use MathML (or MathJAX) to write it as a math formula. Another approach might be to use LaTeX to format your formula and then export the whole thing as an SVG to be embedded in the browser.

But if you're intent on using HTML/CSS the closest you can come (within the standard) is setting a background image of a bracket that stretches the whole height of your containing element. This means that whatever image you use will probably have a narrow range of heights where it looks okay before it's too distorted to look good.

If only CSS had an element height unit like: https://tomhodgins.github.io/element-queries-spec/element-queries.html#eh

… then we would be able to create brackets that had the same `font-size` as the height of their container.

Here's my solution for scalable surrounding brackets in EQCSS: http://codepen.io/tomhodgins/pen/xgPZew?editors=1100