Mathjax theorems – CSS for LaTeX-like environments – Custom names

EDIT: As mentionend in the comments, this solutions does not currently work in all browsers.
EDIT2: Paul Siegel has commented below and shared a solution that works again in all browsers. His implementation should be preferred. For ease of reading, I’ve posted his solution on my new blog. Many thanks to him!

————————————————

In a fantastic post on his blog earlier this year, Zachary T. Harmany explained how LaTex-like environments, such as definitions, theorems and proofs, should be done with CSS.

His solution is a great way for writing mathematics on the web and I took his idea one step further, looking for a way to have custom names for theorems, which we would TeX as

\begin{theorem}[Prime numbers]
All odd numbers are prime.
\end{theorem}

To combine such functionality with Zachary’s approach, I got the right idea from BigMacAttack’s answer to a stackoverflow question about a related topic.

Here’s what I am suggesting:

.theorem {
    display: block;
    font-style: italic;
    margin-left: 4.5%; margin-right: 4.5%; margin-top: 2em;
    content: "Theorem ";
}
 
.theorem:before {
    content: inherit;
    font-weight: bold;
    font-style: normal;
}

With this one could write

<div class="theorem" style="content:'Theorem (Prime numbers)';"> 
All odd numbers are prime.</div>

to get

Theorem (Prime numbers) All odd numbers are prime.

For more about this, please visit Zachary’s original post !

Advertisements

3 Comments on “Mathjax theorems – CSS for LaTeX-like environments – Custom names”

  1. reader says:

    hi, unfortunately result is not as expected in Chrome 😦

    • Felix says:

      It seems that you are correct, thanks for pointing that out. It does work in Firefox. Any suggestions on how to improve the snippets for Chrome are appreciated!

      Here’s a fiddle to try it in other browsers: https://jsfiddle.net/jwbys82t/

      • Paul Siegel says:

        This is obviously a bit old, but if anyone else comes across this I came up with a way to do it that should work on all modern browsers. It uses attribute selection.

        “`
        .theorem {
        display: block;
        font-style: italic;
        .theorem:before {
        content: “Theorem. “;
        font-weight: bold;
        font-style: normal;
        }
        .theorem[text]:before {
        content: “Theorem (” attr(text) “). “;
        }
        “`

        Usage:

        “`
        All odd numbers are prime.
        All odd numbers are prime.
        “`

        This would output (modulo formatting):

        “`
        Theorem. All odd numbers are prime.
        Theorem (Prime Numbers). All odd numbers are prime.
        “`


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s