I am unable to get MathJax to change the font that it is using to render formulas written in AsciiMath. I have read the answers to similar questions here at StackOverflow and other places on the web:
Styling MathJax
Changing mathjax's font size
MathJax font matching and pairing
Can MathJax use font xxxx?
Here is an entire HTML5 document that I am using as a test case:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>MathJax Font</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"CommonHTML" : { preferredFont:"Asana Math" }
});
</script>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_CHTML"></script>
</head>
<body>
<p>`v = pi r^2`</p>
</body>
</html>
What am I doing wrong? Please help me change the font for MathJax.
I found this at docs.mathjax.org/en/latest/output.html
The CommonHTML output processor produces high-quality output in all modern browsers, with results that are consistent across browsers and operating systems. This is MathJax’s primary output mode since MathJax v2.6. Its major advantage is its quality, consistency, and speed as well as support for server-side generation. Its browser supports starts with IE9 and equivalent browsers and it degrades gracefully on older browsers. The CommonHTML output uses web-based fonts so that users don’t have to have math fonts installed on their computers. It currently only supports MathJax’s default TeX fonts.
I had to change my file to use the HTML-CSS output processor instead of the CommonHTML output processor. After the change my test file now looks like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>MathJax Font</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"HTML-CSS" : {
availableFonts : ["STIX"],
preferredFont : "STIX",
webFont : "STIX-Web",
imageFont : null
}
});
</script>
<script type="text/javascript"
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_HTMLorMML"></script>
</head>
<body>
<p>`v = pi r^2`</p>
</body>
</html>
Related
I am trying to recreate a player that is shown here - https://videojs-http-streaming.netlify.app/
As per the docs, here is my HTML. But quality/resolution control is missing
What needs to be changed in this HTML for that quality/resolution picker to render in the player as shown in the demo page.
<html>
<head>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
</head>
<body>
<video-js id=example-video-hls class="vjs-default-skin" controls>
<source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"
type="application/x-mpegURL">
</video-js>
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/videojs-contrib-quality-levels#2.1.0/dist/videojs-contrib-quality-levels.js"></script>
<script>
var player = videojs('example-video-hls');
player.play();
</script>
</body>
</html>
videojs-contrib-quality-levels adds the quality selector API, but does not include a UI component.
That example is using videojs-http-source-selector for the menu.
I want to add a clock icon in the browser tab (🕘) through some html/css code. Not as a favicon, but as 'text'
So for example before the word 'Do' without changing the Stackoverflow favicon
Is this supported by browsers? If yes, how would this look like in code?
Type this into console:
document.getElementsByTagName("title")[0].innerHTML = "🕘"
Its is the <title> element that governs the tab title in browsers.
<!DOCTYPE html>
<html>
<head>
<title>🕘 Title with clock symbol.</title>
</head>
<body>
The content of the document......
</body>
</html>
I have some mathjax enhanced WWW pages on Dropbox (e.g., mathjax_test.html), that are rendered like this
while on localhost they are rendered like this
The code of the page is
<html>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<head>
<title>Test of mathjax</title>
<meta http-equiv="content-type" content="text/html;charset=latin-1"></>
</head>
<body>
We analyze the common case in which the dynamic load can
be expressed by a constant load vector \(\boldsymbol r\)
modulated by an adimensional function of time,
\(f(t)\) (e.g., the seismic excitation can be
described in such terms).
</body>
</html>
Is there something that can be done to have mathjax code rendered correctly when the page is fetched from Dropbox?
The problem is that Dropbox only serves content over https but in your source MathJax.js is loaded via src="http://cdn.mathjax.org/....
Browsers block such http calls (see this SO post), hence MathJax is not loaded and accordingly can't render the page.
(You can open the JavaScript console in the developer tools of your browser to see an error message about this.)
Using ufront and erazor I ran into the following problem very quickly.
The hello-world example provides the following layout:
<!DOCTYPE html>
<html lang="en">
<head>
<title>#title</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
#viewContent
</div>
</body>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"</script>
</html>
For certain pages I want to add more headers or scripts after Jquery has been loaded.
One way to do so (for the scripts for example), would be to pass the scripts as an array of strings, and construct them on the layout file :
...
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"</script>
#for(script in scripts) {
<script src='#script.path'></script>
}
</html>
....
The problem with this approach is that I can't keep meaningful headers + body + scripts on the same template file witch would be great, also needs extra care to pass the scripts and headers as context.
Some template engines like Razor or Laravel allow to do that using 'sections'.
Is it possible to do something similar with erazor? If not what would be a good alternative?
I am new to meteor and I am trying to do multi-page application where http://www.mydomain.com/page1 will result a totally different page from http://www.mydomain.com/page2.
By totally different I mean that I don't want the page to be rendered by the client.
I tried to use meteor-router but What I got is something like:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/myapp.css?9297ad4aa173c4e0c19aebd27c62a5c43242bb93">
<script type="text/javascript">
__meteor_runtime_config__ = {"ROOT_URL":"http://localhost:3000","serverId":"iMp4kgzzeqDtktJoY"};
</script>
<script type="text/javascript" src="/packages/underscore/underscore.js?6d71e6711255f43c0de8090f2c8b9f60534a699b"></script>
<script type="text/javascript" src="/packages/meteor/client_environment.js?07a7cfbe7a2389cf9855c7db833f12202a656c6b"></script>
<script type="text/javascript" src="/packages/meteor/helpers.js?2968aa157e0a16667da224b8aa48edb17fbccf7c"></script>
...
...MANY MANY MANY SCRIPTS.... ?!?
...
...
<script type="text/javascript" src="/myapp.js?2866dcdb5c828b129cdd3b2498a4bf65da9ea43f"></script>
<title>myapp</title>
</head>
<body>
</body>
</html>
And this is not what I want. I want page1 route will return me:
<!DOCTYPE html>
<html>
<head>
My meta tags
</head>
<body>
page1
</body>
</html>
And I want page2 to return different meta tags with different content.
In order to be clear, lets assume that my clients sometime doesn't have javascript. I don't asking about whether meteor is the right framework! I am asking only if can I do this with meteor.
Meteor works a bit different compared to the traditional LAMP stack. Basically it works by patching out the DOM to only where the changes are needed as opposed to re-downloading the whole web page. It makes for a very satisfying end user experience on modern web browsers.
To use meteor router you need to find a spot that you want to patch out with new data for different pages with {{renderPage}}. You can use something like
<head>
<title>xx</title>
</head>
<body>
{{renderPage}}
</body>
<template name="page1">
<h2>Hello!</h2>
</template>
<template name="page2">
<h2>Ola!</h2>
</template>
Now you need to define a router in your client side javascript:
Meteor.Router.add({
'/page1': 'page1',
'/page2': 'page2'
});
So if you load /page1 you would see Hello! and if you load /page2 you would see Ola! as defined in the <template name="page2">..</template>
With the meta tags you need to use javascript to create them. With something like
$('head').append("<meta...");
Again this depends on your preference, personally I find these type of apps load ridiculously fast between web pages as compared to other 'thin' based websites. (Have a look at meteor.com to see how fast you can swap between the pages). The browser does need javascript, however.
Of note is in production mode there will only be 1 script tag.