CopyAsMarkup Feature Details

This page describes each CopyAsMarkup™ feature in detail. It is mostly a list that shows exactly how CaM maps specific Word features onto HTML, Markdown, and TeX.

The CopyAsMarkup home page contains more general information.

Paragraph Styles

Tables

Lists

If you select part of a multi-level list, I recommend that you always extend the selection to include all child list items. That way, CopyAsMarkup will write the closing </li> tag for the parent list item.

Markdown users should note that some Markdown implementations do not support a multi-level numbered list.

Character Formats

Links

Images

When CopyAsMarkup writes an image link in Markdown, the format is:

    <p>…![alt text]…</p>
        ⋮
    [alt text]: path "alt text"

In HTML, image markup varies and is dependent on captions and alignments.

A plain vanilla inline image, with no caption:

    <img src="…" alt="…">

An image with text wrapped around it:

    <img src="…" alt="…" class="inset-[left|right]">

An inline image occupying an entire paragraph, with a paragraph in Caption paragraph style either directly above it or directly below it. In HTML 5:

    <figure>
        <img src="…" alt="…">
        <figcaption>…<figcaption>
    </figure>

Same as above, but not in HTML5:

    <div>
        <img src="…" alt="…">
       <div class="image-caption">…</div>
    </div>

Text Box containing only a picture and a caption, inline:

    <figure>
        <img src="…" alt="…">
        <figcaption>…<figcaption>
    </figure>

Text Box with captioned image, floated left or right

    <figure class="inset-[left|right]">
        <img src="…" alt="…">
        <figcaption>…<figcaption>
    </figure>

Footnotes

The Markdown format for footnotes is:

    …[^n]
        ⋮
    [^n]: footnote text

In HTML, you can choose the output to be configured as a footnote or as a side noteThis is a sidenote.. The sidenote markup is written below.

<span class="sidenote-marker"></span>
<span class="sidenote">…</span>

If you choose the footnote option, then the markup for a web page looks like this:

    <p>…<sup id="fnref-1">
            <a href="#fn-1" class="footnote-ref">1</a>
        </sup>…
    </p>
    ⋮
    <div class="footnotes">
        <hr>
        <ol>
            <li id="fn-1">footnote text 
                <a href="#fnref-1" class="footnote-backref">&#8617;</a>
            </li>
        </ol>
    </div>

A footnote for an eBook has different markup:

    <aside id="fn-1" epub:type="footnote">footnote text</aside>

Markdown users should be aware that not all Markdown implemen­tations can parse footnotes.

CaM’s standard output for an inline text box is:

    <div>...</div>

If other text wraps around the text box, then CaM will add an attribute, either class="inset-left" or class="inset-right", as appropriate.

If the text box contains only an image and a caption, CaM will write:

<img src="path/fileName" caption="caption" alt="alt text">

Again, CaM will add a class attribute for an inset, if appropriate.

There is no Markdown syntax that maps to a Word text box. All text boxes will be converted to HTML.

General Cleanup

CaM ignores all other features and formatting in the Word document. If you want some other kind of formatting, then use a style.

Web site administrators should consider creating an example Word document for your authors. In the example document, create Word styles that have corresponding classes in your CSS.

Math

The Math In Word section on the CopyAsMarkup home page contains tips for writing math in Microsoft Word. Below, I describe how CopyAsMarkup will translate Word math into something that web browsers and eBooks will render. [▼]CopyAsMarkup’s math capability is a major part of my motivation for writing CaM. Writing math in Word’s math zone is just easier than fiddling with TeX.

Math Markup

CopyAsMarkup will convert the contents of a Word math zone to the math mode of TeX, the math markup language used by many mathemat­ically oriented websites.

Note that Copy-as-TeX can act on only one math zone at a time. Copy-as-HTML and Copy-as-Markdown will act on all the math zones in your selection.

TeX Libraries

