Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added support for bold italic symbols #1011

Merged
merged 13 commits into from
Dec 13, 2017
Merged

Conversation

aterenin
Copy link
Collaborator

@aterenin aterenin commented Dec 6, 2017

This adds support for \boldsymbol, as requested in #633 and #585.

It uses the bold italic fonts already present in KaTeX. It works with both Greek and Latin letters.

@khanbot
Copy link

khanbot commented Dec 6, 2017

Hey @aterenin,

Thanks for the PR! Mind signing our Contributor License Agreement?

When you've done so, go ahead and comment [clabot:check] and I'll check again.

Yours truly,
khanbot

@aterenin
Copy link
Collaborator Author

aterenin commented Dec 6, 2017

[clabot:check]

@khanbot
Copy link

khanbot commented Dec 6, 2017

CLA signature looks good 👍

@kevinbarabash
Copy link
Member

@aterenin thanks for the PR. I thought for some reason we didn't have the fonts or the metrics but apparently we have both. This could probably use a screenshot test. Please see https://github.com/Khan/KaTeX/blob/master/CONTRIBUTING.md#screenshot-tests for details.

@aterenin
Copy link
Collaborator Author

aterenin commented Dec 6, 2017

Tests implemented.

I'm currently in the middle of travel (coded up this PR while on a flight) so I'm not equipped to install docker to run the screenshotter at the moment. It'd be great if someone could run it and add to the PR, otherwise I'll handle it later.

expect(markup).toContain("<mi mathvariant=\"bold-italic\">\u03A9</mi>"); // \Omega
expect(markup).toContain("<mi>\u0131</mi>"); // \imath
expect(markup).toContain("<mo>+</mo>");
});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We've started using snapshot tests for testing MathML markup, see mathml-spec.js. Can you add a test there instead?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do not understand what those tests do or how they work. There are no similar tests implemented for \mathbf or any similar command. Could you either provide reference on how to implement that or accept as-is and move to mathml-spec.js later, when \mathbf is moved there too?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it("should render \\boldsymbol{" + contents + "} with the correct mathvariants", () => {
    const tex = "\\boldsymbol{" + contents + "}";
    const tree = getParsed(tex);
    const markup = buildMathML(tree, tex, defaultOptions).toMarkup();
    expect(markup).toMatchSnapshot();
});

You'll need to run the tests once locally in order to update the katex-spec.js.snap. Include the changes to that file in this diff and you should be good.

The tests work by comparing the output of future runs agains the snapshot. The snapshot can also be regenerated. I should add more detail to https://github.com/Khan/KaTeX/blob/master/CONTRIBUTING.md#jest-tests along with an npm script to regenerate the snapshots when things change.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've added a task for myself: #1013.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

@@ -57,6 +57,7 @@ BinCancellation: |
\end{array}
BinomTest: \dbinom{a}{b}\tbinom{a}{b}^{\binom{a}{b}+17}
BoldSpacing: \mathbf{A}^2+\mathbf{B}_3*\mathscr{C}'
BoldSymbol: \boldsymbol{\omega}+\boldsymbol{\Omega}+\boldsymbol{A}+\boldsymbol{x}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You'll need to generate screenshots and include those files as well. Let me know if you have issues running make screenshots.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

make screenshots does not work. I get the following:

/Users/aterenin/Git/KaTeX/node_modules/selenium-webdriver/lib/promise.js:654
    throw error;
    ^

Error: Timed out waiting for the WebDriver server at http://127.0.0.1:49315/hub
    at onError (/Users/aterenin/Git/KaTeX/node_modules/selenium-webdriver/http/util.js
:87:11)
...

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@aterenin did docker start correctly?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Figured out the problem: I previously didn't install the correct docker.

Screenshots added and pushed.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@aterenin cool. I take it npm install docker installs a client. I should update the README.md for the Screenshot to point to link docker's download page or homepage so there's less confusion.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It might be good to include some other symbols in this such as \sum and \int.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

@jeanm
Copy link

jeanm commented Dec 6, 2017

Great stuff! Would it be possible to add \bm as an alias, too?

@kevinbarabash
Copy link
Member

@jeanm \bm and \boldsymbol are not the same. https://tex.stackexchange.com/questions/3238/bm-package-versus-boldsymbol

@jeanm
Copy link

jeanm commented Dec 7, 2017

Not in LaTeX, true, but do these differences still apply here? And even in LaTeX, the differences are so minimal that they don't matter in the majority of real-world use cases I see in papers in my field.

It would be annoying to have to rewrite a bunch of formulae that use \bm. An alias to \boldsymbol supported out-of-the-box, even just as a temporary fix, would avoid that.

@kevinbarabash
Copy link
Member

@jeanm we'd like avoid implementing commands where the semantics don't match LaTeX's as much as possible. See https://github.com/khan/KaTeX#rendering-options for how to define your own macros.

@edemaine
Copy link
Member

edemaine commented Dec 7, 2017

@aterenin Awesome feature addition! Thanks for working on this.

In #585, I concluded that we should aim to support \bm, as it seems to be the main option recommended these days. This visual comparison suggests \bm and \boldsymbol are extremely close, perhaps only differing in italic correction? Personally I'd be in favor of adding an alias within KaTeX making \bm and \boldsymbol the same, and when we have time, we can try to implement the subtle nuance between the two...

@kevinbarabash
Copy link
Member

I guess I'm okay with the alias too as long as we communicate the short coming and at the very least have an issue in github to track the issue with which command is non-compliant.

@aterenin
Copy link
Collaborator Author

aterenin commented Dec 7, 2017

