I suceeded to use katex on my blog instead of MathJax. However some of the equations contained greek symbols and Katex does not contain the fonts for rendering the greek characters.
(Matjax is very good at rendering the greek letters)
Are there Katex fonts available to render an equation that contains greek characters? How to use these fonts (how to include them together with the Katex script on my site)?
For example the equation
hν0=hν+Ek+W(1)
(ν is \nu) is rendering good with mathjax but not with Katex.
KaTeX doesn't currently support Greek letters as input, though as the comment says, \nu does work. See this issue for more details: Symbol unicode replacement doesn’t work
Different formulae-rendering js libs behave in one of 3 different ways:
process \pi and tolerate π (MathJax; MathQuill, although the result is somewhat different)
process \pi but don't tolerate π (jsMath, KaTeX)
don't process \pi and tolerate π (jqMath)
Unfortunately, like Ben has answered, KaTeX is not the one that tolerates raw greek characters. However, you may try to do some pre-parsing to "fix" this in a manner like this: before
<script>renderMathInElement(document.body,{delimiters:
[{left: "$", right: "$", display: false}]
});</script>
add some "replace" stuff like desribed here (replace π with \pi and so on), although you should modify replaceTextOnPage function proposed there to replace all greek letters at once rather than launch a copy of replaceTextOnPage many times. You can do some other optimization since the solution there is somewhat general purpose but you know where to expect formulae on you pages.
Related
I'm trying to understand how to implement custom emojis for user input and I can't seem to get a handle on it.
I see that sites like Facebook initially show a list of small .png emoji images, then, once you click the image, it converts it to a Unicode character.
Also, I've been digging through custom emoji packages that use sprite images.
I can't find any material that explains how to utilize a sprite, or a single image, then convert this to Unicode on the fly to be displayed later.
If you can't convert images to Unicode on the fly, how is it that different sites reflect their own custom version of an emoji with a given Unicode character?
I would like to point to the OpenMoji Project for Inquiry:
https://github.com/hfg-gmuend/openmoji
In the data folder you will see neat look up files you can utilize. Basically they save pngs with the name of the choresponding unicode character in their font, more advanced info is in the json:
{
"emoji": "😀",
"hexcode": "1F600",
"group": "smileys-emotion",
"subgroups": "face-smiling",
"annotation": "grinning face",
"tags": "face, grin",
"openmoji_tags": "smile, happy",
"openmoji_author": "Emily Jäger",
"openmoji_date": "2018-04-18",
"skintone": "",
"skintone_combination": "",
"skintone_base_emoji": "",
"skintone_base_hexcode": "",
"unicode": 1,
"order": 1
}
Edit: Sorry, I thought you were interested in how to build lookup table with pngs. My Solution for the problem of adding emoji-fonts to webpage would have been to add a font, but thats not working:
How to use an emoji font on a website?
I dont think there is a "proper" solution to this problem currently.
Edit2:
<!DOCTYPE html>
<head>
<style>
#font-face {
font-family: "OpenMoji Black";
src: url(OpenMoji-Black.ttf) format("truetype");
}
.openmoji {
font-family: "OpenMoji Black", fantasy;
}
</style>
</head>
<body class="openmoji">
<span>Hello World 😅 😇</span>
</body>
</head>
Works sweet with https://github.com/hfg-gmuend/openmoji/blob/master/font/OpenMoji-Black.ttf on Chrome, Firefox and even IE.
Broadly speaking, there are two methods for adding emoji functionality to user inputs:
Unicode characters, which relies on a custom font imported by the developer OR the browser vendors default font, to determine which version of a particular emoji is used. You simply type in the unicode string and the browser inserts a given emoji based on the font. Check out unicode emojis here. and also this post explains more about unicode usage for emojis.
The insertion of images into a rich text editor (RTE). This technique relies on having single emoji images (typically .png) or sprite sheets that the developer can use with the RTE. This article is a great place to start.
The first method can be harder to customize the emoji unless you're into making custom fonts. RTE plugins like TinyMCE are a simple and quick way to tinker with unicode emojis.
The second method becomes a bit more complex, and is used by some of the big players like Facebook and Twitter. As with most things coding, with complexity comes flexibility. This method involves programmatically transposing some plain-text flag such as :smile: into an html element like <img src='smile.png' />. It creates a text area by utilizing the contenteditable div tag. Inside this div, the content is edited programmatically in order to add or remove emoji images, bold/italic letters, etc...
In order to better understand how the second method works, I created react-ez-emoji, which is a lightweight, emoji-enabled contenteditable div that allows you to use any emoji image file you'd like. It would be a good start for anyone looking to study the topic, but I don't recommend it for production.
This article does a good job explaining the limitations of Unicode emojis, and why the second option is more customizable and efficient.
Is it possible to use any fraction symbol on a website, represented as ¼ rather than 1/4 for example?
From what I've gathered, these are the only ones I can use:
½
⅓ ⅔
¼ ¾
Is this right and why is that? The reason why I ask this is because I've done a Google web search and can't seem to locate any others ... eg. 2/4
You can test http://www.mathjax.org/ it is a JavasScript library to make a Math Formula if this is what you want.
The image below displays all unicode-defined fraction symbols. Each of them is treated as one single character. You can use all of them freely, of course, but if you want more, e.g. 123/321, then you should look out for a library that can create fractions dynamically.
An option for doing so would be using LaTeX. There is another question (with very good answers) on how to do this.
Image from http://symbolcodes.tlt.psu.edu/bylanguage/mathchart.html#fractions
As I undserstand HTML5 includes MathML which can represent any fraction you want.
While searching the unicode table I also found these: ⅑ ⅒ ⅕ ⅖ ⅗ ⅘ ⅙ ⅚ ⅛ ⅜ ⅝ ⅞.
A web page is built up with text, and that text is encoded in a certain character set. The character set you select decides on which characters can be displayed. This also means that characters or symbols that don't exist in the character set cannot be displayed.
As shown in Michael's answer, Unicode defines symbols for a number of fractions. These can be displayed without using all kinds of tricks, for example server or client side generated small bitmaps showing the desired fraction, or as indicated by
mohammad mohsenipur a Javascript library that transforms TeX or MathML.
There are several possibilities:
Use special character for fractions. Not possible for 2/4 for example, and problematic in font support for all but the three most common (vulgar) fractions you had found.
Use markup like <sub>2</sub>/<sup>4</sup>. Probably messes up your line spacing, and does not look particularly good.
Construct a fraction using some CSS for positioning and size control and using fraction slash character instead of the common slash. Rather awkward really, I would say.
Use OpenType <code>"frac"</code> feature. Rather limited support in browsers and especially in fonts.
MathJax, e.g. \(\frac{2}{4}\) or some more elaborated TeX code to produce a different style for fraction.
MathML. Verbose, and browser support to MathML inside HTML could be better.
These are explained more and illustrated in my page “Math in HTML (and CSS)”, section Fractions.
The choice thus depends on many factors. It also depends on the font quite a lot. I suggest that you test the different options using the font family declaration you intend to use. Despite the many alternatives, you might end up with using just the simple linear notation like 2/4.
According to this source, we have a neat way to show parallel, not parallel and perpendicular symbols. What I'm looking for though, would be crossed perpendicular symbol, or 'not perpendicular' symbol. I know it's very rare, but usage can be easily justified from math point of view, hence my question.
But it seems like it's not within Unicode character list.
How can I add the symbol and render it with HTML and JavaScript.
(Turning my comment into an answer.)
You can use Unicode's combining characters, e.g:
U+27C2 (PERPENDICULAR) followed by either
U+0338 (COMBINING LONG SOLIDUS OVERLAY):
⟂̸
or U+0337 (COMBINING SHORT SOLIDUS OVERLAY):
⟂̷
Or some other character that you find fitting.
Naturally this will only work with supportive fonts and proper renderers (i.e. browsers in this case), but then again font limitations can always cause problems, with or without combining characters.
$("#status").html('<img src="available.png">Available');
Instead of checkMark picture I want a chekMark character.
Is there a way, please?
You could use U+2713 (Check Mark Symbol ✓):
$("#status").text("\u2713 Available");
Try
$("#status").html('✓');
try either of
✓
✓
one is hex, one is decimal. If I don't put code markers around them, you get
✓ ✓
See this: http://www.danshort.com/HTMLentities/index.php?w=dingb
✓ or ✔
Although I must say that I think a picture is a better option: you can modify it later at any time without changing your code.
Try this:
Decimal:
✓
or
hex:
✓
example: $("#status").html('✓');
You can also use a check mark in a web font.
This question (and the answers) are now five years old. For the sake of those coming from Google, I wanted to add another option that's become available in recent years, but is not mentioned in previous answers.
You can certainly still use unicode characters (.html("✓") or .text("\u2713"), but in the past few years web fonts have become more common. For example, material icons has a check mark:
https://material.io/icons/#ic_check
Google (who made and maintains material icons) also did a good job of explaining web fonts and how to use them here: https://google.github.io/material-design-icons/
Basically web fonts are the best of both worlds: the customization of images and the usage/dynamics of font characters. The advantages to using web fonts over unicode characters are:
control over style (you can make your own web font character of any style, whereas unicode characters are what they are)
use of multiple styles (you can make web fonts with numerous styles of check marks for different situations; you're not locked into one style)
code readability (very few developers will know what \u2713 or ✓ means, but <i class="myfont">check</i> is easy to understand
portability: although every major browser uses a unicode font by default, there are still some computers or devices which may render with a non-unicode font by default. In fact, wikipedia's current list of unicode fonts is decently long, but the supported characters vary widely between each font, and there are clear differences between how the each font is rendered by different platforms. Including a webfont ensures that every user will see the same thing, regardless of platform or default fonts.
More options: having an installed webfont allows you to update the style, add new icons/characters to the font, etc. There is no way to currently do this with unicode.
When we want to give some formatting to code to make it more readable. We can use both Tab and Space (by pressing space bar on keyboard). Many time I give space manually.
I've some confusions
Is there any difference between them?
Is using tab better than spaces?
Does using space increase the size of document and tab not?
Is there any differences between single tab/space and multiple. in terms of page size?
Is there any difference on using tab or space in HTML, CSS and Javascript?
Dreamweaver has this option in preferences
Tabs need less characters and are formatted by users (some display as 2, some as 4 spaces), what can make some code look bad on some other environment.
Spaces consume more KBs but look equal everywhere.
Good editors have retab-functions to convert those.
In JS and CSS it does not matter, HTML should not matter, but can in some cases.
Using tabs is annoying because some editors interpret a tab as 4 spaces, some others as 8 spaces, and some others as 2 spaces, which makes the indentation completely wrong if tabs and spaces are used in the same file.
I always use spaces only to avoid this problem.
It could slightly increase the download size of your pages, but you could also minify the JavaScript and the CSS files, and/or use gzip on-the-fly compression to mitigate this small problem.
Using Tabs :
Tab takes less space
Tab is user system defined :: So in my case if i prefer 2space::tab i can view it that way
Moving one indentation level back is lot easier if you use tabs .
Using Spaces :
Tab space ratio usually defaults to 1:8 . So on all 'newbie' systems your code will be difficult to read . Also if you view your code on github / pastebin there again it will be some what awkward .
My take : Go with tabs for development , find replace '\t' with ' ' [4 spaces] and then for release minify [ this strips tabs and spaces ] .
Personally, I see it as an issue of preference involving ease of formatting. I'd rather use tab, because it's only one click and it simulates 4-5 spaces. A lot simpler in my mind. Otherwise, I don't see much purpose.
In pretty much all cases, you can use tabs or spaces and it won't make a difference. Using tabs will make the source files slightly smaller, while using spaces will ensure that spacing is consistent for everyone (since tabs can have a variable width).
I believe the only language where it actually matters is Python. For any other language, tabs vs. spaces is basically even - just be sure to pick one and be consistent with it.
Using a tab technically takes up less memory than using, say, 5 spaces. So when trying to optimize file size it could be helpful. However minifying text would have a better effect. Look up minifying code for more on this topic.
Some people prefer spaces and some prefer tabs. Its a matter of preference and many folks have different reasons for it. Here is a great article on this point: http://www.jwz.org/doc/tabs-vs-spaces.html
Chances are for your application it wont matter much.
If your code is being downloaded, such as HTML or Javascript or CSS, it makes a difference because the file is larger if spaces are used. How much larger depends on the number of lines and indent levels. It's the same as including comments in the code: they do increase file size.
If your code will be compiled, such as Actionscript or Java or C, or tokenized such as Perl, it makes no difference whether you use spaces or tabs, and you can include as many paragraphs of comments/documentation as you like, because it's only for your own benefit. All those tabs and spaces and comments will be ignored when the final, lower-level code is built.