173 lines
No EOL
9.4 KiB
HTML
173 lines
No EOL
9.4 KiB
HTML
|
|
<!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.0 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.0',
|
|
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>
|
|
<link rel="top" title="MathJax v1.0 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.0 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>
|
|
<h3>This Page</h3>
|
|
<ul class="this-page-menu">
|
|
<li><a href="_sources/CSS-styles.txt"
|
|
rel="nofollow">Show Source</a></li>
|
|
</ul>
|
|
<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.0 documentation</a> »</li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer">
|
|
© Copyright 2010 Design Science.
|
|
Created using <a href="http://sphinx.pocoo.org/">Sphinx</a> 1.0b2.
|
|
</div>
|
|
</body>
|
|
</html> |