Computer modern by default

[Cyrille Piatecki]

I would like to know if it is possible to setup the graphs in such a way that every font be in computer modern (for instance the sliders but also the imported HTML various objects). o use only one font familly seems better than two. I have tried all solutions proposed on internet by HTML pages but no one works really.

[Murray]

Hi Cyrille

It's always best to include a fiddle (or similar) to show how far you got with your problem, then we can fill the gaps - or give suggestions - rather than start from scratch.

You could well run into a lot of issues if you change the fonts, especially since Computer Modern numerals are quite a bit taller than Arial for the same font size, so axes labels could well end up in slightly the wrong place. Generally I think it is better to use a sans-serif font for text, and Computer Modern for actual math (the JSXGraph default), since I feel it makes things more readable.

That said, here's some considerations for what you want to do. (I'm assuming you aren't calling MathJax or KaTeX, and that you just want all your fonts to be Computer Modern.)

(1) Sometimes you can use CSS selectors to vary text attributes (like color, or background, or borders), but usually not font-family since that's mostly set by a style attribute on each element at run time. So in the fiddle, I've set the default style before initialising the board, so it applies to as many text elements as possible. 

(2) You need to allow for text as it first appears, and also for the "highlight" case. This is why I have the 2 statements before calling the board.

(3) You need to get the Computer Modern fonts somehow. I'm making use of KaTeX's style sheet, but you could also use MathJax's in a similar way. I'm using "KaTeX_Main" family, which gives plain text Computer Modern. In the fiddle, you'll also see a case where I've used "KaTeX_Math", which gives italic everything.

(4) Text can either be <text> elements within the SVG (e.g. tick labels on axes)  or <div> elements that sit on top of the SVG (e.g. for board.create('text' ... ) elements), so you need to know what you're actually targeting

(5) Sometimes you have text which is part non-math, and part math, so you have to try to allow for that. Sometimes you can't use HTML in text elements (like the case where you setLabelText, e.g. circ0.setLabelText('this x'); - you can't make the "x" italic, so that it looks like Computer Modern math, in this case.

(6) For more control over the text used on axes, you can create your own axes as I've shown in the fiddle.

So here it is, where I've allowed for all the above issues:

https://jsfiddle.net/mbourne/tbhyrf09/

I suspect you'll create other objects where the font is the default Arial and you may need to tweak it. I hope the rest of the fiddle gives some clues how to do that.

Hope it helps

Regards

Murray