99e898fa69676529aacb8d4b59e413ffb9012b87
[WebKit-https.git] / Source / WebCore / css / mathml.css
1 @namespace "http://www.w3.org/1998/Math/MathML";
2
3 math {
4     /*
5     We use the exact bounding boxes of glyphs to avoid excessive gaps in mathematical formulas.
6     FIXME: Should we replace this with a more general handling of ink/logical ascent/descent?
7     See http://webkit.org/b/130326, http://webkit.org/b/156841 and
8     http://www.mathml-association.org/MathMLinHTML5/S3.html#SS1.SSS1
9     */
10     -webkit-line-box-contain: glyphs replaced;
11
12     /*
13     Inheriting the following properties can cause excessive spacing of mathematical formulas so we
14     just reset them to their default values.
15     */
16     text-indent: 0;
17     line-height: normal;
18     word-spacing: normal;
19     letter-spacing: normal;
20
21     /*
22     In some countries and languages, text is written from right-to-left while mathematical formulas
23     are written from left-to-write. Hence it is wrong to inherit the direction and we reset that
24     property to left-to-write. Per the MathML specification, authors should explicitly use the "dir"
25     attribute on the <math> element if they want to force the overall direction of the mathematical
26     formulas.
27     */
28     direction: ltr;
29
30     /* Fonts with appropriate Unicode coverage and OpenType features are required for good math
31     rendering. These requirements as well as the up-to-date list of known math fonts to fulfill
32     these requirements are listed on http://trac.webkit.org/wiki/MathML/Fonts.
33     Inheriting the font-family is likely to make MathML use text fonts that are not designed for
34     math layout and thus would cause very poor mathematical rendering. Consequently, the default
35     font-family on the <math> tag is set to a list of recommended math fonts.
36     For best rendering, authors and readers are encouraged to use text and math fonts with consistent
37     style (appearance, size...), see http://trac.webkit.org/wiki/MathML/Fonts#CustomizingMathFont
38     FIXME: Should we make math font properties configurable (http://webkit.org/b/156843)?
39     */
40     font-family:
41        /*
42        This font has Computer Modern style and is provided with most TeX & Linux distributions.
43        We put it as the default because its style is familiar to TeX, Wikipedia and math people.
44        */
45        "Latin Modern Math",
46
47        /*
48        The following fonts have Times style and are provided with most TeX & Linux distributions.
49        We put XITS & STIX as a second option because they have very good unicode coverage.
50        XITS is a fork of STIX with bug fixes and more Arabic/RTL features so we put it first.
51        */
52        "XITS Math",
53        "STIX Math",
54        "Libertinus Math",
55        "TeX Gyre Termes Math",
56
57        /*
58        These fonts respectively have style compatible with Bookman Old and Century Schoolbook.
59        They are provided with most TeX & Linux distributions.
60        */
61        "TeX Gyre Bonum Math",
62        "TeX Gyre Schola",
63
64        /*
65        The following fonts have Palatino style and are provided with most TeX & Linux distributions.
66        Asana Math has some rendering issues (e.g. missing italic correction) so we put it after.
67        */
68        "TeX Gyre Pagella Math",
69        "Asana Math",
70
71        /*
72        The following fonts are proprietary and have not much been tested so we put them at the end.
73        Cambria Math it is pre-installed on Windows 7 and higher.
74        */
75        "Cambria Math",
76        "Lucida Bright Math",
77        "Minion Math",
78
79        /*
80        The following fonts do not satisfy the requirements for good mathematical rendering.
81        These are pre-installed on Mac and iOS so we list them to provide minimal unicode-based
82        mathematical rendering. For more explanation of fallback mechanisms and missing features see
83        http://trac.webkit.org/wiki/MathML/Fonts#ObsoleteFontsandFallbackMechanisms.
84        STIX fonts have best unicode coverage so we put them first. */
85        STIXGeneral,
86        STIXSizeOneSym,
87        Symbol,
88        "Times New Roman",
89
90        /* Mathematical fonts generally use "serif" style. Hence we append the generic "serif" family
91        as a fallback in order to increase our chance to find a mathematical font. */
92        serif;
93
94     /* FIXME: Should we reset more CSS properties (http://webkit.org/b/156839)? */
95 }
96
97 math {
98     display: -webkit-inline-flex !important;
99     padding-left: 1px;
100     padding-right: 1px;
101 }
102
103 math[display="block"] {
104     display: flex !important;
105     justify-content: center;
106     page-break-inside: avoid;
107     /* -webkit-margin-before: 1em; -- FIXME: Ask www-math for a default MathML stylesheet, including this (or margin-top). */
108     -webkit-margin-after: 1em;
109 }
110
111 ms, mi, mo, mrow, mfenced, mfrac, msub, msup, msubsup, mmultiscripts, mprescripts, none, munder, mover, munderover, msqrt, mroot, merror, mphantom, mstyle, menclose {
112     display: -webkit-inline-flex !important;
113 }
114
115 ms, mtext, mi, mn, mo, annotation, mtd {
116     white-space: nowrap !important;
117 }
118
119 mo {
120     flex-direction: column;
121 }
122
123 msub > * + *, msup > * + *, msubsup > * + *, mmultiscripts > * + *, munder > * + *, mover > * + *, munderover > * + * {
124     font-size: 0.75em; /* FIXME: MathML standard is 0.71em */
125 }
126 mroot > *:last-child {
127     font-size: 0.5625em; /* This 0.75^2 since the scriptlevel is incremented by 2 in the index. */
128 }
129
130 mi {
131     -webkit-padding-end: 0.1em;
132 }
133 msub > mi:first-child, msubsup > mi:first-child {
134     -webkit-padding-end: 0;
135 }
136 msubsup > mi:first-child + * + * {
137     -webkit-margin-start: 0.14em; /* This is larger than 0.1em because the child's font-size is smaller than the <msubsup>'s. */
138 }
139
140 math[mathvariant="normal"], mstyle[mathvariant="normal"], mo[mathvariant="normal"], mn[mathvariant="normal"], mi[mathvariant="normal"], mtext[mathvariant="normal"], mspace[mathvariant="normal"], ms[mathvariant="normal"] {
141     font-style: normal;
142     font-weight: normal;
143 }
144
145 math[mathvariant="bold"], mstyle[mathvariant="bold"], mo[mathvariant="bold"], mn[mathvariant="bold"], mi[mathvariant="bold"], mtext[mathvariant="bold"], mspace[mathvariant="bold"], ms[mathvariant="bold"] {
146     font-style: normal;
147     font-weight: bold;
148 }
149
150 math[mathvariant="italic"], mstyle[mathvariant="italic"], mo[mathvariant="italic"], mn[mathvariant="italic"], mi[mathvariant="italic"], mtext[mathvariant="italic"], mspace[mathvariant="italic"], ms[mathvariant="italic"] {
151     font-style: italic;
152     font-weight: normal;
153 }
154
155 math[mathvariant="bold-italic"], mstyle[mathvariant="bold-italic"], mo[mathvariant="bold-italic"], mn[mathvariant="bold-italic"], mi[mathvariant="bold-italic"], mtext[mathvariant="bold-italic"], mspace[mathvariant="bold-italic"], ms[mathvariant="bold-italic"] {
156     font-weight: bold;
157     font-style: italic;
158 }
159
160 math[mathsize="small"], mstyle[mathsize="small"], mo[mathsize="small"], mn[mathsize="small"], mi[mathsize="small"], mtext[mathsize="small"], mspace[mathsize="small"], ms[mathsize="small"] {
161     font-size: 0.75em;
162 }
163
164 math[mathsize="normal"], mstyle[mathsize="normal"], mo[mathsize="normal"], mn[mathsize="normal"], mi[mathsize="normal"], mtext[mathsize="normal"], mspace[mathsize="normal"], ms[mathsize="normal"] {
165     font-size: 1em;
166 }
167
168 math[mathsize="big"], mstyle[mathsize="big"], mo[mathsize="big"], mn[mathsize="big"], mi[mathsize="big"], mtext[mathsize="big"], mspace[mathsize="big"], ms[mathsize="big"] {
169     font-size: 1.5em;
170 }
171  
172 mphantom {
173     visibility: hidden;
174 }
175
176 /* This is a special style for erroneous markup. */
177 merror {
178     outline: solid thin red;
179     font-weight: bold;
180     font-family: sans-serif;
181     background-color: lightYellow;
182 }
183
184 mtable {
185     display: inline-table;
186     text-align: center;
187 }
188
189 mtr {
190     display: table-row;
191 }
192
193 mtd {
194     display: table-cell;
195     padding: 0.5ex;
196 }
197
198 mtable[columnalign="left"], mtr[columnalign="left"], mtd[columnalign="left"] {
199     text-align: left;
200 }
201
202 mtable[columnalign="right"], mtr[columnalign="right"], mtd[columnalign="right"] {
203     text-align: right;
204 }
205
206 mtable[rowalign="top"] mtd, mtable mtr[rowalign="top"] mtd, mtable mtr mtd[rowalign="top"] {
207     vertical-align: top;
208 }
209
210 mtable[rowalign="bottom"] mtd, mtable mtr[rowalign="bottom"] mtd, mtable mtr mtd[rowalign="bottom"] {
211     vertical-align: bottom;
212 }
213
214 mtable[rowalign="center"] mtd, mtable mtr[rowalign="center"] mtd, mtable mtr mtd[rowalign="center"] {
215     vertical-align: middle;
216 }
217
218 mtable[frame="solid"] {
219     border: solid thin;
220 }
221
222 mtable[frame="dashed"] {
223     border: dashed thin;
224 }
225
226 mtable[rowlines="solid"], mtable[rowlines="dashed"], mtable[columnlines="solid"], mtable[columnlines="dashed"] {
227     border-collapse: collapse;
228 }
229
230 mtable[rowlines="solid"] > mtr + mtr {
231     border-top: solid thin;
232 }
233
234 mtable[rowlines="dashed"] > mtr + mtr {
235     border-top: dashed thin;
236 }
237
238 mtable[columnlines="solid"] > mtr > mtd + mtd {
239     border-left: solid thin;
240 }
241
242 mtable[columnlines="dashed"] > mtr > mtd + mtd {
243     border-left: dashed thin;
244 }