There's something to be said for simplicity, especially given people can define a macro for \bm if they want to use that command instead.

I can easily add an alias for \bm if the consensus is to add that in. Let me know if people want this.

@kevinbarabash
Copy link
Member

I can easily add an alias for \bm if the consensus is to add that in. Let me know if people want this.

It's sounds like the general consensus to add the alias.

@aterenin
Copy link
Collaborator Author

aterenin commented Dec 8, 2017

Alias added.

<mo>
+
</mo>
</mrow>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think everything in this row should have mathvariant="bold-italic" set.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you sure? These include the imaginary number symbol, as well as the plus symbol, for which mathvariant="bold" is not set even for \mathbf.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rendering the following on quicklatex.com:

\boldsymbol{Ax2k\omega\Omega\imath+} \\
Ax2k\omega\Omega\imath+

results in:
screen shot 2017-12-08 at 11 49 29 pm

Copy link
Collaborator Author

@aterenin aterenin Dec 9, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The symbols for \imath and + that are present in the font looks as follows.

screen shot 2017-12-09 at 10 36 20 am

This is from inspecting the element and manually adding \boldsymbol to the CSS. I don't know how to make KaTeX do that, and given the symbols don't match, should this be done at this stage?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Update: the problem is that bold italic symbols for \imath, +, and 2 are contained in a different font: KaTeX-main. See screenshot below.

screen shot 2017-12-09 at 11 28 27 am

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Turns out the same situation occurs for \mathit - using that as a template, I was able to implement \imath and 2. + is still not correct, because for some reason the font doesn't get applied to it, will look at that shortly.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done. Please see new screenshots that have been pushed.

@kevinbarabash
Copy link
Member

Thanks for adding the snapshot test. Almost there, just need to add mathvariant="bold-italic" to a few of items in the MathML tree. Use npm run jest -- -u to update the snapshot.

@aterenin
Copy link
Collaborator Author

aterenin commented Dec 9, 2017

Test updated.

"\\imath", // dotless i
"\\jmath", // dotless j
"+", // plus symbol
"-", // minus symbol
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I looked at the font file for KaTeX_MainBold and realized that there are more symbols in it that we should show in bold, e.g. =, <, >, etc. We could use lookupSymbol to determine whether we have a bold variant or not, that way we can include all of them without the extra table.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed; this should ideally not be hard coded.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've removed the hardcoded symbols - this was done for mathit so I copied the approach - and am now using lookupSymbol.

): {| fontName: string, fontClass: string |} {
if (/[0-9]/.test(value.charAt(0)) ||
// glyphs for \imath and \jmath do not exist in Math-BoldItalic so
// we need to use Main-BoldItalic instead
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Main-BoldItalic -> Main-Bold

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

// "mathit" and "boldsymbol" are missing because they require the use of two
// fonts: Main-Italic and Math-Italic for "mathit", and Math-BoldItalic and
// Main-Bold for "boldsymbol". This is handled by a special case in makeOrd
// which ends up calling mathit and boldsymbol.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice comment

Copy link
Member

@kevinbarabash kevinbarabash left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Thanks for all the revisions.

@kevinbarabash
Copy link
Member

@aterenin thanks for fixing my lint. 😅

@aterenin
Copy link
Collaborator Author

No worries. I pushed a 1-character fix to make CI happy. Any idea when this'll make it into the release? With this added, I can now switch the live version of my blog from MathJax to KaTeX.

Only thing missing for me now is auto equation numbering, which I've no doubt will make it in eventually. And if I'm allowed to wish for things MathJax can't do autobreak would be awesome.

@kevinbarabash kevinbarabash merged commit cf23517 into KaTeX:master Dec 13, 2017
@kevinbarabash
Copy link
Member

@aterenin thanks for this PR. \bm/\boldsymbol have been requested by lots of people and I'm pretty sure we use it at KA as well so I'm excited that this is finally in KaTeX.

@stapeleliz
Copy link

stapeleliz commented Jan 7, 2018

I'm using KaTeX from the CDN, which is using version 0.9.0-alpha2.

Am I correct that support for bolded italics has not yet been included in the CDN?

Thank you!

@kevinbarabash
Copy link
Member

@stapeleliz that's right. I need to publish a new release.

@matteoipri
Copy link

Hi all,
using the latest version from CDN, I found that the boldsymbol (great and appreciated feature) renders capital Greek letters in italic, while LaTeX does not.

LaTeX code:

$a, b, c, x, y, \alpha, A, \beta, B, \gamma, \Gamma, \sigma, \Sigma, \sum$

$\boldsymbol{a}, \boldsymbol{b}, \boldsymbol{c}, \boldsymbol{x}, \boldsymbol{y}, \boldsymbol{\alpha}, \boldsymbol{A}, \boldsymbol{\beta}, \boldsymbol{B}, \boldsymbol{\gamma}, \boldsymbol{\Gamma}, \boldsymbol{\sigma}, \boldsymbol{\Sigma}, \boldsymbol{\sum}$.

PDF output:
boldsymbol-pdf

KaTeX output (using Chromium on Arch Linux):
boldsymbol-katex

MathJax output (v 2.7.1 from CDN on Chromium on Arch Linux) for comparison:
boldsymbol-mathjax

Note that MathJax renders all capital Greek letters, both normal and bold, as italic, which is wrong, but consistent.

Would it be possible to make KaTeX behave like LaTeX for capital Greek letters? It seems that this is the last missing bit, since it works as expected for other letters and operators (like \sum).

Thank you very much for your attention and all the work put in KaTeX.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants