I am trying to change the style of a mathjax radical sign
and of an exponent. my code is
_stringOfHtml += "\\(^{"+tString+"}\\)"
and
_stringOfHtml += "\\(\\sqrt{"+tString+tString + "}\\)"
When I try to do this:
"\\(^{"+tString+ "}\\{style{font-family:reportschool, TeX, Arial, sans-serif;}\\)";
it does not work- I want to change it inline . Can anyone tell me how to add the style change?
Thanks!
There are a couple of problems you're facing.
the syntax of \style is \style{css}{math}.
You cannot override math font settings this way as MathJax only supports particular fonts, see http://docs.mathjax.org/en/latest/font-support.html for more information. (You could override the font settings for \text{} that way, e.g., \style{font-family: Arial, sans-serif;}{\text{hello}}
Even if you could override the font, your results would likely be bad. Neither Reportschool nor Arial have the necessary glyphs to build stretchy characters such as roots.
\class{css-class-name}{math} is another way of applying custom style
Related
I'm using Wordpress.
Is it possible to set a font-family for RTL text and headers (I'm not using WPML or Polylang, just text aligned to right and written in Arabic), different from the one my theme uses as default? ie. keep the default font of my template for English language, but use a different font for text and headers (h1, h2…) aligned to right (or written in RTL language like Arabic and Hebrew).
How do I do that using my themes's style.css or a custom css?
Thanks.
This is tricky, and it really depends on what exactly you want to achieve and how you do it. You can, however, take advantage of the fact that RTL blocks (and inline text) uses the dir="rtl" property to set a general CSS rule that captures the elements that have those properties.
For example:
<h1 dir="rtl">עברית</h1>
And then add a CSS rule like this:
*[dir="rtl"] {
font-family: serif;
}
This isn't perfect and you might have to have some adjustments, but it could at least do the trick. You need to make sure all of your RTL text is defined with dir="rtl" -- which is a good practice regardless, and what W3C recommendations are.
You can check this jsfiddle as an example (I added colors to the rule to show how it affects the relevant RTL pieces).
I've never become fluent with CSS but I don't think I had this situation before.
I'm thinking of using stylish to add CSS to a third-party site over which I have no direct control. So the HTML and CSS is not really set up for the kind of customizations I want to do.
The site I wish to tweak doesn't allow good control over fonts but some of its pages (user created) make a lot of use of some exotic Unicode ranges (eg. Khmer) that my OS/browser combination choose a terrible font for:
Can I make a CSS rule that will apply to all text in a page that falls within a certain Unicode range to set it to a known good font, without delving into the structure of the page HTML/DOM?
(Or is unicode-range only for doing something different with webfonts?
The answer is yes in most browsers
MDN - Unicode Range
The unicode-range CSS descriptor sets the specific range of characters
to be downloaded from a font defined by #font-face and made available
for use on the current page.
Example:
#font-face {
font-family: 'Ampersand';
src: local('Times New Roman');
unicode-range: U+26;
}
Support: CanIUse.com
Also see this Article
unicode-range(s) can be used to specify which specific set (or range) of characters you want to be downloaded from a font in an attempt to save bandwidth. See here: Mozilla unicode-range info
Without seeing the actual CSS you could attempt to just force a different font to be used completely by doing something such as declaring
body{font-family: arial,sans-serif;}
or adding !important (which I would avoid under any normal circumstance) if the other fonts refuse to give way e.g.
body{font-family: arial,sans-serif !important;}
If you can bypass using the original font faces then the unicode-ranges will cease to be important. Watch out for things like icon-fonts though as removing those may make certain symbols/graphics disappear.
Hope that helps.
Sorry I rather misunderstood your question - thought you wanted rid of the existing unicode fonts altogether.
I have a WordPress blog. I use a wide variety of fonts. Now I want to specify one font - say "Calibri" - and then all the font families for all elements on my sute change to Calibri, overriding the specified CSS.
I know I can do this by going into the stylesheet and manually finding each font family and replacing it. Is there any shortcut to do this?
This isn't really a shortcut, but if you need to force font-family and don't want to remove those currently there:
* { font-family:"Calibri" !important }
This is assuming that you don't use !important for font-family anywhere else, because since * will have lower specificity the line above won't work for that element.
I would avoid overuse of !important rules, definitely restrict it to just this case if you can.
Just delete all the old font-family rules, then add body{font-family:"Calibri"}.
I was reading a book about javascript (Javascript & jQuery: The Missing Manual) and when I tried an example from the book I realized that Firefox does not display the strong tag.
All other browsers (Chrome, Safari) have no problem displaying it.
Searching the css file of the html page I saw that the author has done a css reset (including the strong tag) and then he declared strong like this :
strong {
font-family: 'ColaborateMediumRegular', Arial, sans-serif;
}
Maybe if he had added font-weight: bold; inside the new definition he could overcome this problem.
My question is whether there is a reset file that include all these little missing details and works with all major browsers.
Thank you.
CSS reset snippets are not meant to be used strictly and can be altered to your specific needs.
Just remove the strong selector from the reset definition and the behavior will work as you intended. Or, override the resets' definition with:
strong {
font-family: 'ColaborateMediumRegular', Arial, sans-serif;
font-weight: 700;
}
The description “Firefox does not display the strong tag” was probably meant to say that Firefox renders strong elements in normal font weight, not bold. This is exactly what “css reset” is supposed to do: to reset rendering so that browser defaults are not used, so that author-supplied CSS code can start from a clean board, so to say. The author may wish to render strong elements using a distinctive color or background or some other method(s). Bolding, if desired, would have to be specified explicitly.
Without seeing the specific “css reset” code and the HTML page used it is impossible to say why the reset did not work on some browsers.
It is possible that ColaborateMediumRegular is supposed to refer to an embedded (#font face) font, which looks distinctive enough. Font embedding is known to have browser dependencies.
So, I know that this isn't something that is normally a good idea for a website, but I have a special purpose/intent for such a use:
I have a multilingual dictionary that I'm working with online, where I need one of the languages to be in a specific font, from a file that I specify locally. However, I want this language to be rendered ONLY in this font, as if it is rendered using any other font, it will render incorrectly. That's all fine and dandy, and I can load the file in CSS and whatnot.
But I want to make it so that if it can't load that file, either for one reason or another, or something goes wrong, it can't go to another font. Basically, render this text using this font, and if you can't do that, don't just try and render it with Arial or whatever is the default -- show me blocks, show me a stark something.
I've spent a bit looking around, but am not sure what in CSS I would be using for this. Suggestions/help? Thanks :)
As an update to this question, since April 2013 there exists the Adobe Blank Font, which can be used for that purpose.
You may build a cross-browser css with FontQuirrel WebfontGenerator and the Adobe Blank font files.
If you just need the font in OpenType format you can use this single css file with the already embedded font
You can't do this. Text is text and text has to have a font that it is to be rendered in. If you really want, there's probably some weird JavaScript function that can detect the actual font being used for the text and if it doesn't match the one you want, then you can hide it or something. But in the end, your only option is to have the text displayed in some obscure font, or completely hide the text. If the text is visible, it has to be rendered using some font.
You could also theoretically create your own font where all the characters are just blank, but that seems highly illogical and such a waste of resources to make people download a font just so it can display meaningless emptiness.
There is no "don't render fonts" option. It's a font, it needs to be rendered, or else it's hidden visually in the DOM.
You could use Javascript to find out the font being applied to a certain block, and if it's not the font you want, just hide it. Or display a message.
Another solution is somehow specify the content to be empty. For example, I'm trying to override the +/- character that a Webix tree displays using Font Awesome:
#lhn-tree-container .webix_tree_open:before {
content: '';
}
This only works with the :before and :after pseudo-elements though.