CSS

Goal

To render a bordered box with multiple equations.

Background

My previous article about dot products contains some boxed math expressions: some are inline and some take up the whole line.

For inline math, that’s simple: either $\fbox{text}$ or $\boxed{a=1}$ will do. For displayed math, these two KaTeX commands will ignore the newline command \\.

Solution

A simple Google search ‘“katex” AND “box”’ saved the day. It led me to this relevant Stack Overflow question, whose accepted answer suggested the use of custom CSS. I copied the CSS class name boxedmath for my blog.

1. my HTML slides
2. You may view the source code of this blog to see the source files.

Goal

To provide an introduction to the formal definition of functions for arts stream students.

I aim to

1. minimize the calculations
2. use daily-life examples
3. favor pictures over text.

IT skills used

Inkscape

1. C-S-a for alignment.
2. C-S-f for boundary and colors, and line patterns (i.e. arrows).
3. C-S-d for document size.
4. clipping process:
   1. prepare the object to be clipped.
   2. prepare the clip, which is on top of the previous object.
   3. select Object → Clip and then the first option from the top menu.

dvisvgm

Use the TEX → DVI → SVG route with latex and this tool with options --font-format=woff and -b 5 -R -d 2 to save file size and to ensure that the SVG can be correctly opened on Inkscape.