I have a problem with showing a value from mysql database. So value is saved as UTF-8 in the mysql database ( correctly ) , I am retrieving a JSON formated data to javascript (correctly) and then when I print the result in the javascript I don't see right signs as I am using Croatian alphabet.
I have put this in the head section:
<meta name="http-equiv" content="Content-type: text/html; charset=UTF-8"/>
and in the script section:
<script type="text/javascript" charset="utf-8">
What can I do next?
The character encoding has to be set on the real HTTP response Content-Type header, not alone on the meta tag. The meta tag is ignored when the HTML output is retrieved by a HTTP request. In webbrowser's developer toolset as you can get by pressing F12 in Chrome/IE9/Firebug, you must be able to explore the HTTP response headers like below:
Based on the comments you're apparently using PHP to produce HTML output to the HTTP response. You should then be using its header() function to set the proper response header. Add the following line to your PHP script before any character is been written to the response.
header("Content-Type: text/html;charset=UTF-8");
See also:
PHP UTF-8 cheatsheet
Related
EDIT: Following an exchange with guest271314, I realized that the wording of the questions (in the body of my question) may be misleading. I kept the old version stroked out and better reworded a new version
Background: When getting JSON from remote servers, the response headers include a Content-Type: application/json entry which suggests to the browser to render the content as JSON. This enables Chrome extensions or native Firefox functionalities to format the output:
My problem: I would like to get the same rendering (done by the browser) with JavaScript-provided JSON, by first fetching the content, and then pushing it into the DOM. This does not work, I can only get a JSON string, rendered as a string. the JSON is rendered as a string, and not formatted by the browser.
My thoughts so far: it looks like I fail to
output the JSON as a string without delimiters
inform the browser that the content is JSON
The code I tried is the following:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- here I am trying to simulate the response headers so that the
browser is hinted of the content type -->
<meta http-equiv="content-type" content="application/json; charset=UTF-8"/>
</head>
<body>
<div id='root'></div>
<script>
fetch('https://httpbin.org/get')
.then(function (r) {
if (r.ok) {
return r.json()
}
throw new Error('response was not ok: ' + r.statusText)
})
.then(function (text) {
// here I am stringyfying the JSON Object and replacing a DOM
// element with it (including the delimiters). The string is
// unfortunately quote-delimited
document.getElementById('root').outerHTML = JSON.stringify(text)
})
.catch(function (err) {
console.log(err)
})
</script>
</body>
</html>
The effect on the same source:
Is it possible to achieve from JS the same effect as querying the source directly in the browser? to have JavaScript-generated JSON being pretty-rendered by the browser own mechanisms (built-in or via an extension)?
Well, your browser extension cannot catch this. And I do not see any option. Headers are already sent, when the JavaScript has been executed, so I guess, your Extension is out of the game.
The stringify() function by the way works fine. What you want is a human readable output.
Have you thought of JavaScript code highlighters like
https://highlightjs.org/
http://prismjs.com/
There should be one that supports JSON rendering like your browser extension.
The problem is that your document is displayed as text/html while httpbin.org/get has application/json as document-type. You already used
<meta http-equiv="content-type" content="application/json; charset=UTF-8"/>
but if you right click the page in firefox (chrome apparently does not have this option) and select view pageinformation (or something like that), the type is still text/html although the header in dev tool already shows content-type: application/json. Also, when you take a look at the Response in dev tools, your response is a html file while the response from httpbin.org/get is plain json with no body tag etc.
So I've tried to replace the whole html content with the json content:
document.documentElement.outerHTML = JSON.stringify(text)
// or
document.documentElement.outerHTML.replace(JSON.stringify(text))
But the first gives an error (Modifications are not allowed for this document). The second just replaces the whole content of <body></body> with the JSON data. But it still does not work. So unless you don't use a backend server that just retruns the JSON once the site is called, it won't be possible to use the browsers JSON viewer.
Another option would be to redirect:
window.location = "https://httpbin.org/get";
If gather Question correctly you can use <pre> element to render JSON and use third parameter of JSON.stringify() for indentation
<pre id='root'></pre>
document.getElementById('root').textContent = JSON.stringify(text, null, 4)
Serving JSON is done on the server side, not the the client side.
A HTML header of Content-Type: application/json does need to be sent along with the response but no HTML can be present in the response body.
I suggest looking into NodeJS and the Express library to get started building a server side javascript application.
I tried charset UTF-8 to display the ä, it displayed some square box.
Also i tried with charset ISO-8859-1 to display the ä, it diplayed as ä. (which is correct)
But When combine the above both charset within javascript condition, its not working properly. Refer below code,
<html>
<head>
<script type="text/javascript">
var lang = 'German';
function f(){
if(lang != 'SomeOtherLanguage'){
//here code will execute. And page should display square box. Instead of square box, ä is displayed. Which is wrong. I cant able to find reason.
metaTag = '<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>';
}
else
metaTag = '<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"/>';
document.getElementsByTagName('head')[0].innerHTML += metaTag;
}
</script>
</head>
<body onload="f()">
<h1>Latin letter : ä </h1> <br />
</body>
</html>
You can't, the character set is established by the parser, which needs to parse Javascript in order to generate that meta DOM.
You still can use only one character set and convert the data.
What you are attempting to do will never work.
If the raw bytes of your HTML are not encoded as UTF-8 to begin with, you can't claim UTF-8, in a <meta> tag, or an HTTP Content-Type header. You would be lying to the browser/client, and is why you get bad results.
Your code will "work" only when your <meta> tag claims ISO-8859-1 (and there is no Content-Type header to override that) if your HTML is actually encoded in ISO-8859-1. In several (but not all) of the ISO-8859-X charsets, including ISO-8859-1, ä is encoded as byte 0xE4, so your code "works" when claiming ISO-8859-1 if byte 0x34 is present in the HTML's raw data.
In UTF-8, ä is encoded as bytes 0xC3 0xA4 instead. If your HTML contains byte 0xE4, but you claim UTF-8, you get bad results (0xE4 is not a valid byte in UTF-8).
So, your <meta> tag (and HTTP Content-Type header) needs to claim a charset that actually matches the real encoding of the HTML's raw bytes.
If your HTTP server is serving a static HTML file, the file is encoded in a specific charset when the HTML is saved to file. That same charset needs to be specified statically in the <meta> tag (and preferably also in the HTTP Content-Type header). If your HTTP server is generating the HTML dynamically, it needs to encode the HTML in a specific charset for transmission, so it needs to specify that same charset in the generated <meta> tag (and Content-Type header).
In other words, stop trying to lie to the browser/client. Tell the truth, then you won't run into this problem anymore.
So I'm trying to show utf-8 characters coming from JavaScript.
I should have it all:
header
<meta charset="utf-8">
include js
<script type="text/javascript" src="x.js" charset="utf-8"></script>
File x.js is saved as UTF-8 (and also the other files)
It works with all my PHP files, just not when it comes from a simple alert in JavaScript.
alert("Prénom doit être rempli");
Instead the famous '?' characters are showed in the alert box.
Anything I've forgotten?
Here what you need to do: open your file in notepad and save it again (save as) and this time select UTF-8 from save-file-dialog-box. Your issue will be solved
From the spec:
The charset attribute gives the character encoding of the external script resource. The attribute must not be specified if the src attribute is not present. If the attribute is set, its value must be an ASCII case-insensitive match for one of the labels of an encoding, and must specify the same encoding as the charset parameter of the Content-Type metadata of the external file, if any.
(My emphasis.)
So you need to ensure that your server is sending the correct Content-Type header — either with no charset, or with charset=utf-8.
If your server is already sending the charset as part of the Content-Type, that's a good thing: Just remove the charset attribute from the script tag.
I have this code but it only works using english characters
$( "input[name*='Name']" ).attr("placeholder","姓名");
My web page displays other chinese characters just fine and if I change the chinese characters to "Name", it starts working again just fine. Is there something special I have to do here?
In the header, I do see this as the encoding...
<meta http-equiv="content-type" content="text/html; charset=utf-8">
If the script is inline (in the HTML file), then it's using the encoding of the HTML file and you won't have an issue.
If the script is loaded from another file:
Your text editor must save the file in an appropriate encoding such as utf-8 (it's probably doing this already if you're able to save it, close it, and reopen it with the characters still displaying correctly)
Your web server must serve the file with the right http header specifying that it's utf-8 (or whatever the enocding happens to be, as determined by your text editor settings). Here's an example for how to do this with php: Set HTTP header to UTF-8 using PHP
If you can't have your webserver do this, try to set the charset attribute on your script tag (e.g. <script type="text/javascript" charset="utf-8" src="..."></script> > I tried to see what the spec said should happen in the case of mismatching charsets defined by the tag and the http headers, but couldn't find anything concrete, so just test and see if it helps.
If that doesn't work, place your script inline
I want to read a file from my server with javascript and display it's content in a html page.
The file is in ANSI charset, and it has romanian characters.. I want to display those characters in the way they are :D not in different black symbols..
So I think my problem is the charset.. I have a get request that takes the content of the file, like this:
function IO(U, V) {//LA MOD String Version. A tiny ajax library. by, DanDavis
var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
X.open(V ? 'PUT' : 'GET', U, false );
X.setRequestHeader('Content-Type', 'Charset=UTF-8');
X.send(V ? V : '');return X.responseText;}
As far as I know the romanian characters are included in UTF-8 charset so I set the charset of the request header to utf-8.. the file is in utf-8 format and I have the meta tag that tells the browser that the page has utf-8 content..
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
So if I query the server the direct file, the browser shows me the romanian characters but if I display the content of the page through this script, I see only symbols instead of characters..
So what I am doing wrong?
Thank you!
PS: I want this to work on Firefox at least not necessarily in all browsers..
While my initial assumption was the same as T.J. Crowder's, a quick chat established that the OP uses some hosting service and cannot easily change the Content-Type headers.
The files were sent as text/plain or text/html without any Charset paramter, hence the browser interprets them as UTF-8 (which is the default).
So saving the files in UTF-8 (instead of ANSI/Windows-1252) did the trick.
You need to ensure that the HTTP response returning the file data has the correct charset identified on it. You have to do that server-side, I don't think you can force it from the client. (When you set the content type in the request header, you're setting the content type of the request, not the response.) So for instance, the response header from the server would be along the lines of:
Content-Type: text/plain; charset=windows-1252
...if by "ANSI" you mean the Windows-1252 charset. That should tell the browser what it needs to do to decode the response text correctly before handing it to the JavaScript layer.
One problem, though: As far as I can tell, Windows-1252 doesn't have the full Romanian alphabet. So if you're seeing characters like Ș, ș, Ţ, ţ, etc., that suggests the source text is not in Windows-1252. Now, perhaps it's okay to drop the diacriticals on those in Romanian (I wouldn't know) and so if your source text just uses S and T instead of Ș and Ţ, etc., it could still be in Windows-1252. Or it may be ISO-8859 or ISO-8859-2 (both of which drop some diacriticals) or possibly ISO-8859-16 (which has full Romanian support). Details here.
So the first thing to do is determine what character set the source text is actually in.