# Logical symbols and accessibility

Glad to hear it. You’ll need to give us all tips

Regarding the size of the symbols in Firefox, I second Peter’s request! Could you share a link to the chapter where you’re testing so we can see what might be happening?

The book is currently set to “private” just because it’s still quite rough around the edges, but I’m opening it up temporarily!

Here is chapter 5 of the Logic book, which is where the screen shot is from.

Thank you, @pkra and @apurva!

1 Like

I’m afraid I cannot reproduce the issue though. Here’s a screenshot of what I’m seeing (Firefox 72, linux)

There’s an expected difference due to different fonts being used but not a difference as in your screencapture (if anything, I think the MathJax rendering in the first D1 is better than in the second one – but I’m biased since I used to work for MathJax ).

So I’m flummoxed. I’m wondering if you accidentally triggered MathJax’s custom scaling feature. This can be done in the MathJax user settings by right/cmd-clicking on an equation and then in the MathJax menu selecting “Math Settings” => “Scale All Math” – alternatively, you can clear the cookie MathJax sets for such customizations (if that’s easier for you).

FYI if you want to get an idea as to how accessible your content becomes, you can switch on the Explorer in the Accessibility submenu, followed by activating the subtitle feature; you explore by focusing on an expression (click or tabbing to it) and hitting shift+enter to activate keyboard (arrow-key) exploration.

PS Here’s an old demonstration I recorded when these exploration features were initially implemented https://www.youtube.com/watch?v=6GSgTjorewQ

I’ve actually been able to replicate this issue myself, I’m afraid, as has @zoe. I’m also running Firefox 72.0.1 but on Mac OS. I downloaded the STIX fonts on my system, but that made no change.

I can unbiasedly agree.

@christina.hendricks, I can try to reach out to the Pressbooks team to see if they have any solutions to offer (perhaps setting the minimum scale of the equations to a certain baseline). Let me know if you’d like me to do so!

Hi @pkra and @apurva: I’m running Firefox 72.0.1 on Mac OS as well. Maybe it’s a Mac thing then.

Sure, if you could reach out to the Pressbooks team, Apurva, that would be great.

And for both of you, I have another LaTeX/MathJax question! In the Logic book we are trying to do diagrams like the following screen shots:

My partner was going to make these in LaTeX but then said they wouldn’t render in MathJax (I think he is using TikZ). Is there a way to make diagrams in LaTeX and have them render correctly in MathJax?

Alternatively, I will just make picture files and embed them as images with alternative text for accessibility purposes.

Thank you!

@apurva @christina.hendricks thanks for the details – I can reproduce it on MacOS as well.

Though I’m surprised it only shows up with Firefox on MacOS, I’ve confirmed that it is a known, rather subtle issue discussed at https://groups.google.com/d/msg/mathjax-users/v3W-daBz87k/xjxFFdfQBQAJ: the surrounding webfont (Crimson Text) has bad metadata which trips up MathJax.

To explain, MathJax tries to match its output to the surrounding context, in particular by alignign not just font-size but ex-heights. Crimson Text seems to be one of many Google Fons that has bad metadata regarding its ex-height, causing MathJax’s measuring logic to get it wrong.

You can test this by temporarily disabling Crimson Text which fixes it for me.

It might be that FIrefox considers this a bug or that Pressbooks is willing to (let you) disable font-matching (as described in the MathJax User Group link).

Regarding diagrams, MathJax includes support for the amsCD package http://docs.mathjax.org/en/v2.7-latest/tex.html#amscd but that’s a bit limited and diagonal arrows are difficult.

I’d personally say that those kinds of diagrams don’t fall into the “equation” bucket (which MathJax focuses on) so rendering them in SVG is more appropriate.

You can still make them accessible either in themselves (e.g., using a title/description tags) or by using aria-labelledby/aria-describedby to point to a part of the page that labels/describes the diagram. (And if you want to go all out, there are more complex ARIA techniques if you want to make them “explorable” but those won’t work in epub or kindle formats so it’s likely not worth the trouble.)

1 Like

Thank you so much, Peter, for figuring this out and letting us know! The issue makes a lot of sense, and too bad a number of google fonts have bad metadata.

