What do you use to type the physics equation in your tumblr posts?
I’ve been asked this question in the past and wrote a really long answer to it before Tumblr inexplicably refreshed itself and I lost nearly 2 hours’ work (such is the reason one should always write any long text posts in a word processor and transfer it to Tumblr!), so I’ll try to answer as fully as possible.
There are 3 primary methods I have used on my blog.
See the LaTeX official project website
Recently I have been using an open-source (free!), WYSIWYM (“What You Say Is What You Mean”) typesetting language called LaTeX. It’s like a pretty basic coding language which helps produce minty-fresh-looking documents.
Let’s look at the Biot-Savart law as an example of the output:
My process is as follows:
Write the posts in a LaTeX document.
Compile them using TeX4ht, which produces .html documents and converts anything in an equation environment to an (annoying low-quality) image.
Copy and paste the html code into Tumblr’s HTML editor, which then destroys 99% of the original code in order to “get along with” the text editor (thanks, Tumblr!).
Replace the equation number by its relevant image.
‘Mathematically format’ any quantities in the main text.
What I mean by ‘mathematically format’ is:
Scalar quantities, including lowercase Greek letters representing scalars, should be italicised.
Vector quantities should be written in bold.
Operators (such as brackets, equals signs and the differential element “d” operator (recently, falling out of common practice)) and uppercase Greek letters should not be italicised.
Alternatively, you can use a LaTeX to image online converter such as this one, into which you can type an equation using LaTeX equation codeand it will convert it to an image for download, which you can hence insert onto your blog.
I have used this method in thispost on my blog (see the “Relativistic Correction” section).
This is useful if you don’t have many equations in your post but is time (and computer memory) consuming when bulk posting.
In any steps which involve the HTML editor, youcannot go back to rich text editor after making the changes. So always make these changes last in the editing process.
Serif (equation-style) font when viewing the post on your blog:
This helps when reading posts on your blog itself. Equations generally require a serif font as opposed to a sans-serif font (think Times New Roman compared to Arial, for example) because serif fonts generally use a whole separate character set for italicised letters, whereas sans-serif fonts usually just slant the characters. This makes serif fonts much easier to read in equations and also separates your area quantity “a” from your general sentence component: “a” general component.
Strike-through any equations (highlight and “ctrl + 6”). Note that this step is only for ease so you can select what you want in the text editor then bulk-replace the HTML tags created. Not recommended if you're already using struck-out text for another reason!
Change to the HTML editor, copy and paste into Notepad and make the following changes (use “ctrl + h” to bring up the “Find and replace” window):
Indented equations for viewing on the Tumblr dash:
Equations often need to stand out from the main text, whichis why they’re usually indented or centred on the page. Since Tumblr can’t handle this in its regular text editor we have to find a work-around to indent our equations. I use blockquotes, and since you can’t blockquote an image in the text-editor we have to bea bit cheeky and edit the HTML directly.
Repeat step 2 above and make the following replacements:
Additionally, on your blog theme you can include a little piece of CSS to centre any blockquotes and number them, too! I’ll show you how to do this in a little while.
Unicode is the general kind of text we’re used to. This sentence is written in Unicode, even! I once used Unicode to write equationswhen the equations I required were basic enough for this method.
This technique is quite good because it means that people withslow internet or people on mobile don’t have to wait a long time for images to load but is limited by how complex your equations are (it also looks quite ugly, by comparison). It doesn’t, however, require knowledge of TeX and doesn’t necessarily require expensive software.
Again, let’s use the Biot-Savart Law as an output example:
Or look at this post on my blog.
I have a .txt file that you can download here which contains a lot of useful mathematical Unicode symbols and ones that aren’t there can be Googled or taken from a comprehensive Unicode list like this one. Word also has a handy list of symbols in Insert → Symbol. You can simply copy-and-paste these symbols into your word processor or the Tumblr text editor.
It’s surprising how many mathematical symbols are included in Unicode but, unfortunately, not all these symbols show up on all browsers (especially on Google Chrome, which is lagging behind even Internet Explorer in that respect!) so be careful when using them. You may have noticed that the bra and ket angle brackets in my recent posts appear as blank boxes on Chrome because of this.
To get started load up a word processor (Microsoft Word or the free, open-source Apache OpenOffice) or use an online HTML editor (such as http://www.free-online-html-editor.com/). You may also use Tumblr’s text editor atyour own peril!
Fractions can be produced either:
Using superscript and subscript text separated by a forward slash:
- If using Microsoft word: Use the shortcut ctrl + shft + “+” for superscript and ctrl + “+” for subscript.
- If using HTML: Use structure [num]/[den], where [num] and [den] are the numerator and denominator of the fraction, respectively. This produces:
Using multiple lines separated by em-dashes “—“, aligned using white-spaces (i.e. by hitting the space bar):
Powers can be produced using the tags. For example, x squared, x2, is written in HTML as
or they can be induced using the Microsoft Word shortcut ctrl + shft + "+" detailed above.
Indexes can be produced using the tags. For example, the nth iteration of x, xn, is written in HTML as
or the Microsoft Word shortcut, ctrl + "+" from above.
Note that the tags represent italics.
Limits can be produced either:
Using subscript as lower limit and superscript as upper limit, following the example for fractions.
Using the limits on the lines above or below the equation, aligned using spaces.
Using an HTML structure which aligns the text vertically.
This will unfortunately only work when viewed on your blog and will mess up the formatting when viewed on Tumblr’s dash and of any subsequent text-reblogs of the post.
Large operators such as summations or integrations can be produced using HTML:
Again, this will only work when viewed on your blog andwill mess up the formatting on Tumblr’s dash and of any subsequent text-reblogs of the post.
This method has been used in this post (though I'm thinking about changing that because I like people to be able to reblog my posts.)
I use blockquotes to apply mathematical formatting to standalone Unicode equations. This method:
Indents the equations on the dashboard.
Allows me to easily apply a particular style toequations on my blog.
Point 2. may seem a little elusive. Essentially, what I havedone is provided my theme with CSS that centres any blockquotedtext and changes it to a slightly-larger, well-spaced serif font. I have also given posts equation numbering based on the number of blockquotes in a text post. The codes for this is as follows.
blockquote{ padding:0.2em 0.5em 0.2em 0.5em; border-left: 3px dotted #f3f3f3; border-right: 3px dotted #f3f3f3;}blockquote p { text-align: center; font-family: Times New Roman, Times, serif, Palatino, serif; font-size: 120%; line-height: 125%; padding: 1em 0em 0.25em -2em; margin-bottom: none; background-color: none;}
Equations numbering code:
.text-post { position: relative; top: 0pt; counter-reset:eq;}.text-post blockquote::after { float:right; margin-top:-2em; text-align:right; counter-increment: eq; content: "(" counter(eq) ")";}
Note that in the main body, I use
to signify text posts in my theme.
If you make a lot of reblogs (which I generally don’t) you may not want blockquotes with a different font. If I want to use a blockquote (including on reblogs) without a serif font you will need to go into the HTML of the post and use the following code to replace all of the pre-existing
This code makes the font regular size and changes the font family to Helvetica or, failing that, a generic sans-serif font. It sort of forces the theme back to normal. Unfortunately, it will not align the text back to the left margin. You may wish to change Helvetica to whichever font your theme uses.
Microsoft Word also has an in-built equations editor, induced using alt + “+”, or by clicking Insert → Equation. This equations editor uses LaTeX formatting (since it basically uses a TeX engine) and can be exported into images in a similar way to TeX4ht.
Simply create your document and once finished go on File → Save As… and under “Save As Type" select “Web Page (.htm)”. This should convert equations to images.
Again you can open the web page, right click and select “View Source,” which should open up the HTML code and you can copy and paste this into the Tumblr HTML editor. You will haveto upload equation images and format the post to look how you want. See the “Using LaTeX” section formore in-Tumblr editing advice.
It’s worth noting that Microsoft Office is a costly software package, so if you’re short on cash go for the LaTeX option. I won’t suggest anything illegal here! ;)
I don’t personally use this technique because Word equationsstick out like an ugly, sore thumb but it is certainly the simplest method!
See the MathJax official website and documentation
There is another way to use LaTeX on Tumblr. It's a sort of web-'app' that you can install into your blog's CSS to look for any LaTeX code and convert it to nicely formatted equations. Unfortunately it only works on your blog and viewing posts from the dashboard will show the source LaTeX code. If you were using MathJax on your blog the Biot-Savart Law would come up on the dashboard with the code
\begin{equation} \mathbf{B} = \frac{1}{4\pi\epsilon_0}\oint_C \frac{I\,\mathrm{d}{\boldsymbol\ell}\times\mathbf{\hat{r}}}{\left|\mathbf{r}\right|^3} \end{equation}
which MathJax would find and produce (view this ask on my blog to see how this looks using MathJax):
\begin{equation} \mathbf{B} = \frac{1}{4\pi\epsilon_0}\oint_C \frac{I\,\mathrm{d}{\boldsymbol\ell}\times\mathbf{\hat{r}}}{\left|\mathbf{r}\right|^3} \end{equation}
Not the most pretty thing for dashboard or mobile users!
However, installing it onto your blog means you can make quick and easy posts that are formatted beautifully. Just remember that, on Tumblr, the dashboard is where you get a vast majority of your post views and most of your social media reach is through reblogs. Reblogged posts will come through looking like the above if the person reblogging doesn't have MathJax installed on their blog.
Installing MathJax on Tumblr
Most simply, you can copy and paste this line of code between the
tags in your theme's HTML:
Here are some great guides I've found for installing MathJax on Tumblr:
angjookanazawa: How to write in LaTeX (using MathJax) in Tumblr
ernestyalumni: Testing: MathJax in latex.
math-is-beautiful: LaTeX (General guide)
I one day plan to start a sort-of 'campaign' with all the other science and maths blogs to encourage tumblr to introduce MathJax compatibility into their dashboard since it makes the lives of a whole part of the community much, much more difficult without it (hence the 2000+ word essay on ways to input equations into Tumblr!) but that's a battle for another day.
Additional Formatting Notes:
A pet peeve of mine is the use of “x” in place of themultiplication symbol ×. To keep your equations looking pretty and understandable, you can copy and paste the multiplication symbol from Google or insert it from Word. It is written as “\times” in LaTeX.
The hyphen “-“ and the subtraction symbol “−” are two different symbols. Although it’s a tiny difference, it looks way nicer to use the proper subtraction symbol.
If you can help it, never use less than “<” or greater than “>” symbols in place of left angle or right angle brackets.
I hope that helps! I have made a .pdf version which you can download here for future reference.
If anyone can think of anything I've left out or any other techniques, please let me know.