Hebrew characters not shown on an HTML5 template - javascript

I've been trying to embed some hebrew characters in Thom Sander's free html5 template (download link).
For example, I've tried to change a left-side menu item text to Hebrew, i.e.,
Home Page => עמוד הבית
For some reason the hebrew characters are not shown at all.
When I add hebrew in other places in the document, it is shown correctly. At first I thought this may be an encoding issue but the head encoding seems to be valid: UTF-8. I think there might be some JS code ignoring the Hebrew text, but I'm not sure.
Any ideas?

Seems like someone already found a solution for that. I didn't try to implement the whole solution but tested it with your files and it works.
You can find the solution here
Basicaly you just need to use CufonRTL.js to be able to use Hebrew & Cufon.js together.
You may find CufonRTL.js at the begining of the blog post or just download the file from here
Then you ll have to load CufonRTL.js and execute something like:
CufonRTL.RTL('#menu a');
So the menu links would support Hebrew while using the Cufon library & custom font.

The reason you cannot embed Hebrew characters into your website is beacuse the template is using the cufon technique, which doesn't support right to left languages.
Planned features:
Support for right-to-left and bi-directional text
However, it looks like there is a way around it:
Using Cufon with Right-To-Left Text

Try adding this rule to the CSS
html { unicode-bidi: embed; }
http://www.w3schools.com/jsref/prop_style_unicodebidi.asp
The unicodeBidi property is used with the direction property to set or
return whether the text should be overridden to support multiple
languages in the same document.

Be sure to use:
<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>
Or (as a new HTML5 standard):
<meta charset='utf-8'>
And try adding this property in your CSS:
unicode-bidi: embed;
You can also try to display something, using HTML Entities instead of Unicode characters: ֑ ֒ #1427;

Related

Create a custom unsupported emoji

how can I create a custom emoji using javascript?
I have been asked to remove all the emoji which aren't supported by users device (I think emoji's are dependent on the device even though you are using on a web browser) so I have no way to test it even if I am able to implement it.
I came across this answer which might be helpful: How can I detect rendering support for emoji in JavaScript? but unfortunately my device supports all the emoji.
So I was thinking about other way round? Creating an unsupported emoji but I am not sure how to create an unsupported emoji and how to use it with javscript
I can't remove the emoji file from my device because I have also been asked to write test cases.
An "unsupported emoji" is just an unsupported Unicode character. Emojis are spread through various different blocks in the Unicode standard, they're not contained to a single block.
So just pick a code point that hasn't been assigned a character yet. For instance, the Dogra range (one I picked at random from here) is 0x11800-0x1184F but doesn't currently have a character assigned for 0x1184F, so the JavaScript string "\u{1184F}" should provide an unsupported character:
document.body.textContent = "\u{1184F}";
For me, that shows the usual glyph I get when a character is unsupported.
But beware of the detection technique you linked to. Both Roko's implementation and if-emoji don't work for me on Chrome or Firefox on Linux.
It is hard to create custom emojis. Not just to draw them. It is hard to code them.
Look at this example:
<html>
<head>
<style>
.emojiDiv {
display: flex;
}
</style>
</head>
<body>
<div class="emojiDiv"><p>This is a youtube emoji: </p><img src="https://www.startpage.com/av/proxy-image?piurl=https%3A%2F%2Fwww.logo.wine%2Fa%2Flogo%2FYouTube%2FYouTube-Icon-Full-Color-Logo.wine.svg&sp=1667958250Ta2f2d8d8411fb3044a0837895e548a3b6b4178cdebfc1c9251c5990b5a3eeb80" height="30px"><p> like it? me neither!</p></div>
</body>
</html>
And, This does not give very good results, It is not clean, And the emoji is not aligned very well, Maybe you can possibly use normal emojis? Most emojis are supported on Windows, Apple, Android, MacOS, and Linux,
You can just use normal emojis like this: 🍌, Potassium

How to Tell if Browser Can Display a Unicode Character [duplicate]

