The function support page of KaTeX states that the dimension of KaTeX units used for font dimensions are computed with respect to the surrounding HTML text. In particular, it states that
G = 1.21 by default, because KaTeX font-size is normally 1.21 × the surrounding font size. This value can be over-ridden by the CSS of an HTML page. For example, on this page, G = 1.0.
Now the question is, where I should change the value of G?
As stated in the KaTex wiki, that can be reset in CSS as, for example,
.katex { font-size: 1em !important; }
Edit
The documentation is no more hosted on the wiki of the project. You can see the same information in the new official documentation page here.
This is now documented at: https://katex.org/docs/font.html
By default, KaTeX math is rendered in a 1.21× larger font than the surrounding context, which makes super- and subscripts easier to read. You can control this using CSS, for example, to set to 1.1×:
.katex { font-size: 1.1em; }
Doc source at: https://github.com/KaTeX/KaTeX/blob/v0.10.2/docs/font.md
Related
In MathJax, I am able to adjust the font size using the answer here (i.e. shown below). Is there a way to adjust the font size of the normal text too without dollar signs around it too? For example, when I type the following: Let $f(x)=x^2$.
The text size around the word "Let" would be small and $f(x)=x^2$ would be much larger. I want to scale the text of the words as well, and I am not sure how to do so.
chtml: {scale: 1.5},
svg: {scale: 1.5},
In regular Latex, you could do Let $f(x)=x^2$.
However remember that, as the name suggests, MathJax doesn't aim to make all of Latex available to the web but focuses on the math part of Latex (and also AsciiMath and MathML of course). A key thing to remember here is that MathJax actually uses the math delimiters to find where there are content to typeset and when you do Let $f(x)=x^2$, MathJax doesn't do anything about the Let since it is outside the math delimiters.
Nonetheless, there are ways to use regular text in Latex math mode too. For example by means of \text{} so in your case, you could accomplish what you want with $\text{Let } f(x)=x^2$
Now, simply setting the text size of the surrounding content will make all of the Latex bigger:
<p style="font-size: 1.5em;">$\text{Let } f(x)=x^2$</p>
<p style="font-size: 2.5em;">$\text{Let } f(x)=x^2$</p>
<p style="font-size: 5em;">$\text{Let } f(x)=x^2$</p>
If you want a bigger horizontal space between the math and the Let, you can add a horizontal spacer:
<p>$\text{Let}\hspace{2mm} f(x)=x^2$</p>
I have prepared a sandbox which you can play around with, also try to uncomment the scale part of the configuration to see this factor in play (however, I usually use font height and not scale to control size): Sandbox
Some things to remember:
Example uses MathJax 3, there might be small differences in comparison to version 2.
Example uses the HTML output processor (as in your example), if you load a different MathJax script, you might be outputting svgs instead and then some options won't have impact, so always check these things thoroughly when something doesn't work.
$...$ is not a standard pair of delimiters so it has to be explicitly configured, otherwise MathJax won't recognize it as inline Latex math.
MathJax automatically does one round of initial typesetting, if you want to update content dynamically, you have to explicitly instruct MathJax to typeset again.
Good luck!
I am trying to place an overarrow over a piece of text in MathJax.
I am using a custom font that I declare in the code-
\(\overrightarrow{\style{font-family: mysans, TeX, Arial, sans-serif;}{\text{" + tString + "}}}\)"
It works ok for most letters- for capital W or M , using a couple in a row like "WWW" the overbar is too short.
For lowercase i , using a couple in a row, ie "iii" it is too long. My hunch is that MathJax is using a standard character width size to figure out the length of the overarrow and when the character is much longer or shorter than that size, it calculates the overarrow incorrectly. Is there any way around this?
Thanks!
First off, you generally cannot use custom fonts with MathJax. As the documentation says
Since browsers do not provide APIs to access font metrics, MathJax has to ship with the necessary font data; this font data is generated during development and cannot be generated on the fly. In addition, most fonts do not cover the relevant characters for mathematical layout. Finally, some fonts (e.g. Cambria Math) store important glyphs outside the Unicode range, making them inaccessible to JavaScript.
However, if you are only looking to use custom fonts in text elements, then there is a way to work around this: style the surrounding context and set mtextFontInherit:true for the output jax, cf. e.g. here for HTML-CSS.
Unfortunately, this won't actually help you right now. There's a minor regression in MathJax 2.5 (see this discussion leading to the result you describe). This will be fixed in 2.5.1 and in the mean time you could set noReflows:false for the HTML-CSS output.
If I add too many/too long captions to a vaadin7 timeline, they will only be displayed partially (i.e. the part we have space for is displayed and the remainder is truncated)
How can I increase this area in order to allocate enough space for all?
timeline.setGraphCaption(container, h.toString());
You need to add these rules in your scss file:
.v-timeline-widget .v-timeline-widget-modelegend{
background: inherit;
}
.v-timeline-widget-legend-label{
height: auto !important;
white-space: normal !important;
}
Before:
After
3 points:
While these rules may not met criteria of well-written CSS or good practice rules (I am looking at you !important), they do the trick. Still, better approach would be to get your hand dirty by editing Vaadin Timeline addon sources.
As you surely noticed text background has changed. That's because we override default background which was designed for only one line (you should provide your own background image)
Bottom of the widget is cut off by few pixels. Well, the only way to fix it is to jump into DOM and css and try fix it. Doable but I haven't tried.
I have a paragraph tag that I defined elsewhere with a line height of 15px, and I have another paragraph tag further down the page where I want to make the line height around 10px. Funny thing is, it won't let me get down to 10px or anything smaller than that, but when I set it to 25px or higher, the line-height property seems to be working.
I checked the relevant CSS (all hand-coded) via the Chrome browser's web developer tools (Chrome's version of Firefox's Firebug) and couldn't find anything relevant. Is there a common CSS bug that prevents me from shrinking the line-height beyond a certain minimum amount?
I've noticed in both Firefox and Chrome that if you set the HTML5 doctype there's a minimum line-height for inline elements. For block elements you can set the line-height to whatever you want, even make the lines overlap.
If you don't set the HTML5 doctype, there's no minimum line-height for either block or inline elements.
I ran into the same issue, worked well with:
.element { display: block; line-height: 1.2; }
After testing this in IE 8-11, Firefox 38.0.1, and Chrome 43, the behavior is the same: inline elements have a minimum line-height that they won't go below. It appears this minimum height comes from the CSS spec:
On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut."
If you want to maintain some benefits of inline elements, you can use display: inline-block. You can also use display: block. Both will allow you to make the line-height whatever you want in all the browsers I tested.
Two related questions for more reading:
why the span's line-height is useless
The browser seems to have a minimum line-height on this block that contains text. Why?
line-height is relative to font-size, you can't go any lower than that unless you declare negative margin.
If the sass file content is
#some-div
color: #333
font-size: 17px // This value actually has some issue on WebKit because it makes
// the label a little off centered, and is better if it is 16px.
// But on IE, the font turns out to be rather ugly, so we would
// use 17px for now since IE has a larger user base
the above will actually fail, because it will complain the indentation is not correct (starting the second line of comments). How might it be solved to have multiple lines like this? Note: It can be made into all indented the same level as the font-size line (and on top of it), but I'd rather not do it like that in this case.
Sass is very indentation-based. As such, there really is no choice but to either
Combine the comment onto the end of the line, which will be huge and unwieldy.
Move the comment above or below your line.
The documentation for the indentation syntax covers comments in this section.
You might find some of the options useful, for example, you only need to have the first line of the comment with slashes, the rest can be indented, which may be more readable for your purposes.
It would look like this then:
#some-div
color: #333
font-size: 17px
// This value actually has some issue on WebKit because it makes
the label a little off centered, and is better if it is 16px.
But on IE, the font turns out to be rather ugly, so we would
use 17px for now since IE has a larger user base.
SCSS is the preferred syntax to use now as all valid CSS is valid SCSS; it also allows for the type of comments you would like (in addition to quite a few very nifty additions such as using &:hover inside of a selector to group your variations on styles more logically).