blob: 293f8a111d486b89af9da2d80c350b74a87e8248 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Chapter 7. HTML5 and XHTML 1.1</title><link rel="stylesheet" type="text/css" href="docbook-xsl.css" /><meta name="generator" content="DocBook XSL Stylesheets V1.79.1" /><link rel="home" href="index.html" title="AsciiDoc User Guide" /><link rel="up" href="index.html" title="AsciiDoc User Guide" /><link rel="prev" href="ch06.html" title="Chapter 6. Generating Plain Text Files" /><link rel="next" href="ch08.html" title="Chapter 8. Document Structure" /></head><body><div class="navheader"><table width="100%" summary="Navigation header"><tr><td width="20%" align="left"><a accesskey="p" href="ch06.html"><img src="images/icons/prev.png" alt="Prev" /></a> </td><th width="60%" align="center"> </th><td width="20%" align="right"> <a accesskey="n" href="ch08.html"><img src="images/icons/next.png" alt="Next" /></a></td></tr></table><hr /></div><div class="chapter"><div class="titlepage"><div><div><h1 class="title"><a id="X35"></a>Chapter 7. HTML5 and XHTML 1.1</h1></div></div></div><p>The <span class="emphasis"><em>xhtml11</em></span> and <span class="emphasis"><em>html5</em></span> backends embed or link CSS and JavaScript
files in their outputs, there is also a <a class="link" href="ch07.html#X99" title="7.1. Themes">themes</a> plugin
framework.</p><div class="itemizedlist"><ul class="itemizedlist" style="list-style-type: disc; "><li class="listitem">
If the AsciiDoc <span class="emphasis"><em>linkcss</em></span> attribute is defined then CSS and
JavaScript files are linked to the output document, otherwise they
are embedded (the default behavior).
</li><li class="listitem">
The default locations for CSS and JavaScript files can be changed by
setting the AsciiDoc <span class="emphasis"><em>stylesdir</em></span> and <span class="emphasis"><em>scriptsdir</em></span> attributes
respectively.
</li><li class="listitem">
The default locations for embedded and linked files differ and are
calculated at different times — embedded files are loaded when
asciidoc(1) generates the output document, linked files are loaded
by the browser when the user views the output document.
</li><li class="listitem">
Embedded files are automatically inserted in the output files but
you need to manually copy linked CSS and Javascript files from
AsciiDoc <a class="link" href="ch26.html#X27" title="26.11. Configuration file names, precedence and locations">configuration directories</a> to the correct location
relative to the output document.
</li></ul></div><div class="table"><a id="idm413"></a><p class="title"><strong>Table 7.1. Stylesheet file locations</strong></p><div class="table-contents"><table class="table" summary="Stylesheet file locations" cellpadding="4px" style="border-collapse: collapse;border-top: 3px solid #527bbd; border-bottom: 3px solid #527bbd; "><colgroup><col class="col_1" /><col class="col_2" /><col class="col_3" /></colgroup><thead><tr><th style="border-right: 1px solid #527bbd; border-bottom: 1px solid #527bbd; " align="left" valign="top"><span class="emphasis"><em>stylesdir</em></span> attribute</th><th style="border-right: 1px solid #527bbd; border-bottom: 1px solid #527bbd; " align="left" valign="top">Linked location (<span class="emphasis"><em>linkcss</em></span> attribute defined)</th><th style="border-bottom: 1px solid #527bbd; " align="left" valign="top">Embedded location (<span class="emphasis"><em>linkcss</em></span> attribute undefined)</th></tr></thead><tbody><tr><td style="border-right: 1px solid #527bbd; border-bottom: 1px solid #527bbd; " align="left" valign="top"><p>Undefined (default).</p></td><td style="border-right: 1px solid #527bbd; border-bottom: 1px solid #527bbd; " align="left" valign="top"><p>Same directory as the output document.</p></td><td style="border-bottom: 1px solid #527bbd; " align="left" valign="top"><p><code class="literal">stylesheets</code> subdirectory in the AsciiDoc configuration directory
(the directory containing the backend conf file).</p></td></tr><tr><td style="border-right: 1px solid #527bbd; " align="left" valign="top"><p>Absolute or relative directory name.</p></td><td style="border-right: 1px solid #527bbd; " align="left" valign="top"><p>Absolute or relative to the output document.</p></td><td style="" align="left" valign="top"><p>Absolute or relative to the AsciiDoc configuration directory (the
directory containing the backend conf file).</p></td></tr></tbody></table></div></div><br class="table-break" /><div class="table"><a id="idm443"></a><p class="title"><strong>Table 7.2. JavaScript file locations</strong></p><div class="table-contents"><table class="table" summary="JavaScript file locations" cellpadding="4px" style="border-collapse: collapse;border-top: 3px solid #527bbd; border-bottom: 3px solid #527bbd; "><colgroup><col class="col_1" /><col class="col_2" /><col class="col_3" /></colgroup><thead><tr><th style="border-right: 1px solid #527bbd; border-bottom: 1px solid #527bbd; " align="left" valign="top"><span class="emphasis"><em>scriptsdir</em></span> attribute</th><th style="border-right: 1px solid #527bbd; border-bottom: 1px solid #527bbd; " align="left" valign="top">Linked location (<span class="emphasis"><em>linkcss</em></span> attribute defined)</th><th style="border-bottom: 1px solid #527bbd; " align="left" valign="top">Embedded location (<span class="emphasis"><em>linkcss</em></span> attribute undefined)</th></tr></thead><tbody><tr><td style="border-right: 1px solid #527bbd; border-bottom: 1px solid #527bbd; " align="left" valign="top"><p>Undefined (default).</p></td><td style="border-right: 1px solid #527bbd; border-bottom: 1px solid #527bbd; " align="left" valign="top"><p>Same directory as the output document.</p></td><td style="border-bottom: 1px solid #527bbd; " align="left" valign="top"><p><code class="literal">javascripts</code> subdirectory in the AsciiDoc configuration directory
(the directory containing the backend conf file).</p></td></tr><tr><td style="border-right: 1px solid #527bbd; " align="left" valign="top"><p>Absolute or relative directory name.</p></td><td style="border-right: 1px solid #527bbd; " align="left" valign="top"><p>Absolute or relative to the output document.</p></td><td style="" align="left" valign="top"><p>Absolute or relative to the AsciiDoc configuration directory (the
directory containing the backend conf file).</p></td></tr></tbody></table></div></div><br class="table-break" /><div class="section"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a id="X99"></a>7.1. Themes</h2></div></div></div><p>The AsciiDoc <span class="emphasis"><em>theme</em></span> attribute is used to select an alternative CSS
stylesheet and to optionally include additional JavaScript code.</p><div class="itemizedlist"><ul class="itemizedlist" style="list-style-type: disc; "><li class="listitem">
Theme files reside in an AsciiDoc <a class="link" href="ch26.html#X27" title="26.11. Configuration file names, precedence and locations">configuration directory</a>
named <code class="literal">themes/<theme>/</code> (where <code class="literal"><theme></code> is the the theme name set
by the <span class="emphasis"><em>theme</em></span> attribute). asciidoc(1) sets the <span class="emphasis"><em>themedir</em></span> attribute
to the theme directory path name.
</li><li class="listitem">
The <span class="emphasis"><em>theme</em></span> attribute can also be set using the asciidoc(1)
<code class="literal">--theme</code> option, the <code class="literal">--theme</code> option can also be used to manage
theme <a class="link" href="ch34.html" title="Chapter 34. Plugins">plugins</a>.
</li><li class="listitem">
AsciiDoc ships with two themes: <span class="emphasis"><em>flask</em></span> and <span class="emphasis"><em>volnitsky</em></span>.
</li><li class="listitem">
The <code class="literal"><theme>.css</code> file replaces the default <code class="literal">asciidoc.css</code> CSS file.
</li><li class="listitem">
The <code class="literal"><theme>.js</code> file is included in addition to the default
<code class="literal">asciidoc.js</code> JavaScript file.
</li><li class="listitem">
If the <a class="link" href="ch21.html#X66" title="Embedding images in XHTML documents">data-uri</a> attribute is defined then icons are loaded
from the theme <code class="literal">icons</code> sub-directory if it exists (i.e. the
<span class="emphasis"><em>iconsdir</em></span> attribute is set to theme <code class="literal">icons</code> sub-directory path).
</li><li class="listitem">
Embedded theme files are automatically inserted in the output files
but you need to manually copy linked CSS and Javascript files to the
location of the output documents.
</li><li class="listitem">
Linked CSS and JavaScript theme files are linked to the same linked
locations as <a class="link" href="ch07.html" title="Chapter 7. HTML5 and XHTML 1.1">other CSS and JavaScript files</a>.
</li></ul></div><p>For example, the command-line option <code class="literal">--theme foo</code> (or <code class="literal">--attribute
theme=foo</code>) will cause asciidoc(1) to search <a class="link" href="ch26.html#X27" title="26.11. Configuration file names, precedence and locations">configuration file locations 1</a> for a sub-directory called <code class="literal">themes/foo</code>
containing the stylesheet <code class="literal">foo.css</code> and optionally a JavaScript file
name <code class="literal">foo.js</code>.</p></div></div><div class="navfooter"><hr /><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"><a accesskey="p" href="ch06.html"><img src="images/icons/prev.png" alt="Prev" /></a> </td><td width="20%" align="center"> </td><td width="40%" align="right"> <a accesskey="n" href="ch08.html"><img src="images/icons/next.png" alt="Next" /></a></td></tr><tr><td width="40%" align="left" valign="top"> </td><td width="20%" align="center"><a accesskey="h" href="index.html"><img src="images/icons/home.png" alt="Home" /></a></td><td width="40%" align="right" valign="top"> </td></tr></table></div></body></html>
|