I'm working on a music related website, and frequently use the HTML special characters for sharps (♯) and flats(♭) to keep things pretty, e.g.:
♯
♭
However, I've noticed that in some browsers (IE6, Safari for PC) those characters aren't supported. I've created a conditional javascript that serves up plain, supported characters in place of the special ones ( G# for G♯ and Bb for B♭ ). But I'm having a hard time figuring out how to detect which browsers lack those characters.
I know I could test for the browser (e.g. ie6), but I was hoping to do things right and test for character support itself.
Does anyone know of a good way to do this using either javascript, jQuery, or rails? (The page is served by a rails app, so the request object and any other Rails magic is on the the table.
If you create two SPANs, one containing the character you want, and the other containing an unprintable character U+FFFD (�) is a good one, then you can test whether they have the same width.
<div style="visibility:hidden">
<span id="char-to-check">♯</span>
<span id="not-renderable">�</span>
</div>
<script>
alert(document.getElementById('char-to-check').offsetWidth ===
document.getElementById('not-renderable').offsetWidth
? 'not supported' : 'supported');
</script>
You should make sure that the DIV is not styled using a fixed font.
"Browser support" is not the problem here. You should be serving your files as UTF-8*, and use the appropriate characters rather than the HTML entities.
Unicode sharp symbol: ♯ (U+266F)
Unicode flat symbol: ♭ (U+266D)
You should also make sure to save your files in UTF-8 (and not, say, ASCII or ISO-8859-1).
See also: the must-be-mentioned Joel on Software: The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!).
*I'm not a Rails guy, but I think it does this by default.
Rather than mucking around with JavaScript, what you should be doing instead is using css's unicode-range:
#font-face {
font-family: 'MyWebFont'; /* Define the custom font name */
src: local("Segoe UI Symbol"),
local("Symbola"),
url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff'); /* Define where the font can be downloaded */
unicode-range: U+266F, U+266D; /* Define the available characters */
}
body {
font-family: 'MyWebFont', Arial;
}
♯
♭
Normal text
In the local blocks, define fonts that people might have installed locally and contain the symbols you want (like Window's Segoe UI Symbol). Then define a web font (I suggest Symbola) containing the symbol you want to show.
The unicode-range directive tells supporting browsers (IE9 and up) not to download the font unless the specified symbols are present on the page (You can find their unicode number by searching Unicode-Tables.)
If they have the font already, they won't download it. If the symbol(s) aren't present on the page and your browser isn't older than dirt, the font won't be downloaded. It'll only be downloaded when it is needed.
(If you still want to support old IE, use fontsquirrel to generate your initial #font-face statement, then add the local and unicode-range parts yourself.
Add this to your HTML
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
And check to see if IE and Safari render the page right.

jQuery/javascript not working on all pages

So I'm doodling with a little site with some html/css/javascript experiments so I can learn to be a better web-programmer. I am really a designer, and total n00b at this.
Problem:
I have some javaScript running on multiple pages at my site, and they are – as per usual – in a seperate .js-file. However it only seems to be working on this page:
http://www.carlpapworth.com/htmlove/colors.html
And not on these:
http://www.carlpapworth.com/htmlove/arrows.html
http://www.carlpapworth.com/htmlove/fumbling.html
U see, the big splash with the heart is suposed to be hidden by this function:
$(document).ready(function() {
$('#reward').hide();
$('#goal a').click(function(){
$('#reward').fadeIn(1000);
});
$('.exit').click(function(){
$('#collection1').css('color', '#ff63ff');
});
});
To me, the "Head"-code in all these pages looks exactly the same, so I can't figure out the problem.
Please help!
SOLVED! It was the encoding, that was set to UTF-16! So I just changed it as Jezen Thomas said in Coda! Thanks a million!
This was an interesting question. I tried copying your site to my machine and testing locally, and everything worked just fine. However, I believe I've discovered the source of the problem.
http://validator.w3.org/i18n-checker/check?uri=www.carlpapworth.com%2Fhtmlove%2Ffumbling.html#validate-by-uri+
You're trying to force UTF-8 with your meta tag, <meta charset='UTF-8' />. However, the w3 i18n validator detected that your file also contains a UTF-16LE Byte-Order Mark (BOM).
The w3 has this to say on removing the BOM:
If you have an editor which shows the characters that make up the
UTF-8 signature you may be able to delete them by hand. Chances are,
however, that the BOM is there in the first place because you didn't
see it.
Check whether your editor allows you to specify whether a UTF-8
signature is added or kept during a save. Such an editor provides a
way of removing the signature by simply reading the file in then
saving it out again. For example, if Dreamweaver detects a BOM the
Save As dialogue box will have a check mark alongside the text
"Include Unicode Signature (BOM)". Just uncheck the box and save.
I'm not sure if it'll fix the problem in your case, but I don't like the fact that you've used HTML comments before your doctype declaration. Please move <!DOCTYPE html> to the top of the file. Also, in Coda, go to Text > Encoding and verify that UTF-8 is selected. If you can, show the invisible characters and remove anything that looks suspect.
As Jezen Thomas suggested, it may be an encoding issue. Try re-saving the file as UTF-8.
Check out this topic on SO for more details.

Title UTF-8 on HTML

I'm having a problem with UTF-8 character on the page title,
I want to add this on the title of the page --> ♫ <--- (the Music symbol)
The thing is, sometimes it works (on Google Chrome) and sometimes it doesn't (when it doesn't work, it appears a square that is supposed to be an error of encoding) weirdly.
And in firefox, it always work when you look to the title in the top of the window (the title that appears up in your page) but the title that appears in the bar below appears the square thing again. :/
What do I do to fix this?
I'm defining the title via Javascript by a js file which I'm using PHP to define it utf-8 as well.
var title = "♫ My Music";
document.title = title;
by the way, it seems to work always on Linux, but on Windows, it does those stuff. =/
Thanks in advance.
This is a font problem rather than an encoding problem; a small rectangle in place of a character typically means that the character is not present in the font(s) used.
Browsers typically use some specific fonts when they render title element contents (somewhere outside the page itself). These fonts may depend on the settings in the operating systems. On Windows 7 for example, the default for them is 9pt Segoe UI, a relatively rich font, whereas older systems have more limited fonts. Anyway, that’s outside an author’s hands.
So the conclusion is that special symbols should be avoided in title elements. Their rendering is not guaranteed, and they probably have no value as far as search engines are considered.
Have you added the meta tag for charset to your HTML?
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
sometimes it works (on Google Chrome) and sometimes it doesn't (when it doesn't work, it appears a square that is supposed to be an error of encoding) weirdly
This is most likely down to the font used by your browser, and your Operating System. If the character is defined in the font, it will show up. If it isn't, it won't.
There isn't much you can do about this, unfortunately - both these things are outside of your control.
Somewhat related: Unicode support in Web standard fonts
I resolve this problem (year in Spanish) with this notation:
title="A & # 241 ; o"
IMPORTANT: I insert blanks spaces between characters for adequate renderization.

