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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
|
<!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>CSS Style Objects — MathJax v1.1 documentation</title>
<link rel="stylesheet" href="_static/mj.css" type="text/css" />
<link rel="stylesheet" href="_static/pygments.css" type="text/css" />
<script type="text/javascript">
var DOCUMENTATION_OPTIONS = {
URL_ROOT: '',
VERSION: '1.1',
COLLAPSE_INDEX: false,
FILE_SUFFIX: '.html',
HAS_SOURCE: true
};
</script>
<script type="text/javascript" src="_static/jquery.js"></script>
<script type="text/javascript" src="_static/underscore.js"></script>
<script type="text/javascript" src="_static/doctools.js"></script>
<!--<script type="text/javascript" src="../../MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>-->
<link rel="top" title="MathJax v1.1 documentation" href="index.html" />
<link rel="next" title="Glossary" href="glossary.html" />
<link rel="prev" title="Describing HTML snippets" href="HTML-snippets.html" />
</head>
<body>
<div class="related">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="genindex.html" title="General Index"
accesskey="I">index</a></li>
<li class="right" >
<a href="glossary.html" title="Glossary"
accesskey="N">next</a> |</li>
<li class="right" >
<a href="HTML-snippets.html" title="Describing HTML snippets"
accesskey="P">previous</a> |</li>
<li><a href="index.html">MathJax v1.1 documentation</a> »</li>
</ul>
</div>
<div class="document">
<div class="documentwrapper">
<div class="bodywrapper">
<div class="body">
<div class="section" id="css-style-objects">
<span id="id1"></span><h1>CSS Style Objects<a class="headerlink" href="#css-style-objects" title="Permalink to this headline">ΒΆ</a></h1>
<p>Many MathJax components allow you to specify CSS styles that control
the look of the elements they create. These are described using CSS
style objects, which are JavaScript objects that represent standard
CSS declarations. The main CSS style object is a collection of
<cite>name:value</cite> pairs where the <cite>name</cite> is the CSS selector that is being
defined, and the <cite>value</cite> is an object that gives the style for that
selector. Most often, the selector will need to be enclosed in
quotation marks, as it will contain special characters, so you would
need to use <tt class="docutils literal"><span class="pre">"#myID"</span></tt> rather than just <tt class="docutils literal"><span class="pre">#myID</span></tt> and <tt class="docutils literal"><span class="pre">"ul</span> <span class="pre">li"</span></tt>
rather than just <tt class="docutils literal"><span class="pre">ul</span> <span class="pre">li</span></tt>.</p>
<p>The value used to define the CSS style can either be a string
containing the CSS definition, or a javascript object that is itself a
collection of <cite>name:value</cite> pairs, where the <cite>name</cite> is the attribute
being defined and <cite>value</cite> is the value that attibute should be given.
Note that, since this is a JavaScript object, the pairs are separated
by commas (not semi-colons) and the values are enclosed in quotation
marks. If the name contains dashes, it should be enclosed in
quotation marks as well.</p>
<p>For example, <tt class="docutils literal"><span class="pre">jax/output/HTML-CSS/config.js</span></tt> includes the following
declaration:</p>
<div class="highlight-javascript"><div class="highlight"><pre><span class="nx">styles</span><span class="o">:</span> <span class="p">{</span>
<span class="s2">".MathJax .merror"</span><span class="o">:</span> <span class="p">{</span>
<span class="s2">"background-color"</span><span class="o">:</span> <span class="s2">"#FFFF88"</span><span class="p">,</span>
<span class="nx">color</span><span class="o">:</span> <span class="s2">"#CC0000"</span><span class="p">,</span>
<span class="nx">border</span><span class="o">:</span> <span class="s2">"1px solid #CC0000"</span><span class="p">,</span>
<span class="nx">padding</span><span class="o">:</span> <span class="s2">"1px 3px"</span><span class="p">,</span>
<span class="s2">"font-family"</span><span class="o">:</span> <span class="s2">"serif"</span><span class="p">,</span>
<span class="s2">"font-style"</span><span class="o">:</span> <span class="s2">"normal"</span><span class="p">,</span>
<span class="s2">"font-size"</span><span class="o">:</span> <span class="s2">"90%"</span>
<span class="p">},</span>
<span class="s2">".MathJax_Preview"</span><span class="o">:</span> <span class="p">{</span><span class="nx">color</span><span class="o">:</span> <span class="s2">"#888888"</span><span class="p">},</span>
<span class="p">}</span>
</pre></div>
</div>
<p>This defines two CSS styles, one for the selector <tt class="docutils literal"><span class="pre">.MathJax</span>
<span class="pre">.merror</span></tt>, which specifies a background color, foreground color,
border, and so on, and a second for <tt class="docutils literal"><span class="pre">.MathJax_Preview</span></tt> that sets its
color.</p>
<p>You can add as many such definitions to a <tt class="docutils literal"><span class="pre">styles</span></tt> object as you
wish. Note, however, that since this is a JavaScript object, the
selectors must be unique (e.g., you can’t use two definitions for
<tt class="docutils literal"><span class="pre">"img"</span></tt>, for example, as only the last one would be saved). If you
need to use more than one entry for a single selector, you can add
comments like <tt class="docutils literal"><span class="pre">/*</span> <span class="pre">1</span> <span class="pre">*/</span></tt> and <tt class="docutils literal"><span class="pre">/*</span> <span class="pre">2</span> <span class="pre">*/</span></tt> to the selector to make them
unique.</p>
<p>It is possible to include selectors like <tt class="docutils literal"><span class="pre">"@media</span> <span class="pre">print"</span></tt>, in which
case the value is a CSS style object. For example:</p>
<div class="highlight-javascript"><div class="highlight"><pre><span class="nx">styles</span><span class="o">:</span> <span class="p">{</span>
<span class="s2">"@media print"</span><span class="o">:</span> <span class="p">{</span>
<span class="s2">".MathJax .merror"</span><span class="o">:</span> <span class="p">{</span>
<span class="s2">"background-color"</span><span class="o">:</span> <span class="s2">"white"</span><span class="p">,</span>
<span class="nx">border</span><span class="o">:</span> <span class="mi">0</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
</pre></div>
</div>
<p>The various extensions and output processors include more examples of
CSS style objects, so see the code for those files for additional
samples. In particular, the <tt class="docutils literal"><span class="pre">extensions/MathMenu.js</span></tt>,
<tt class="docutils literal"><span class="pre">extensions/MathZoom.js</span></tt>, <tt class="docutils literal"><span class="pre">extensions/FontWarnsing.js</span></tt>, and
<tt class="docutils literal"><span class="pre">jax/output/HTML-CSS/jax.js</span></tt> files include such definitions.</p>
</div>
</div>
</div>
</div>
<div class="sphinxsidebar">
<div class="sphinxsidebarwrapper">
<h4>Previous topic</h4>
<p class="topless"><a href="HTML-snippets.html"
title="previous chapter">Describing HTML snippets</a></p>
<h4>Next topic</h4>
<p class="topless"><a href="glossary.html"
title="next chapter">Glossary</a></p>
<div id="searchbox" style="display: none">
<h3>Quick search</h3>
<form class="search" action="search.html" method="get">
<input type="text" name="q" size="18" />
<input type="submit" value="Go" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
<p class="searchtip" style="font-size: 90%">
Enter search terms or a module, class or function name.
</p>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
</div>
</div>
<div class="clearer"></div>
</div>
<div class="related">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="genindex.html" title="General Index"
>index</a></li>
<li class="right" >
<a href="glossary.html" title="Glossary"
>next</a> |</li>
<li class="right" >
<a href="HTML-snippets.html" title="Describing HTML snippets"
>previous</a> |</li>
<li><a href="index.html">MathJax v1.1 documentation</a> »</li>
</ul>
</div>
<div class="footer">
© Copyright 2011 Design Science.
Created using <a href="http://sphinx.pocoo.org/">Sphinx</a> 1.0.7.
</div>
</body>
</html>
|
