.. role:: text-primary
:class: m-text m-primary
+.. |o| replace:: ·
+
:url: admire/math/
:cover: {filename}/static/cover-math.jpg
:summary: The fastest possible math rendering for the modern web
.. container:: m-col-m-12
- .. https://en.wikipedia.org/wiki/Rendering_equation
+ .. a copy of the following is below
.. math::
- L_o(p,\omega_o) = \int\limits_{\Omega} f_r(p,\omega_i,\omega_o) L_i(p,\omega_i) n \cdot \omega_i d\omega_i
+ {\color{m-primary} L_o (\boldsymbol{x}, \omega_o)} = {\color{m-danger}\int\limits_{\Omega}} {\color{m-warning} f_r(\boldsymbol{x},\omega_i,\omega_o)} {\color{m-success} L_i(\boldsymbol{x},\omega_i)} {\color{m-info} ( \omega_i \cdot \boldsymbol{n})} {\color{m-danger} \operatorname d \omega_i}
.. container:: m-row m-container-inflate
View the page source to verify that there is nothing extra being loaded to make
this happen.
+Try to resize the window --- everything is possible, so why not have a
+different layout of long equations optimized for smaller screens?
+
.. math::
+ :class: m-show-m
\pi = \cfrac{4} {1+\cfrac{1^2} {2+\cfrac{3^2} {2+\cfrac{5^2} {2+\ddots}}}}
= \sum_{n=0}^\infty \frac{4(-1)^n}{2n+1}
= \frac{4}{1} - \frac{4}{3} + \frac{4}{5} - \frac{4}{7} +- \cdots
+ .. math::
+ :class: m-hide-m
+
+ \begin{array}{rcl}
+ \pi &=& \cfrac{4} {1+\cfrac{1^2} {2+\cfrac{3^2} {2+\cfrac{5^2} {2+\ddots}}}}
+ = \sum_{n=0}^\infty \frac{4(-1)^n}{2n+1} \\
+ &=& \frac{4}{1} - \frac{4}{3} + \frac{4}{5} - \frac{4}{7} +- \cdots
+ \end{array}
+
.. class:: m-text m-text-right m-dim m-em
--- `Generalized continued fraction <https://en.wikipedia.org/wiki/Generalized_continued_fraction#.CF.80>`_,
--- `QR decomposition <https://en.wikipedia.org/wiki/QR_decomposition>`_,
Wikipedia
-And :text-primary:`everything can be colored` just by putting CSS classes
-around:
-
- .. math::
- :class: m-primary
-
- X_{k+N} \ \stackrel{\mathrm{def}}{=} \ \sum_{n=0}^{N-1} x_n e^{-\frac{2\pi i}{N} (k+N) n} = \sum_{n=0}^{N-1} x_n e^{-\frac{2\pi i}{N} k n} \underbrace{e^{-2 \pi i n}}_{1} = \sum_{n=0}^{N-1} x_n e^{-\frac{2\pi i}{N} k n} = X_k.
-
- .. class:: m-text m-text-right m-dim m-em
-
- --- `Discrete Fourier transform § Periodicity <https://en.wikipedia.org/wiki/Discrete_Fourier_transform#Periodicity>`_, Wikipedia
-
-And now, finally, some inline math. Note the vertical alignment, consistent
-line spacing and that nothing gets relayouted during page load:
+Now, some inline math --- note the vertical alignment, consistent line spacing
+and that nothing gets relayouted during page load:
Multiplying :math:`x_n` by a *linear phase* :math:`e^{\frac{2\pi i}{N}n m}`
for some integer :math:`m` corresponds to a *circular shift* of the output
.. class:: m-text m-text-right m-dim m-em
--- `Discrete Fourier transform § Shift theorem <https://en.wikipedia.org/wiki/Discrete_Fourier_transform#Shift_theorem>`_, Wikipedia
+
+The inline SVG follows surrounding text size, so you can use it easily in more
+places than just the main copy:
+
+ .. button-default:: https://tauday.com/
+
+ The :math:`\tau` manifesto
+
+ they say :math:`\pi` is wrong
+
+:text-primary:`Everything can be colored` just by putting CSS classes around:
+
+ .. math::
+ :class: m-primary m-show-m
+
+ X_{k+N} \ \stackrel{\mathrm{def}}{=} \ \sum_{n=0}^{N-1} x_n e^{-\frac{2\pi i}{N} (k+N) n} = \sum_{n=0}^{N-1} x_n e^{-\frac{2\pi i}{N} k n} \underbrace{e^{-2 \pi i n}}_{1} = \sum_{n=0}^{N-1} x_n e^{-\frac{2\pi i}{N} k n} = X_k.
+
+ .. math::
+ :class: m-primary m-hide-m
+
+ \begin{array}{rcl}
+ X_{k+N} & \ \stackrel{\mathrm{def}}{=} \ & \sum_{n=0}^{N-1} x_n e^{-\frac{2\pi i}{N} (k+N) n} \\
+ & = & \sum_{n=0}^{N-1} x_n e^{-\frac{2\pi i}{N} k n} \underbrace{e^{-2 \pi i n}}_{1} \\
+ & = & \sum_{n=0}^{N-1} x_n e^{-\frac{2\pi i}{N} k n} = X_k.
+ \end{array}
+
+ .. class:: m-text m-text-right m-dim m-em
+
+ --- `Discrete Fourier transform § Periodicity <https://en.wikipedia.org/wiki/Discrete_Fourier_transform#Periodicity>`_, Wikipedia
+
+But it's also possible to color only parts of the equation --- with a color
+that matches page theme.
+
+ .. math::
+ :class: m-show-s
+
+ {\color{m-primary} L_o (\boldsymbol{x}, \omega_o)} = {\color{m-danger}\int\limits_{\Omega}} {\color{m-warning} f_r(\boldsymbol{x},\omega_i,\omega_o)} {\color{m-success} L_i(\boldsymbol{x},\omega_i)} {\color{m-info} ( \omega_i \cdot \boldsymbol{n})} {\color{m-danger} \operatorname d \omega_i}
+
+ .. math::
+ :class: m-hide-s m-text m-small
+
+ {\color{m-primary} L_o (\boldsymbol{x}, \omega_o)} = {\color{m-danger}\int\limits_{\Omega}} {\color{m-warning} f_r(\boldsymbol{x},\omega_i,\omega_o)} {\color{m-success} L_i(\boldsymbol{x},\omega_i)} {\color{m-info} ( \omega_i \cdot \boldsymbol{n})} {\color{m-danger} \operatorname d \omega_i}
+
+ .. class:: m-text-center m-noindent
+
+ :label-primary:`outgoing light` |o| :label-danger:`integral`
+ |o| :label-warning:`BRDF` |o| :label-success:`incoming light`
+ |o| :label-info:`normal attenuation`
+
+ .. class:: m-text m-text-right m-dim m-em
+
+ --- `Lighting: The Rendering Equation <http://www.rorydriscoll.com/2008/08/24/lighting-the-rendering-equation/>`_, rorydriscoll.com
+
+.. combined with https://en.wikipedia.org/wiki/Rendering_equation for the nice
+ Greek letters
in :html:`<div class="m-math">` to make it centered. Similarly to code
blocks, the math block shows a horizontal scrollbar if the content is too wide
on narrow screens. `CSS color classes <#colors>`_ can be applied to the
-:html:`<div>`. It's a good practice to include :html:`<title>` and
-:html:`<desc>` elements for accessibility reasons.
+:html:`<div>`. It's a good practice to include the :html:`<title>` element for accessibility reasons.
.. code-figure::
<div class="m-math m-success">
<svg>
- <title>LaTeX Math</title>
- <desc>a^2 = b^2 + c^2</desc>
+ <title>a^2 = b^2 + c^2</title>
<g>...</g>
</svg>
</div>
<div class="m-math m-success">
<svg height='13.7321pt' version='1.1' viewBox='164.011 -10.9857 60.0231 10.9857' width='75.0289pt'>
- <title>LaTeX Math</title>
- <desc>a^2 = b^2 + c^2</desc>
+ <title>a^2 = b^2 + c^2</title>
<defs>
<path d='M3.59851 -1.42267C3.53873 -1.21943 3.53873 -1.19552 3.37136 -0.968369C3.10834 -0.633624 2.58232 -0.119552 2.02042 -0.119552C1.53026 -0.119552 1.25529 -0.561893 1.25529 -1.26725C1.25529 -1.92478 1.6259 -3.26376 1.85305 -3.76588C2.25953 -4.60274 2.82142 -5.03313 3.28767 -5.03313C4.07671 -5.03313 4.23213 -4.0528 4.23213 -3.95716C4.23213 -3.94521 4.19626 -3.78979 4.18431 -3.76588L3.59851 -1.42267ZM4.36364 -4.48319C4.23213 -4.79402 3.90934 -5.27223 3.28767 -5.27223C1.93674 -5.27223 0.478207 -3.52677 0.478207 -1.75741C0.478207 -0.573848 1.17161 0.119552 1.98456 0.119552C2.64209 0.119552 3.20399 -0.394521 3.53873 -0.789041C3.65828 -0.0836862 4.22017 0.119552 4.57883 0.119552S5.22441 -0.0956413 5.4396 -0.526027C5.63088 -0.932503 5.79826 -1.66177 5.79826 -1.70959C5.79826 -1.76936 5.75044 -1.81719 5.6787 -1.81719C5.57111 -1.81719 5.55915 -1.75741 5.51133 -1.57808C5.332 -0.872727 5.10486 -0.119552 4.61469 -0.119552C4.268 -0.119552 4.24408 -0.430386 4.24408 -0.669489C4.24408 -0.944458 4.27995 -1.07597 4.38755 -1.54222C4.47123 -1.8411 4.53101 -2.10411 4.62665 -2.45081C5.06899 -4.24408 5.17659 -4.67447 5.17659 -4.7462C5.17659 -4.91357 5.04508 -5.04508 4.86575 -5.04508C4.48319 -5.04508 4.38755 -4.62665 4.36364 -4.48319Z' id='math1-g0-97'/>
<path d='M2.76164 -7.99801C2.7736 -8.04583 2.79751 -8.11756 2.79751 -8.17733C2.79751 -8.29689 2.67796 -8.29689 2.65405 -8.29689C2.64209 -8.29689 2.21171 -8.26102 1.99651 -8.23711C1.79328 -8.22516 1.61395 -8.20125 1.39875 -8.18929C1.11183 -8.16538 1.02814 -8.15342 1.02814 -7.93823C1.02814 -7.81868 1.1477 -7.81868 1.26725 -7.81868C1.87696 -7.81868 1.87696 -7.71108 1.87696 -7.59153C1.87696 -7.50785 1.78132 -7.16115 1.7335 -6.94595L1.44658 -5.79826C1.32702 -5.32005 0.645579 -2.60623 0.597758 -2.39103C0.537983 -2.09215 0.537983 -1.88892 0.537983 -1.7335C0.537983 -0.514072 1.21943 0.119552 1.99651 0.119552C3.38331 0.119552 4.81793 -1.66177 4.81793 -3.39527C4.81793 -4.49514 4.19626 -5.27223 3.29963 -5.27223C2.67796 -5.27223 2.11606 -4.75816 1.88892 -4.51905L2.76164 -7.99801ZM2.00847 -0.119552C1.6259 -0.119552 1.20747 -0.406476 1.20747 -1.33898C1.20747 -1.7335 1.24334 -1.96065 1.45853 -2.79751C1.4944 -2.95293 1.68568 -3.71806 1.7335 -3.87347C1.75741 -3.96912 2.46276 -5.03313 3.27572 -5.03313C3.80174 -5.03313 4.04085 -4.5071 4.04085 -3.88543C4.04085 -3.31158 3.7061 -1.96065 3.40722 -1.33898C3.10834 -0.6934 2.55841 -0.119552 2.00847 -0.119552Z' id='math1-g0-98'/>
<p>There is <a href="https://tauday.com/">a movement</a> for replacing
circle constant <svg class="m-math" style="vertical-align: -0.0pt;" height='9.63055pt' version='1.1' viewBox='0 -7.70444 12.9223 7.70444' width='16.1528pt'>
- <title>LaTeX Math</title>
- <desc>2 \pi</desc>
+ <title>2 \pi</title>
<defs>
<path d='M3.09639 -4.5071H4.44732C4.12453 -3.16812 3.9213 -2.29539 3.9213 -1.33898C3.9213 -1.17161 3.9213 0.119552 4.41146 0.119552C4.66252 0.119552 4.87771 -0.107597 4.87771 -0.310834C4.87771 -0.37061 4.87771 -0.394521 4.79402 -0.573848C4.47123 -1.39875 4.47123 -2.4269 4.47123 -2.51059C4.47123 -2.58232 4.47123 -3.43113 4.72229 -4.5071H6.06127C6.21669 -4.5071 6.61121 -4.5071 6.61121 -4.88966C6.61121 -5.15268 6.38406 -5.15268 6.16887 -5.15268H2.23562C1.96065 -5.15268 1.55417 -5.15268 1.00423 -4.56687C0.6934 -4.22017 0.310834 -3.58655 0.310834 -3.51482S0.37061 -3.41918 0.442341 -3.41918C0.526027 -3.41918 0.537983 -3.45504 0.597758 -3.52677C1.21943 -4.5071 1.8411 -4.5071 2.13998 -4.5071H2.82142C2.55841 -3.61046 2.25953 -2.57036 1.2792 -0.478207C1.18356 -0.286924 1.18356 -0.263014 1.18356 -0.191283C1.18356 0.0597758 1.39875 0.119552 1.50635 0.119552C1.85305 0.119552 1.94869 -0.191283 2.09215 -0.6934C2.28344 -1.30311 2.28344 -1.32702 2.40299 -1.80523L3.09639 -4.5071Z' id='math2-g0-25'/>
<path d='M5.26027 -2.00847H4.99726C4.96139 -1.80523 4.86575 -1.1477 4.7462 -0.956413C4.66252 -0.848817 3.98107 -0.848817 3.62242 -0.848817H1.41071C1.7335 -1.12379 2.46276 -1.88892 2.7736 -2.17584C4.59078 -3.84956 5.26027 -4.47123 5.26027 -5.65479C5.26027 -7.02964 4.17235 -7.95019 2.78555 -7.95019S0.585803 -6.76663 0.585803 -5.73848C0.585803 -5.12877 1.11183 -5.12877 1.1477 -5.12877C1.39875 -5.12877 1.70959 -5.30809 1.70959 -5.69066C1.70959 -6.0254 1.48244 -6.25255 1.1477 -6.25255C1.0401 -6.25255 1.01619 -6.25255 0.980324 -6.2406C1.20747 -7.05355 1.85305 -7.60349 2.63014 -7.60349C3.64633 -7.60349 4.268 -6.75467 4.268 -5.65479C4.268 -4.63861 3.68219 -3.75392 3.00075 -2.98879L0.585803 -0.286924V0H4.94944L5.26027 -2.00847Z' id='math2-g1-50'/>
<use x='5.85299' xlink:href='#math2-g0-25' y='0'/>
</g>
</svg> with the <svg class="m-math m-warning" style="vertical-align: -0.0pt;" height='6.43422pt' version='1.1' viewBox='0 -5.14737 6.41894 5.14737' width='8.02368pt'>
- <title>LaTeX Math</title>
- <desc>\tau</desc>
+ <title>\tau</title>
<defs>
<path d='M3.43113 -4.5071H5.41569C5.57111 -4.5071 5.96563 -4.5071 5.96563 -4.88966C5.96563 -5.15268 5.73848 -5.15268 5.52329 -5.15268H2.23562C1.96065 -5.15268 1.55417 -5.15268 1.00423 -4.56687C0.6934 -4.22017 0.310834 -3.58655 0.310834 -3.51482S0.37061 -3.41918 0.442341 -3.41918C0.526027 -3.41918 0.537983 -3.45504 0.597758 -3.52677C1.21943 -4.5071 1.8411 -4.5071 2.13998 -4.5071H3.13225L1.88892 -0.406476C1.82914 -0.227148 1.82914 -0.203238 1.82914 -0.167372C1.82914 -0.0358655 1.91283 0.131507 2.15193 0.131507C2.52254 0.131507 2.58232 -0.191283 2.61818 -0.37061L3.43113 -4.5071Z' id='math3-g0-28'/>
</defs>
</g>
</svg> character.</p>
+The CSS color classes work also on :html:`<g>` and :html:`<rect>` elements
+inside :html:`<svg>` for highlighting parts of formulas.
+
.. note-success::
Producing SVG manually using command-line tools is no fun. That's why the
- Instead of relying on MathML or MathJax, converts input LaTeX math formula
to a SVG file, which is then embedded directly to the page. All glyphs are
converted to paths.
-- Adds a :html:`<title>` and :html:`<desc>` containing the original formula
- to the generated :html:`<svg>` element for accessibility.
+- Size is represented using CSS :css:`em` units so the formula follows
+ surrounding text size.
+- Adds a possibility to color the whole formula or parts of it using colors
+ that follow the current theme.
+- Adds a :html:`<title>` containing the original formula to the generated
+ :html:`<svg>` element for accessibility.
Put `math blocks <{filename}/css/components.rst#math>`_ into the :rst:`.. math::`
directive; if you want to color the equations, add corresponding
Quaternion-conjugated dual quaternion is :math-info:`\hat q^* = q_0^* + q_\epsilon^*`,
while dual-conjugation gives :math:`\overline{\hat q} = q_0 - \epsilon q_\epsilon`.
+The resulting SVG follows font size of surrounding text, so you can use math
+even outside of main page copy:
+
+.. code-figure::
+
+ .. code:: rst
+
+ .. button-success:: https://tauday.com/
+
+ The :math:`\tau` manifesto
+
+ they say :math:`\pi` is wrong
+
+ .. button-success:: https://tauday.com/
+
+ The :math:`\tau` manifesto
+
+ they say :math:`\pi` is wrong
+
+The ``xcolor`` package is enabled by default together with names matching CSS
+color classes. You can use it to highlight different parts of the formula:
+
+.. code-figure::
+
+ .. code:: rst
+
+ .. math::
+
+ \boldsymbol{A} = \begin{pmatrix}
+ {\color{m-info} s_x} & 0 & 0 & {\color{m-success} t_x} \\
+ 0 & {\color{m-info} s_y} & 0 & {\color{m-success} t_y} \\
+ 0 & 0 & {\color{m-info} s_z} & {\color{m-success} t_z} \\
+ 0 & 0 & 0 & 1
+ \end{pmatrix}
+
+ .. math::
+
+ \boldsymbol{A} = \begin{pmatrix}
+ {\color{m-info} s_x} & 0 & 0 & {\color{m-success} t_x} \\
+ 0 & {\color{m-info} s_y} & 0 & {\color{m-success} t_y} \\
+ 0 & 0 & {\color{m-info} s_z} & {\color{m-success} t_z} \\
+ 0 & 0 & 0 & 1
+ \end{pmatrix}
+
The :py:`M_MATH_CACHE_FILE` setting (defaulting to ``m.math.cache`` in the
site root directory) describes a file used for caching rendered LaTeX math
-formulas for speeding up subsequent runs. Old cached output is periodically
-pruned and new formulas added to the file. Set it to :py:`None` to disable
-caching.
+formulas for speeding up subsequent runs. Cached output that's no longer needed
+is periodically pruned and new formulas added to the file. Set it to :py:`None`
+to disable caching.
.. note-info::
~cjwatson / blog.git / commitdiff