Detect browser character support in javascript?

I'm working on a music related website, and frequently use the HTML special characters for sharps (♯) and flats(♭) to keep things pretty, e.g.:
♯
♭
However, I've noticed that in some browsers (IE6, Safari for PC) those characters aren't supported. I've created a conditional javascript that serves up plain, supported characters in place of the special ones ( G# for G♯ and Bb for B♭ ). But I'm having a hard time figuring out how to detect which browsers lack those characters.
I know I could test for the browser (e.g. ie6), but I was hoping to do things right and test for character support itself.
Does anyone know of a good way to do this using either javascript, jQuery, or rails? (The page is served by a rails app, so the request object and any other Rails magic is on the the table.
If you create two SPANs, one containing the character you want, and the other containing an unprintable character U+FFFD (�) is a good one, then you can test whether they have the same width.
<div style="visibility:hidden">
<span id="char-to-check">♯</span>
<span id="not-renderable">�</span>
</div>
<script>
alert(document.getElementById('char-to-check').offsetWidth ===
document.getElementById('not-renderable').offsetWidth
? 'not supported' : 'supported');
</script>
You should make sure that the DIV is not styled using a fixed font.
"Browser support" is not the problem here. You should be serving your files as UTF-8*, and use the appropriate characters rather than the HTML entities.
Unicode sharp symbol: ♯ (U+266F)
Unicode flat symbol: ♭ (U+266D)
You should also make sure to save your files in UTF-8 (and not, say, ASCII or ISO-8859-1).
See also: the must-be-mentioned Joel on Software: The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!).
*I'm not a Rails guy, but I think it does this by default.
Rather than mucking around with JavaScript, what you should be doing instead is using css's unicode-range:
#font-face {
font-family: 'MyWebFont'; /* Define the custom font name */
src: local("Segoe UI Symbol"),
local("Symbola"),
url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff'); /* Define where the font can be downloaded */
unicode-range: U+266F, U+266D; /* Define the available characters */
}
body {
font-family: 'MyWebFont', Arial;
}
♯
♭
Normal text
In the local blocks, define fonts that people might have installed locally and contain the symbols you want (like Window's Segoe UI Symbol). Then define a web font (I suggest Symbola) containing the symbol you want to show.
The unicode-range directive tells supporting browsers (IE9 and up) not to download the font unless the specified symbols are present on the page (You can find their unicode number by searching Unicode-Tables.)
If they have the font already, they won't download it. If the symbol(s) aren't present on the page and your browser isn't older than dirt, the font won't be downloaded. It'll only be downloaded when it is needed.
(If you still want to support old IE, use fontsquirrel to generate your initial #font-face statement, then add the local and unicode-range parts yourself.
Add this to your HTML
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
And check to see if IE and Safari render the page right.

Categories