I'm converting from R bookdown to Jupyter-books and I have a constant struggle to try to replicate the css that I have used into this project. For example, I prefer serif fonts for easy long-form reading of a textbook and I can make that happen with my own css inside of _static and here's what I use (which is identical to my bookdown text):
p { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #0;
font-weight: 500;
font-size: 1.4rem;
line-height: 1.8rem;
margin-top: 1.4rem;
margin-bottom: 1.4rem;
padding-right: 0;
vertical-align: baseline;
}
But. When I do this, the mathematics that's rendered by MathJax is tiny...appropriate to the default formatting of the stock san-serif git-looking css for body the body font.
--> This is only wrong for display math: $$....$$ or $$\begin{align}...\end{align}$$. In-line mathematics is properly formatted with the body.
How can I adjust this so that the math rendering is the same size as my body-text rendering?
I'm actually not sure that css is the proper way to mess with MathJax...I suspect it has to be done in the original which I have no idea how to modify it properly in Jupyter-books. The js in the bookdown html is quite extensive.
Well, it's been ~6 months since your post, but I encountered something similar today, found your post, and wanted to share an answer. I'm sure it's not the only answer, or best for that matter, but it worked.
Jupyterbook is a distribution of sphinx that uses mathjax javascript engine. You can edit the 'look and feel' of the rendered tex in your _config.yml file like follows:
sphinx:
config:
mathjax_config:
"HTML-CSS": {
matchFontHeight: true,
scale: 80
}
The output seems to be controlled by the "HTML-CSS" field. Check the link for a complete list of things you can edit.
Good luck!
Related
_ I've just started a bootstrap project - completely new to bootstrap until a few days ago.
I've a large H1 Piece of text (overly large for the aesthetic I'm going for). I've not yet fully worked out how to change the global h1 so it over rides the bootstrap so I'm used the following which works just as I wanted (heavy font-weight and change of colour):
#index h1 {
color:rgb(108, 170, 179);
font-size: 150px;
font-weight: 900;
}
And I'm using this in CSS to overwrite the font-family (which, again, works well):
* {
font-family: 'Montserrat', sans-serif;
}
However, the '#media only' isn't picking this up (as I'm not sure how to tell it to).
The h1, h2 et are responsive (if I take out the #index h1 code).
This H1 is sat in a 'jumbtron' box btw (again, just for aesthetics) but not sure if that's relevant to this issue.
This is for a very simple starter project so at this stage I don't want to over complicate (this will literally be a simple form with a couple of rows, columns and buttons - no JS added at this stage - for a course, so time limitations on anything more grand).
I've attached a screenshot of the 'header style' (the jumbotron - akin to a header but works for me at the moment - next step is to get that tick logo to the right of the 'TASQ' H1 text.
Apologies if I've missed any info out folks
Many thanks.
I am trying to see if there is a way to conditionals a variable in my scss. The scenario being for a fallback font loader throwing a class on my body when all fonts are loaded - so I could switch out fonts.
So the idea is I have my _variables.scss file set up, and inside it has all my site fonts looking something like this -
$primary-font-family: 'Font1', sans-serif;
$primary-font-normal: 400;
$primary-font-bold: 700;
$secondary-font-family: 'Font2', serif;
$secondary-font-normal: normal;
$secondary-font-bold: normal;
This has been working great for me, but I am looking for an easy way to swap them out without added class listeners in the css to every instance where I am consuming these fonts. So I was wondering if there might be a way to conditionalize these variables -
// if .fonts-loaded class is on body, use loaded font
$primary-font-family: 'Font1', sans-serif;
// else use system default font
$primary-font-family: 'defaultSystemFont', sans-serif;
Unsure if something like this would be possible, does anyone know of a way to achieve this. Thanks for reading!
Sass would never know if something was loaded on the page like JS would.
Once it compiles, Sass becomes static CSS and doesn't necessarily communicate according to changes made on the page (beyond knowing it should style things a certain way according to a pre-defined pseudo-class.)
Also, the more we keep telling a page to "think more" - the less it benefits in terms of loading time.
Since CSS is "cascading", you can always set a default font stack such as:
.stuff {color: #333; font-family: Arial, Helvetica, sans-serif; font-size: 1em;}
...and then, lower in the CSS (possibly within a partial that's imported after the global layout, as part of the theme):
.stuff {font-family: "SuperSpecialFont";}
It will then load, as it's read, setting the default foundation and then progressively enhancing it. Sass won't ever be aware of a page's loading status, however, it will deliver style based on what's available and when - which allows you to have a fallback until everything it's supposed to present is in place.
===
According to your comment, there doesn't seem to be a reason for a conditional in this case.
Fundamental CSS would handle it with .thisClass .thatClass or .thisClass > .thatClass - depending on how strict you want to be. So, for example, in Sass:
.thatClass {
color: #333;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
}
.thisClass {
.thatClass {
font-family: 'SuperSpecialFont';
}
}
If it's nested inside of .thisClass, then it will apply those properties. If not, it will stay as it was originally defined.
I realize this sounds absurd, but I'm unable to change the font-family for an input type=submit button.
I've tried referencing it by id and input[type=submit], adding a !important tag in the css, and changing it in the dev tools, but nothing works. However, other css attributes are working (such as width, margins, etc).
Is there a css solution I'm overlooking here or should I change paths and style through jquery?
codepen:
http://codepen.io/blakeface/pen/mEJWQj?editors=1100
#submit-button {
font-family: cursive;
font-size: 10em;
margin-top: 30px;
}
Similar question:
Input password font -family
Perhaps you are looking for something more like this?
font-family: Vivaldi;
The 'cursive' font family for HTML/CSS isn't like conventional cursive handwriting. Your code works and displays 'cursive' font.
I have a general style sheet (general.css) that spans across each page of my site, and more specific style sheets that apply to certain pages. I'd like to take one of the selectors from general.css and embed it into the selectors of my specific sheets.
For example:
(From general.css)
.PrimaryFont {
font-family:"Palatino Linotype", "Book Antiqua", serif;
text-transform: uppercase;
font-weight: normal;
}
(From specific.css)
h1 {
.PrimaryFont;
font-size: 18pt;
}
This way, I won't have to mark up my html to death, and, if I choose to change the Primary Font, I will only have to do so in one spot.
I know LESS lets you embed, but since I'm new to CSS I was hoping there was some magical way a third party wasn't necessary.
Thanks!
Nope. CSS doesn't allow for mixins. You need to use something like LESS/SASS or some other CSS meta framework
The best way to do in plain CSS would be just adding extra classes to elements, but as well as being messy that can quickly get excessive. I would really recommend trying out LESS - it is amazingly good to use.
I have the following CSS fragment:
INPUT{ font-family: Raavi; font-size: 14px;}
Which works fine when the textbox contains some Punjabi script like this: ਪੰਜਾਬੀ
But the user might enter English instead, and I would rather use the Verdana font with a different size, since the English letters in the Raavi font are real funky and the size is wrong.
So my question could be stated as:
Is there any type of conditional font-family and size selection within CSS based on the input
Is there anyway for CSS to know about the input language?
So I could create the following PSEUDO_CSS:
INPUT{ EN-font-family: Verdana; EN-font-size: 12px; PA-font-family; Raavi; EN-font-size: 14px;}
or
INPUT.EN{ font-family: Verdana; font-size: 12px;}
INPUT.PA{ font-family: Raavi; font-size: 14px;}
This is addressed in CSS3, and that's not going to help for compatibility with old browsers, but it works for me when mixing Greek and Latin text with different fonts for each. Here's an example taken from the CSS Fonts Module Working Draft:
#font-face {
font-family: BBCBengali;
src: url(fonts/BBCBengali.ttf) format("opentype");
unicode-range: U+00-FF, U+980-9FF;
}
The unicode-range bit is the magic key: that tells the browser to use this font-face statement only for this particular block of Unicode characters. If the browser finds characters in that range, it uses this font; for characters outside that range, it falls back to the next most specific CSS statement following the usual pattern of defaulting.
input { font-family: Verdana, Raavi, sans-serif; font-size: 14px;}
This should work for your purposes:
If the text is English, both fonts should contain the glyphs, and Verdana will be preferred
If the text is Punjabi, Verdana should not contain the glyphs, so the browser should fall back to Raavi
I'm not positive if all browsers will behave correctly, but that's what they should do according to the CSS spec.
A pure CSS solution might be as easy as:
input[lang=en] {
font-family:Verdana;
font-size:12px;
}
input[lang=pa] {
font-family:Raavi;
font-size:14px;
}
But it's still up to you to set the lang attribute of the input element.
Unfortunately, as with most fancy CSS features, attribute selectors are not 100% working across the array of browsers today. Your best bet in my opinion is to use a class per language and assign it to the input element.
Update:
Per your request, here's an example of a naive way to do it with vanilla JavaScript. There are certainly improvements to be made, but this "works".
<style type="text/css">
.lang-en {
font-family:Verdana;
font-size:12px;
}
.lang-pa {
font-family:Raavi;
font-size:14px;
}
</style>
<form>
<input type="text" onkeyup="assignLanguage(this);" />
</form>
<script type="text/javascript">
function assignLanguage(inputElement) {
var firstGlyph = inputElement.value.charCodeAt(0);
if((firstGlyph >= 65 && firstGlyph <= 90) || (firstGlyph >= 97 && firstGlyph <= 122)) {
inputElement.setAttribute('lang', 'en');
inputElement.setAttribute('xml:lang', 'en');
inputElement.setAttribute('class', 'lang-en');
} else {
inputElement.setAttribute('lang', 'pa');
inputElement.setAttribute('xml:lang', 'pa');
inputElement.setAttribute('class', 'lang-pa');
}
}
</script>
This example fires after a character has been typed. It then checks if it falls between a range considered "English" and assigns attributes accordingly. It sets the lang, xml:lang, and class attributes.
In your html tag you have that lang property.(just lang='en' or lang='en-EN')
We can use this in CSS.
If we want to give particular CSS for p tag for different language,
p:lang(en-EN){
}
The respective style we need to add.
This is the way that we can give particular css for different languages.
example
html{font-family: Raavi; font-size: 14px;}
html:lang(en-EN){font-family: Verdana; font-size: 12px;}
It is common practice when maintaining multi-lingual websites to use separate CSS files for each language. This is desirable because you will need to adjust more than the font. You will often need to adjust spacing to match the length of strings in the language. Also, you may need to adjust some of the basic formatting of the page in order to make it more natural to users of the language.
The robust answer is to internationalize and not to just settle for a different font because eventually you will find that font selection will be insufficient.
How could CSS know about the input language?
I'm afraid the only solution is to find a unicode font which looks pretty for both character sets. Which is far from perfect if your remote reader has not installed it. Maybe Arial Unicode MS.
The only reliable solution for now is to list the fonts in the desired order, as Miles indicated.
Hopefully the (correct) solution indicated by Zack might be properly supported by more browsers.
But even then it will be your responsibility to tag the various sections with the proper lang attribute.
Nothing can reliably detect the language of any text.