Add \overleftrightarrow command.
This is simply another Style command with custom CSS to make a line with an
arrowhead at each end.
There were a couple of small issues here:
1. :after is used to fill empty blocks, but I need :after for the right
arrowhead.
This was resolved by using min-width and min-height. Both are extremely
common CSS at this point.
2. The original \overleftarrow and \overrightarrow work upon which this is
based do not scale well.
I made no effort to fix the scaling issue. The current arrows misalign with
the line if the font-size changes even slightly. Using \overleftarrow in
the visual test page, where the base font is .8em causes issues.
Without using JavaScript to alter inline styles, I think that end users will
have to write custom styles if they are using non-standard font sizes. This
is no worse than the original implementation, so I feel confident that the
\overleftrightarrow is as good as what currently exists for the other arrow
types.
3. The collapsed arrowheads for \overleftrightarrow collapse on top of one
another when the block is empty. It looks like an asterisk.
The min-width could be made larger. This is part of a set of geometric
markers that need at least two identifiers underneath. No line segment,
ray, or line can be defined without at least two points.
Given that the current \over* markers do not have enough space when empty
for two characters, I concluded that two space was not necessary here
either. The difference, however, is that the single-arrowhead lines do not
present a visual miscue when collapsed to a single character width.
This would be an easy change. Given the variable width nature of Symbola, I
recommend that the min-width be set to 1.5em if this change is desired.
Our custom CSS that we apply on top of MathQuill's base CSS for our product
does use the 1.5em min-width.
diff --git a/src/commands/math/commands.js b/src/commands/math/commands.js
index 7d7cc31..20a18ac 100644
--- a/src/commands/math/commands.js
+++ b/src/commands/math/commands.js
@@ -81,6 +81,7 @@
LatexCmds.overline = LatexCmds.bar = bind(Style, '\\overline', 'span', 'class="mq-non-leaf mq-overline"');
LatexCmds.overrightarrow = bind(Style, '\\overrightarrow', 'span', 'class="mq-non-leaf mq-overarrow mq-arrow-right"');
LatexCmds.overleftarrow = bind(Style, '\\overleftarrow', 'span', 'class="mq-non-leaf mq-overarrow mq-arrow-left"');
+LatexCmds.overleftrightarrow = bind(Style, '\\overleftrightarrow', 'span', 'class="mq-non-leaf mq-overarrow mq-arrow-both"');
LatexCmds.overarc = bind(Style, '\\overarc', 'span', 'class="mq-non-leaf mq-overarc"');
// `\textcolor{color}{math}` will apply a color to the given math content, where
diff --git a/src/css/math.less b/src/css/math.less
index ac6b777..65ac2e9 100644
--- a/src/css/math.less
+++ b/src/css/math.less
@@ -356,9 +356,11 @@
}
.mq-overarrow {
+ min-width: .5em;
border-top: 1px solid black;
margin-top: 1px;
padding-top: 0.2em;
+ text-align: center;
&:before {
display: block;
@@ -377,5 +379,34 @@
filter: FlipH;
-ms-filter: "FlipH";
}
+ &.mq-arrow-both {
+ vertical-align: text-bottom;
+
+ &.mq-empty {
+ min-height: 1.23em;
+
+ &:after {
+ top: -0.34em;
+ }
+ }
+ &:before{
+ -moz-transform: scaleX(-1);
+ -o-transform: scaleX(-1);
+ -webkit-transform: scaleX(-1);
+ transform: scaleX(-1);
+ filter: FlipH;
+ -ms-filter: "FlipH";
+ }
+ &:after {
+ display: block;
+ position: relative;
+ top: -2.3em;
+ font-size: 0.5em;
+ line-height: 0em;
+ content: '\27A4';
+ visibility: visible; //must override .mq-editable-field.mq-empty:after
+ text-align: right;
+ }
+ }
}
}