There are some excellent third party libraries that render CaM-generated TeX for web pages. MathJax was the first one to do really good quality math rendering. KaTeX is faster than MathJax, but not as comprehensive. QuickTeX is also worth a look, especially for WordPress blogs.

To install MathJax in your web site, write the following code into your web page’s <head>:

<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS_HTML">
</script>

That URL contains a version number, so you will need to check mathjax.org now and then to see if there has been an upgrade.

To install KaTeX:

1. Write the following code into your web page’s <head>:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.8.3/katex.min.css" integrity="sha384-B41nY7vEWuDrE9Mr+J2nBL0Liu+nl/rBXTdpQal730oTHdlrlXHzYMOhDU60cwde" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.8.3/katex.min.js" integrity="sha384-L9gv4ooDLrYwW0QCM6zY3EKSSPrsuUncpx26+erN0pJX4wv1B1FzVW1SvpcJPx/8" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.8.3/contrib/auto-render.min.js" integrity="sha384-RkgGHBDdR8eyBOoWeZ/vpGg1cOvSAJRflCUDACusAAIVwkwPrOUYykglPeqWakZu" crossorigin="anonymous"></script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {delimiters:[
            {left: "\\[", right: "\\]", display: true},
            {left: "\\(", right: "\\)", display: false}
        ]});
    });
</script>

2. Write the following into your site’s CSS file, unless you want your math to be sized 21% larger than other text:

.katex { font-size: 1em !important; }

If your web site or eBook has only a small amount of math notation and you don’t want to add a third party library, you could use SVG images ▾ instead.

SVG is an image format that can display math in better quality than bit-mapped images. But it’s tricky to get the image to display at the correct size. If the size is set directly inside the <img> tag, then the size can only be written in units of px. We want the size to be defined in em’s, so that the equation will resize when the reader changes the font size.

The trick is to set the SVG image width to 100%, then nest the <img> inside a <span> or <div> and set the container’s width in em’s. CopyAsMarkup will do that for you if you take the following steps.

1. Write your math in a Word math zone.
2. Use Copy-as-TeX to get a TeX version of the equation.
3. Use LaTeX Previewer to get an SVG image of the TeX. Load the SVG into your web site's directory.
4. Use CaM’s Wrap a math SVG command. It will place the proper markup onto the Windows clipboard.
5. In your HTML file, paste the image markup in place of the TeX.

To illustrate, the equation below is an SVG image.

The markup that CaM wrote for that equation looks like this:

<div style="margin: 1em auto 1em auto; width: 12.3em;">
    <img src="images/faraday.svg" alt="Faraday’s Law" style="width:100%;">
</div>

Kindle eReaders

Amazon’s Kindle eReaders do not support either MathML or TeX, nor do they run JavaScript, so they cannot run either MathJax or KaTeX in real time. Publishers, faced with this dilemma, have often resorted to bit-mapped images of equations. You can and should do better. For Kindle, I can recommend two alternate courses of action.

Note: I haven't yet tested these options.

SVG is an image format that can display math in better quality than bit-mapped images. But it’s tricky to get the image to display at the correct size. If the size is set directly inside the <img> tag, then the size can only be written in units of px. We want the size to be defined in em’s, so that the equation will resize when the reader changes the font size.

The trick is to set the SVG image width to 100%, then nest the <img> inside a <span> or <div> and set the container’s width in em’s. CopyAsMarkup will do that for you if you take the following steps.

1. Write your math in a Word math zone.
2. Use Copy-as-TeX to get a TeX version of the equation.
3. Use LaTeX Previewer to get an SVG image of the TeX. Load the SVG into your web site's directory.
4. Use CaM’s Wrap a math SVG command. It will place the proper markup onto the Windows clipboard.
5. In your HTML file, paste the image markup in place of the TeX.

To illustrate, the equation below is an SVG image.

The markup that CaM wrote for that equation looks like this:

<div style="margin: 1em auto 1em auto; width: 12.3em;">
    <img src="images/faraday.svg" alt="Faraday’s Law" style="width:100%;">
</div>

One hopes that Kindle will someday include either MathJax or KaTeX.

TeX Details

CopyAsMarkup will convert Word math zones to TeX and write the TeX between the delimiters shown here:

Below is a list of math constructs that CopyAsMarkup will convert from Word math zones to TeX.

The following Unicode letters:

αβγδϵζηθι℩κλμνξοπρστυϕχψωεϑϖϱςφ
ΓΔ∆ΘΛΞΠΣΥΦΨΩΩϜ
ϰKℵℶℷℸℏıȷℓℜℑ℘

… are replaced with:

\alpha \beta \gamma \delta \epsilon \zeta \eta \theta \iota \riota \kappa \lambda \mu \nu \xi \omicron \pi \rho \sigma \tau \upsilon \phi \chi \psi \omega \varepsilon \vartheta \varpi \varrho \varsigma varphi \Gamma \Delta \Delta \Theta \Lambda \Xi \Pi \Sigma \Upsilon \Phi \Psi \Omega \Omega \digamma \varkappa K \aleph \beth \gimmel \daleth \hbar \imath \jmath \ell \Re \Im \wp

Font Styles

Italics

Stretchy Delimiters

The following Unicode characters:

< > ∞ $ % # ¶ § © … £ ¥ € ✓ • Ⓡ ° ✠ å Å Æ æ Đ Ł ł ø ⌀ Ø Œ œ ß ∗ ○ • ∙ ∩ ⋅ ∘ ∪ ⋒ ⋓ ⨿ † ‡ ⋄ ÷ ∓ ⊙ ⊖ ⊕ ⊘ ⊗ ± ∖ ⧵ ⊓ ⊔ ⋆ × ◁ ▷ ⊎ ∨ ∧ ≀ ⊼ ⊡ ⊟ ⊞ ⊠ ⊺ ⋅ ⊛ ⊚ ⊝ ⋎ ⋏ ⋇ ∔ ⩞ ┬ ⋋ ⋉ ⋌ ⋊ ⊻ ⋂ ⋃ ⨀ ⨁ ⨂ ⨆ ⨄ ⋁ ⋀ ∐ ∫ ∮ ∏ ∑ ∬ ∭ ⨌ ⨝ ≈ ≍ ⋈ ⋍ ≅ ⊣ ⊧ ≐ ≡ ⌢ ∥ ⟂ ≺ ⪯ ∝ ∼ ≃ ⌣ ≻ ⪰ ⊢ ≊ ∽ ∵ ≬ ≎ ≏ ≗ ⋞ ⋟ ≑ ≖ ≒ ⊸ ⋔ ⪵ ⪶ ⪷ ≼ ≾ ≓ ⪸ ≽ ≿ ∴ ⊩ ⊨ ⊪ ≇ ∤ ∦ ⊀ ⋠ ≁ ≂ ⊁ ⋡ ⊭ ⊮ ⊬ ⊯ ⪹ ⋨ ⪺ ⋩ ⊏ ⊑ ⊐ ⊒ ⊂ ⊆ ⊃ ⊇ ⊈ ⊉ ⋐ ⫅ ⊊ ⫋ ⫌ ⋑ ⫆ ⊋ ⫌ ≥ ≫ ≤ ≪ ≠ ⪖ ⪕ ≧ ⩾ ⋙ ⪊ ⪈ ≩ ⋧ ⪆ ⋗ ⋛ ⪌ ≷ ≳ ≶ ≦ ⩽ ⪅ ⋖ ⋚ ⪋ ≲ ⋘ ⪉ ⪇ ≨ ⋦ ≱ ≯ ≰ ≮ ◀ ▶ ⋪ ⋬ ⋫ ⋭ ⊴ ⊵ ⊲ ⊳ ⇓ ↓ ↩ ↪ ↝ ← ⇐ ⇔ ↔ ⟵ ⟸ ⟷ ⟺ ⟼ ⟹ ⟶ ↦ ↗ ↖ ⇒ → ↘ ↙ ↑ ⇑ ↕ ⇕ ↽ ↼ ⇁ ⇀ ⇌ ↺ ↻ ↶ ↷ ⇠ ⇢ ⇊ ↢ ⇇ ⇆ ⇚ ⇛ ⇜ ↫ ↬ ↭ ↰ ↣ ⇄ ⇉ ⇝ ↱ ↞ ↠ ⇈ ⇍ ↚ ⇎ ↮ ⇏ ↛ ⇃ ⇂ ⇋ ↿ ↾ ⊥ ∃ ∀ ∈ ∉ ∋ ⊤ Ⓢ ∁ Ⅎ ⅁ ∄ ⋅ ⋯ : ⋱ … ⋮ ∶ ∠ \ ⌑ ♣ ⋄ ♢ ♭ ♡ ℧ ∇ ♮ ¬ ′ ″ ‴ ⁗ ♯ ♠ √ ‵ ★ ⧫ ■ ▲ △ ▴ ▵ ▼ ▽ ▾ ▿ ◊ ∡ ∢ □ ∅ ◇ 〈 ⟨ ⌈ ⌊ 〉 ⟩ ⌉ ⌋ │ ∣ ⌜ ⌞ ⌝ ⌟ ⎰ ⎱ 〔 〕 ≘ ≙ ≚ ≛ ≜ ≝ ≞ ≟