@Apurva, do you have any thoughts on next steps? We could just put this in the text as a known issue, or change the font (which would mean changing the whole theme for the books, which is not ideal), or see if we can disable font-matching.

Thank you, Peter, for explaining how and why the diagrams are probably better as image files. I haven’t worked with svg though, only jpeg or png (which is what the images are in the Ethics book in the series (mostly photos of philosophers). Okay to use one of those, or should I look into how to create it as svg?

I think I may just go with the alternative text for the image (title/description), which I already know how to do.

Well, I’m coming up against another question. As I’m using LaTeX for the logical symbols in the Logic book, I am finding that if the text is in italics, it won’t translate into a symbol.

For example, I’m trying to do the following, where the A’s and B’s in the LaTeX are in italics:

• If we translate “Alex is a rose” by B , we translate “Alex is not a rose” as “$\neg B$.”
• Another is a symbol ($\rightarrow$) for conditional sentences of the form “if … then ….”. For example, we can translate “If Alex is a rose, then I would love to smell it” as “$B \rightarrow A$.”

This all renders fine if the A’s and B’s are not italicized–the symbols show up correctly with the A’s and B’s in the code. But in most of the chapters of this book the letters standing for statements are italicized…that’s the usual standard in logic books I believe. When they are italicized then what renders as output is just the above, with the $codes. (I’ve also re-tried with the dollar sign syntax instead, and it’s the same problem). I could just make the A’s and B’s normal text (I’d have to talk to the book editor about whether that would be acceptable), or I could just make the symbols in LaTeX and leave the letters outside of the [latex] parameters. But then you don’t get the full “equation” rendered in MathJax and when you click on it to use the accessibility features like making it bigger, you just get the symbol. So I’d rather be able to include the letters in there as well as the symbols. Is there something about MathJax that doesn’t work well with italics? Or might it be another issue with the font? (Though I tested on Safari and it looks the same there so I don’t think it’s a similar issue as we were facing before.) Thanks so much for troubleshooting Peter. I’ll note that disabling Crimson Text didn’t have any impact for me, but I spotted a setting in the rendering that was forcing font-size to 50%, and setting this to 100% seemed to resolve the issue in my browser. This isn’t a setting that we can control for all readers via the book’s CSS, so I’ve reached out to Pressbooks. For now, I’ve passed along all this information to the Pressbooks team to see if they can implement one of the possible solutions: • disable font-matching (as described in the MathJax User Group) • set a minimum scale for the equations, also described in the user group above • set the MathJax equations font-size to 100% I’ll keep you posted on what they say. As for the diagrams, we might have a few options: 1. It turns out that the QuickLaTeX plugin in Pressbooks supports TikZ graphics and other commands that may not be supported using regular LaTeX (and MathJax). I’ve asked the Pressbooks team whether it’s possible to display and render the diagrams via QuickLaTeX, and the others via MathJax, which is preferred. I’ll let you know what they say, but it would be worth activating the QuickLaTeX plugin and testing whether you’re able to render the diagrams. See instructions in the Pressbooks User Guide. 2. If the diagrams are displayed via QuickLaTeX, we could switch over to this entirely (contingent on whether the diagrams can still be made accessible with QuickLaTeX). 3. Or, we could stick with MathJax to display the equations, and display the diagrams as images with alt-text. If we go this route, I’d suggest using SVG images, as these tend to be better quality for print versions. Finally, with regards to your question about italics, you can use use the command \textit in LaTeX to italicize text. So with your examples, you would enter: • If we translate “Alex is a rose” by B , we translate “Alex is not a rose” as “[latex] \neg \textit{B}$.”
• Another is a symbol ($\rightarrow$) for conditional sentences of the form “if … then ….”. For example, we can translate “If Alex is a rose, then I would love to smell it” as “$\textit{B} \rightarrow \textit{A}$.”

Give that a shot, and let me know how it works. I’ll write back here soon about the diagrams and Firefox issue when I have an update from the Pressbooks support team.

Wonderful, thank you for the update, @apurva! I don’t know enough about QuickLaTeX to have much of an opinion, but I really like the accessibility aspects of MathJax and don’t want to lose that.

I can learn how to make a diagram in svg, using one of the tools here perhaps: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Tools_for_SVG I may try Inkscape. Apparently google docs drawing can save as svg too but I don’t know enough to know whether the quality of that would be just as good as something like Inkscape.

And I will try the italics command for the LaTeX logical notation–thanks for the tip!

I agree! The Pressbooks team has confirmed that we would need to go with only one of QuickLaTeX or MathJax, as they cannot both be active at the same time. So let’s stick with MathJax and use SVGs with alt-text for the diagrams. Inkscape seems like a good option for creating the diagrams.

No problem for the italics tip. I hope it works well!

Regarding the font-size issue of MathJax equations in Firefox — the Pressbooks team has verified @pkra’s diagnosis with the Crimson Text font in the Graham theme (which is what the book is currently on). While they’re looking into a permanent solution for the issue, they’ve suggested we change the book’s theme from Graham to either Clarke, Malala, Jacobs, or McLuhan to temporarily resolve the error. An alternative would be replacing the Crimson Text font in the Graham theme in the web stylesheet to a standard serif font. I’ll let you decide how best to proceed, and will keep you posted if I have an update from Pressbooks about the Graham theme bug.

@christina.hendricks to make some additional suggestions for SVGs

• you can export Tikz diagrams to SVG using “real” LaTeX, cf. this guide
• there are other human readable authoring tools for diagrams that might be easier to learn. For example, I like mermaid – there’s even a nice live editor to play around .
1 Like

If you haven’t come across these resources already, you may also want to check over the following:

Looking forward to seeing how your “Logic” book turns out!

2 Likes

Okay, let me think about what to do about the Graham theme. I don’t want to change the theme of all the books at this point (especially if this is a temporary issue), so whatever we do would just be for the Logic book. There is a bit of LaTeX/MathJax in the Philosophy of Mind book, but only a little bit in one chapter so I’m going to leave that one as is.

I could change the Crimson Text font in the Graham theme but am not sure what font would work as standard serif to avoid this issue. Other parts of the Graham theme use a sans-serif font (I think it’s Lato), which I could switch to but I don’t know if it would have the same issue.

Thanks so much for checking with the Pressbooks folks on this!

Thank you, Peter! I looked at Mermaid but it seems to be something that runs directly in the browser with a script one adds through html, yes? Honestly, I don’t know if I have that right…much of this is very new to me. At any rate, I couldn’t figure out how to create a diagram and save it as an svg to import into the book, and I think that’s not exactly what it does …?

Thank you, Christopher! I was not aware of these resources and am going to check them out now!

@christina.hendricks the live editor I linked to will provide you with a link to download the SVG (and also a PNG for good measure). So there’s no need to add another script (unless you want to )

I agree about sticking with the Graham theme for the time being. And by standard serif, I meant simply the default serif font that the browser supplies. I’ve confirmed with the Pressbooks team that altering the Web CSS Stylesheet like so will temporarily resolve the error without any adverse effects on the book:
.front-matter, .part, .chapter, .back-matter, body#tinymce.wp-editor {
font-family: serif; }

I’ll let you know when the permanent fix has been deployed by Pressbooks, so you can remove this manual addition to the web Custom Styles. Also, just a note in case you were looking into other themes: this bug also has been found to affect the Atwood and Baker themes.

Thanks also to everyone who is contributing to this discussion and sharing resources! I’ve saved a whole bunch, and know I will be coming back to this thread for reference in future.

Thanks, @apurva, adding the above to the custom CSS is working just fine, so now the LaTeX output on Firefox on my Mac looks like the right size.

Another question! I noticed on the original document for one of the chapters that some of the logical symbols are both bold and italics, so I tried the following, which I found through a web search:

$latex \neg \textbf{\textit{A}}$


It resulted in:

So it did the bold but not the italics. I also switched the order of the bold and italics commands, and also tried \emph instead of \textit, and the same issue–it would only do one of the styles but not both.

Is there something I’m doing wrong here?

I am certainly learning a lot, and really appreciate the help!

Oh, and @pkra, thank you so much for the info about the live editor with Mermaid. I will check that out!

1 Like