Using unicode characters in html page (Armenian translation) - html

I have a page where the content is in Armenian.
My question is, What steps do I need to take in order for the symbols to display correctly?
Currently, something like
"Պատվերների համար կարող եք զանգահարել"
produces
"ÕŠÕ¡Õ¿Õ¾Õ¥Ö€Õ¶Õ¥Ö€Õ« Õ°Õ¡Õ´Õ¡Ö€ Õ¯Õ¡Ö€Õ¸Õ² Õ¥Ö„ Õ¦Õ¡Õ¶Õ£Õ¡Õ°Õ¡Ö€Õ¥Õ¬".
As it stands right now, my page is pure HTML but I will be incorporating features built on Ruby/Rails and will also be translating that content in Armenian.
I have been reading about Rails Internationalization, but have never used it nor am I sure if that is the best/easiest option?

In my case works fine. Or you can use online converters to convert Armenian symbols to Unicode (in case of ANSI).

Should be working by adding <meta charset="UTF-8"> to the <head> of your HTML File and by using a font that supports Armenian Characters.
If you want to use a Webfont for this, for example Noto Sans from Google Webfonts should do the job.
Use this in your CSS
#import url(http://fonts.googleapis.com/earlyaccess/notosansarmenian.css);
body {
font-family: 'Noto Sans Armenian', serif;
}
Found here: https://www.google.com/fonts/earlyaccess

At first use "Brackets", then
<html>
<head>
<meta charset="UTF-8">
<title> Ինչ-որ կոդ </title>
</head>
<body>
Պատվերների համար կարող եք զանգահարել
</body>
</html>

Related

How to write color Unicode emoji in the IE