… are replaced with:

\lt \gt \infty \$ \% \# \P \S \copyright \ldots \pounds \yen \euro \checkmark \bullet \circledR \degree \maltese \aa \AA \AE \ae \DH \L \l \o \diameter \O \OE \oe \ss \ast \bigcirc \cdotp \bullet \cap \cdot \circ \cup \Cap \Cup \amalg \dagger \ddagger \diamond \div \mp \odot \ominus \oplus \oslash \otimes \pm \smallsetminus \setminus \sqcap \sqcup \star \times \triangleleft \triangleright \uplus \vee \wedge \wr \barwedge \boxdot \boxminus \boxplus \boxtimes \intercal \centerdot \circledast \circledcirc \circleddash \curlyvee \curlywedge \divideontimes \dotplus \doublebarwedge \intercal \leftthreetimes \ltimes \rightthreetimes \rtimes \veebar \bigcap \bigcup \bigodot \bigoplus \bigotimes \bigsqcup \biguplus \bigvee \bigwedge \coprod \int \oint \prod \sum \iint \iiint \iiiint \Join \approx \asymp \bowtie \backsimeq \cong \dashv \models \doteq \equiv \frown \parallel \perp \prec \preceq \propto \sim \simeq \smile \succ \succeq \vdash \approxeq \backsim \because \between \Bumpeq \bumpeq \circeq \curlyeqprec \curlyeqsucc \doteqdot \eqcirc \fallingdotseq \multimap \pitchfork \precneqq \succneqq \precapprox \preccurlyeq \precsim \risingdotseq \succapprox \succcurlyeq \succsim \therefore \Vdash \vDash \Vvdash \ncong \nmid \nparallel \nprec \npreceq \nsim \eqsim \nsucc \nsucceq \nvDash \nVdash \nvdash \nVDash \precnapprox \precnsim \succnapprox \succnsim \sqsubset \sqsubseteq \sqsupset \sqsupseteq \subset \subseteq \supset \supseteq \nsubseteq \nsupseteq \Subset \subseteqq \subsetneq \subsetneqq \supsetneqq \Supset \supseteqq \supsetneq \supsetneqq \geq \gg \leq \ll \neq \eqslantgtr \eqslantless \geqq \geqslant \ggg \gnapprox \gneq \gneqq \gnsim \gtrapprox \gtrdot \gtreqless \gtreqqless \gtrless \gtrsim \lessgtr \leqq \leqslant \lessapprox \lessdot \lesseqgtr \lesseqqgtr \lesssim \lll \lnapprox \lneq \lneqq \lnsim \ngeq \ngtr \nleq \nless \blacktriangleleft \blacktriangleright \ntriangleleft \ntrianglelefteq \ntriangleright \ntrianglerighteq \trianglelefteq \trianglerighteq \triangleleft \triangleright \Downarrow \downarrow \hookleftarrow \hookrightarrow \leadsto \leftarrow \Leftarrow \Leftrightarrow \leftrightarrow \longleftarrow \Longleftarrow \longleftrightarrow \Longleftrightarrow \longmapsto \Longrightarrow \longrightarrow \mapsto \nearrow \nwarrow \Rightarrow \rightarrow \searrow \swarrow \uparrow \Uparrow \updownarrow \Updownarrow \leftharpoondown \leftharpoonup \rightharpoondown \rightharpoonup \rightleftharpoons \circlearrowleft \circlearrowright \curvearrowleft \curvearrowright \dashleftarrow \dashrightarrow \downdownarrows \leftarrowtail \leftleftarrows \leftrightarrows \Lleftarrow \Rrightarrow \leftsquigarrow \looparrowleft \looparrowright \leftrightsquigarrow \Lsh \rightarrowtail \rightleftarrows \rightrightarrows \rightsquigarrow \Rsh \twoheadleftarrow \twoheadrightarrow \upuparrows \nLeftarrow \nleftarrow \nLeftrightarrow \nleftrightarrow \nRightarrow \nrightarrow \downharpoonleft \downharpoonright \leftrightharpoons \upharpoonleft \upharpoonright \bot \exists \forall \in \notin \ni \top \circledS \complement \Finv \Game \nexists \cdot \cdots \colon \ddots \ldots \vdots \mathop{:} \angle \backslash \Box \clubsuit \Diamond \diamondsuit \flat \heartsuit \mho \nabla \natural \neg \prime {\prime\prime} {\prime\prime\prime} {\prime\prime\prime\prime} \sharp \spadesuit \surd \backprime \bigstar \blacklozenge \blacksquare \bigblacktriangleup \bigtriangleup \blacktriangle \vartriangle \bigblacktriangledown \bigtriangledown \blacktriangledown \triangledown \lozenge \measuredangle \sphericalangle \square \varnothing \Diamond \langle \langle \lceil \lfloor \rangle \rangle \rceil \rfloor \vert \mid \ulcorner \llcorner \urcorner \lrcorner \lmoustache \rmoustache \lgroup \rgroup \stackrel{\tiny\frown}{=} \stackrel{\tiny\wedge}{=} \stackrel{\tiny\vee}{=} \stackrel{\tiny\star}{=} \stackrel{\tiny\vartriangle}{=} \stackrel{\tiny\text{def}}{=} \stackrel{\tiny\text{m}}{=} \stackrel{\tiny{?}}{=}

Phantom and Smash

Spacing

CaM translates Word’s non-breaking space character (Ctrl-Shift-Space) into the TeX spacing function \,

Copyright © 2016 Ron Kok

Contents

• Introduction
• Feature Summary
• Example
• Installation
• Tips ▼
  • General
  • Tabs
  • Styles
  • Images
  • Zip Files
  • Math
• Settings
• Feature Details ▼
  • General
  • Paragraph Styles
  • Tables
  • Lists
  • Character Formats
  • Character Styles
  • Links
  • Images
  • Footnotes
  • Textboxes
  • General Cleanup
• Math ▼
  • General
  • Math Markup
  • TeX Libraries
  • Kindle eReaders
  • TeX Details
  • Text characters
  • Font Styles
  • Italics
  • Stretchy Delimiters
  • Special Characters
  • Phantom and Smash
  • Spacing