Document how to generate output for off-line viewing

[rockyallen]

This is mentioned in a couple of places, but needs drawing together in a single topic at the end of "Customizing Your Output".
To include highlighting, STEM, webfonts, stylesheets. Provide sample command line.

Main target is HTML but does it affect any other backends?

[rockyallen]

Bit more info -

• Text fonts:
  Use webfonts! and it will use system fonts instead.
• Inline icons:
  See issue #361:

"If you unset the iconfont-remote attribute, Asciidoctor will attempt to load Font Awesome from the output directory.

asciidoctor -a icons=font -a stylesdir=css -a iconfont-remote! document.adoc

This will configure the HTML to reference Font Awesome as follows:

You then need to organize the Font Awesome files as follows (which mirrors how they are packed in the Font Awesome distribution).

css/font-awesome.css
fonts/fontawesome-webfont.eot
fonts/fontawesome-webfont.svg
fonts/fontawesome-webfont.ttf
fonts/fontawesome-webfont.woff
fonts/fontawesome-webfont.woff2"

• Admonition icons
  Does this happen automatically with inline icons?
• STEM
  No solution - there is no download version of MathJax
• Source code highlighting
  Download highlight.js from https://highlightjs.org/download/,
  set source-highlighter=highlighter.js,
  add <script> using a passthrough?

[rockyallen]

Admonition icons - yes, same as inline icons

STEM - see asciidoctor/asciidoctor#659

Stylesheets - Easiest way to add arbitrary css is to put them in a docinfo.

[edusantana]

The font-awesome doesn't works out-of-the-box if the css directory is at the parent dir:

.
|-- test1-works-same-dir
|   |-- css
|   |   |-- asciidoctor2.css
|   |   |-- font-awesome.css
|   |   `-- font-awesome.min.css
|   |-- fonts
|   |   |-- FontAwesome.otf
|   |   |-- fontawesome-webfont.eot
|   |   |-- fontawesome-webfont.svg
|   |   |-- fontawesome-webfont.ttf
|   |   |-- fontawesome-webfont.woff
|   |   `-- fontawesome-webfont.woff2
|   `-- off-line1.adoc
`-- test2-doesnt-work-css-at-parent-dir
    |-- childdir
    |   |-- off-line2.adoc
    |   `-- off-line.html
    |-- css
    |   |-- asciidoctor2.css
    |   |-- font-awesome.css
    |   `-- font-awesome.min.css
    `-- fonts
        |-- FontAwesome.otf
        |-- fontawesome-webfont.eot
        |-- fontawesome-webfont.svg
        |-- fontawesome-webfont.ttf
        |-- fontawesome-webfont.woff
        `-- fontawesome-webfont.woff2

off-line1.adoc (same dir, working...):

= Links off-line =
:linkattrs:
:nofooter:
:linkcss:
:iconfont-remote!:
:stylesdir: css
:stylesheet: asciidoctor2.css
:icons: font


== Links off-line

Testing Font Awesome.

NOTE: Asciidoctor supports font-based admonition icons, powered by Font Awesome!

The NOTE icon does work:

off-line2.adoc (css at parent dir, doesn't work):

See the stylesdir: ../css

= Links off-line =
:linkattrs:
:nofooter:
:linkcss:
:iconfont-remote!:
:stylesdir: ../css
:stylesheet: asciidoctor2.css
:icons: font


== Links off-line

Testing Font Awesome.

NOTE: Asciidoctor supports font-based admonition icons, powered by Font Awesome!

The NOTE icon doesn't work:

[mojavelinux]

That's correct. The layout of Font Awesome layout is very restrictive at the moment because of the hardcoded relative path to the font in the Font Awesome CSS file.

I point this out in the following comment, which is slated for being included in the documentation.

https://github.com/asciidoctor/asciidoctor.org/issues/361#issuecomment-202750710

One quick solution is to open the CSS file and change the path to the font.