I want to write colored Unicode emoji in IE.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
😺😸😹😻😼😽🙀😿😾
</body>
</html>
If I run the code above on chrome and edge, it comes out as a colored cat face emoticon.
But in IE, the emoticons come out all monochrome as below picture.
How to use color Unicode emoji in the IE browser?
I'm very sorry for the basic question.
But I didn't know which keyword to search for it.
Thank you for reading the questions and I hope you have a good day.
Actually, I strongly suggest leaving IE alone, since there is no propper support on it anymore. But if you insist on doing this on IE, Microsoft provided a way to deal with this issue. It may seem tricky but AFAIK, it is the only way to make the emojis work as expected. So apparently, Microsoft polished emoji live in a specific system font named Segoe UI Emoji. In order to use it, you just have to define a class or something and then assign it to your specific elements with emojis.
So Your final code should be something like this:
.emoji {
font-family: "Segoe UI Emoji";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<span class="emoji">😺😸😹😻😼😽🙀😿😾</span>
</body>
</html>
NOTE: As #mplungjan told us in comments if you want to be more precise with cross browsing functionality you can use below one instead:
.emoji {
font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol;
}

HTML how to get it to display čšž on your site

Trying to learn to make a site. And right from the start:
How do I get HTML to display ščž and other various special characters like ł,ß,ö..?
You need to specify a character set so the browser knows what's being used in the page. For example, in your head section, try putting:-
<meta charset="UTF-8">
You can also try specifying symbols using their entity name/code, using the character reference table here - https://dev.w3.org/html5/html-author/charref
Here's an HTML5 example. meta declares the encoding of the HTML file. Make sure to save the file in that encoding!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>How do I get HTML to display ščž and other various special characters like ł,ß,ö,&#x9A6C..?</body>
</html>
You can enter any character you know the Unicode codepoint using &#xnnnn syntax. In the example above, U+9A6C is the Chinese character for horse(马).

How to correctly use Ubuntu font

I tried to use the Ubuntu font in my page by adding a link:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
Here is the CSS:
body{
font-family : Ubuntu;
}
It works but sometimes the font can't recognize slovak characters like "č, ž". These are a different font (not Ubuntu). For example in a mobile sized screen (when I push ctrl+shift+m in firefox = mobile view).
Do you know what the problem is?
I don't know about the slovak font showing it correctly. Maybe you need to add latin-ext (You need to check the latin-ext to see if it supports Slovak characters. But if you are getting wrong characters on different browsers, it is because you didn't explicitly set the charset. Add the following line to the header:
<meta charset="utf-8">
This will force the browser to show the website in UTF-8, which will fix your problem.
Note that the link to the font says "subset=Latin". This is usually sufficient for ASCII-only text; for characters with diacritics, you need latin-ext, which means "extended Latin characters." This set should cover pretty much all characters used in European, Latin-script using languages (not Cyrillic, obviously).
This is configurable in the "character set" tab in Google's font picker.
I apologize, the code for importing external provider:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
In case the viewers of the site doesn't have the Ubuntu font in their devices please add this code:
Importing from external Provider:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
Then, add Ubuntu to your font family list:
body { font-family: Ubuntu, "Times new roman", Arial, San-serif, Ubuntu; }
Hope this helps.

External CSS not working

I need help again. I'm watching some tutorials, and I have an easy code that works fine with internal CSS, but I doesn't with external CSS. I think I'm doing everything right, since I don't change a single word of the code, excep for the external css reference. Any ideas why is it not working? Thanks for your answers! (By the way, I read all the post relationed with my problem, but nothing work out.) Here's the code:
div.box
{
width:320px;
padding:10px;
border:10px solid green;
margin:0px;
font-family: Arial, Helvetica, Sans-Serif;
font-weight: bold;
font-size: large;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="new 1.css">
</head>
<body>
<div class="box">This text in a box example uses css.<br /><b>Note:</b> there is a
DOCTYPE declaration (above the html element), so it displays correctly in all browsers.
</div>
</body>
</html>
It work out here! It is driving me insane. I tried it in Notepepad++, Brackets, and text editors. I really can't figure out what's happening.
You can't have spaces in a URL, try changing the space to its ASCII character: %20 so it would look like this:
<link rel="stylesheet" type="text/css" href="new%201.css">
Or what I would normally do is use proper file naming conventions, either camel case (every word [ besides the first one] starts with an upper case letter) or use underscores between the names.
I had the exact same problem a few days ago. (And I had no spaces in my file name..)
As soon as I outsourced my CSS code in an external file, the exact same problem came across.
For me the problem was in the encoding.
For those who have this problem too: Just switch the file encoding to UTF-8 . (I used Notepad++)
Maybe you have to add to your html file:
<meta charset="UTF-8">
And then it should finally work.
see more here: http://www.w3schools.com/html/html_charset.asp
Change encoding of the css file to utf-8 using simple notepad.
Open css file by notepad, save as then choose utf-8 from encoding tab then save.
Remember to check that there is no inline style.
So, an inline style has the highest priority, and will override external and internal styles and browser defaults.
I had this problem too. But I understood that my wrong is here: when I was writing HTML file, I changed the direction of this file to a folder and created a CSS file next to it.
So my path for CSS file became wrong. Now I recommend to first close your editor of HTML or CSS, after choosing your direction of these files, then open your editor and write your code.

How to fix the font issue in HTML?

I have Html (hello.html) like bellow
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test</title>
</head>
<body>
<div>
¿Hola cómo está?
</div>
</body>
</html>
It shows out as "¿Hola cómo está?" when run in browser
Is there any solution to get correct out put without altering the
hello.html file?
I hope that, it is in Spanish language but i looking for any other solution like as change the encode type or font in browser or editor.
Edit: Just noticed the requirement. But some Spanish characters require Unicode and you have to declare that in your html file.
Put this in your head.
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
I don't see whats wrong, if you are refering to the font type in the html and the webpage is different is because of your editor, if you really want to change the font you will need to set the font tag around your text or even better define it in the CSS
Based on the clarification in the comment section to your question....
If you are using Google Chrome, and your computer is set to an English locale, load the page, then right click on the body, and select "Translate to English."
Sounds like an interview trick question, rather than a programming one.
No.
You cannot do this without altering the html file.
Place this <meta> tag in your Head Section
<meta charset="UTF-8">