pulljosh.com
A world-class math input for the web
1.math {
2 font-family: Symbola, "Times New Roman", serif;
3 font-size: 24px;
4 font-weight: 400;
5 padding: 0.25em 0.5em;
6 /* font-size: 75px; */
7
8 display: inline-block;
9 border: 1px solid black;
10
11 /* No wrapping */
12 box-sizing: border-box;
13 white-space: nowrap;
14 max-width: 100%;
15 overflow-x: auto;
16}
17
18.strand > * {
19 margin: 0 0.08em;
20}
21
22.cursor {
23 margin: 0 -0.04em;
24 display: inline-block;
25 border-left: 1px solid black;
26 vertical-align: baseline;
27 animation: blink 1s steps(1) infinite;
28
29 /*
30 The cursor contains a zero-width space for styling purposes (so it has a natural character height but no width).
31 If users accidentally copy & pasate this character, it can be very confusing, so we disable selecting it.
32 */
33 user-select: none;
34}
35
36@keyframes blink {
37 0%,
38 50% {
39 border-left-color: black;
40 }
41 50.01%,
42 100% {
43 border-left-color: transparent;
44 }
45}
46
47.selected {
48 background-color: rgba(0, 120, 215, 0.3);
49}
50
51.fraction {
52 display: inline-block;
53 text-align: center;
54 font-size: 0.85em;
55 vertical-align: 0.33em; /* 4. Move the fraction up slightly relative to the surrounding text. This adjusts the fraction so that the fraction bar is inline with the center of the surrounding text rather than the surrounding text's baseline. */
56}
57
58.fraction .fraction .fraction {
59 font-size: 1em; /* Stop shrinking font size after third level */
60}
61
62.numerator {
63 display: block;
64 overflow: hidden; /* 3. When an element's overflow property is not "visible", its baseline becomes the bottom edge of the element rather than the baseline of the text within it. This is good because it aligns the center of the fraction (the bottom of the numerator) with the baseline of the surrounding text. */
65
66 /* Avoid clipping cursor on right edge of numerator due to overflow: hidden */
67 padding: 0 1px;
68 margin: 0 -1px;
69}
70
71.denominator {
72 display: block;
73 float: left; /* 1. This causes the denominator to be taken out of the text flow, making the baseline of the numerator align with the overall baseline. (This is then adjusted to center the fraction bar.) */
74 width: 100%; /* 2. Floating this element causes it to stop being full width, but we want it to be full width just like the numerator is so that centering the text works. */
75}
76
77.denominator::before {
78 user-select: none;
79 content: "";
80 display: block;
81 height: 0.06em;
82 background: currentColor;
83 width: 100%;
84 border-radius: 0.03em;
85}
86
87.numerator:empty::after,
88.denominator:empty::after {
89 display: inline-block;
90 content: "";
91 width: 0.6em;
92 height: 0.6em;
93 background: #ddd;
94}
95
96.subsup {
97 display: inline-block;
98 font-size: 0.6em;
99 vertical-align: 0.33em;
100}
101
102.subscript {
103 display: block;
104 float: left;
105 width: 100%;
106}
107
108.superscript {
109 display: block;
110 overflow: hidden;
111
112 padding: 0 1px;
113 margin: 0 -1px;
114}
115
116.radical {
117 display: inline-flex;
118 align-items: flex-start;
119 position: relative;
120}
121
122.radical-index {
123 font-size: 0.75em;
124}
125
126.radicand {
127 position: relative;
128 display: inline-block;
129 border-top: 0.1em solid currentColor;
130 border-left: 0.1em solid currentColor;
131}
132
133.radicand::before {
134 content: "";
135 position: absolute;
136 width: 0.35em;
137 height: 0.35em;
138 bottom: 0em;
139 left: -0.1em;
140 transform-origin: center center;
141 transform: translateX(-50%) translateY(-20%) rotate(-45deg);
142 border-left: 0.1em solid currentColor;
143 box-sizing: border-box;
144 font-size: 1em;
145}
146
147.matrix {
148 display: inline-table;
149 position: relative;
150 font-size: 0.9em;
151 text-align: center;
152 vertical-align: middle;
153}
154
155.matrix-square {
156 padding-left: 0.2em;
157 padding-right: 0.2em;
158}
159
160.matrix-square::before {
161 content: "";
162 position: absolute;
163 left: 0;
164 top: 0;
165 width: 0.25em;
166 height: 100%;
167 border-top: 0.1em solid currentColor;
168 border-left: 0.1em solid currentColor;
169 border-bottom: 0.1em solid currentColor;
170}
171
172.matrix-square::after {
173 content: " ";
174 position: absolute;
175 right: 0;
176 top: 0;
177 width: 0.25em;
178 height: 100%;
179 border-top: 0.1em solid currentColor;
180 border-right: 0.1em solid currentColor;
181 border-bottom: 0.1em solid currentColor;
182}