HTML not supporting arabic language - javascript

I am working on a project which i need to convert it in Arabic. i am using codeigniter. when I write the Arabic in html it show me that (?????) for Arabic.
This is my HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<meta name="" content="">
</head>
<body>
<h1 dir='rtl'
lang='ar'>checking</h1>
<p dir="rtl" lang="ar" style="color:#e0e0e0;font-size:20px;">رَبٍّ زِدْنٍي عِلمًا</p>
</body>
</html>
it shows me text like that:

As i can see you are using some html5 based attributes like dir so you need to convert the html4 document to html5 doctype and use lang attribute on html tag and meta tag:
<!DOCTYPE HTML>
<html lang="ar">
<head>
<meta charset="utf-8">
A sample demo is below:
<h1 dir='rtl' lang='ar'>checking</h1>
<p dir="rtl" lang="ar" style="color:#e0e0e0;font-size:20px;">رَبٍّ زِدْنٍي عِلمًا</p>
the view source of this snippet looks something like this:

Try with adding meta charset for arabic at the begning
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-8859-6">
or
Displaying Arabic text using PHP
Don't use the short tags . Use the full tags
Remove the quotes and semicolon from the first line and others that are outside the php tags
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">";
Close the span tag <span lang='ar-kw'
Make sure save the file with utf-8 encoding. You might be saving it with another coding.

Use the below as your startup file, it is HTML5, also with this <html lang="ar" dir="rtl"> you won't need to repeat it in every single element. use this and you're fine.
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- your HTML structure -->
</body>
</html>
Concerning your issue: JS Fiddle 1 and JS Fiddle 2 -no need for lang attribute

In charset value, instead of using utf-8, use windows-1256

Add in you php connection code just:
$conn = new mysqli($host,$db_user,$db_password,$db_name);
$conn->set_charset("utf8");
And in you dislay php data code:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

be sure if your file encoding is utf-8 to make this open your file in notebad then save as then you can see this below to select utf-8:
if you use eclipse you can update the files default encoding through windows-> preferences then from left side you can expand general and select content types, and by selecting the file type you can assign its default encoding then click update like the image below, also you can find the way for each editor to update default encoding:

Related

Convert HTML string to HTML file with adding Tabs?

I have a string that is HTML codes, but they are all in one row, I want to create an HTML file, with this string and organize the code by adding \t, correctly according to the HTML syntax..
From:
<!DOCTYPE htmL>
<html>
<head>
<meta charset="UTF-8">
<title>Title goes here</title>
</head>
<body>
</body>
</html>
To:
<!DOCTYPE htmL>
<html>
\t<head>
\t\t<meta charset="UTF-8">
\t\t<title>Title goes here</title>
\t</head>
\t<body>
\t</body>
</html>
I want it to be added inside the string, so that I can then create an HTML file, correctly and orderly..
I tried many ways, but I didn't find the right solution for that

JQuery in Laravel imported but not working

I am playing around with Laravel last version, trying to import and use JS files on the front-end. I have them stored in my folder 'public/js/'.
I have this Blade template you can see below, pizza.blade.php. If you inspect the page source, you can clearly see the JS files are existing, since their links, which are regularly working, are "http://localhost:8000/storage/...".
Nevertheless, they are not working inside the document and, inspecting the network tab, I can see they are not imported.
The image, pizza.png, located in 'public/storage' is displaying correctly.
What am i doing wrong?
Also, is there a better practice to use JS files, such as mix or npm? Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script>src="{{asset('/js/jquery-3.3.1.js')}}"</script>
<script>src="{{ asset('/js/test.js') }}"</script>
<title>Document</title>
</head>
<body>
<h1 class="ciao">PIZZA LOGO</h1>
<div>
<img src="http://localhost:8000/storage/pizza.png" alt="">
</div>
</body>
<script>
$(document).ready(function () {
$(".ciao").css('display', 'none');
});
</script>
</html>
You have this error
<script>src="{{asset('/js/jquery-3.3.1.js')}}"</script>
this is just script with single javascript variable and string inside. You need this:
<script src="{{asset('/js/jquery-3.3.1.js')}}"></script>
this is html script tag with src attribute.

How to get all html string from iframe?

Assume i have iframe contain sample.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="import" href="sample.html">
</head>
<body>
<p>top</p>
<iframe src="sample.html" frameborder="0" id="myframe"></iframe>
<p>bottom</p>
<textarea cols="30" rows="10"></textarea>
</body>
</html>
I want to get all content include <!DOCTYPE html> ...</html>. I try to search arround the web but what i found only get content from body using
var cont = document.getElementById('myframe').contentWindow.document;
console.log(cont.body);
I don't want to use AJAX to get content file.
How to get ALL content from iframe include html tag?
Try accessing cont.documentElement.innerHTML to get the contents of <html> tag.
If you want also the <html> tag, use cont.documentElement.outerHTML.
To get the doctype information, try using cont.doctype.
var cont = document.getElementById('myframe').contentWindow.document;
console.log(cont.documentElement.outerHTML, cont.doctype);
You could also use XMLSerializer if its supported in the browser:
console.log(new XMLSerializer().serializeToString(cont));
try this:
Using document.doctype to get the document doctype
Using document.getElementsByTagName("*"); to get most of the html
https://jsfiddle.net/4hhf6nLm/
following line will retrieve inner html of iframe
document.getElementById('myframe').contentWindow.document.body.innerHTML
Check this answer for more information

nodeValue vs value in JavaScript

Ok, so i have this HTML web page with nothing fancy on it right? The problem is that when I try to place an image on the screen without using CSS (with the traditional < img > tag), I get this error in FireFox:
Use of attributes' nodeValue attribute is deprecated. Use value instead.
The image display is simple, just the tag and the src.
Here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="administration/stylesheet.css">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
<img src="administration/graphics/textlogo.png">
</body>
</html>
I hope someone knows what to do, cause I can't seem to find a solution.
Cheers!

Access comment nodes outside <html> tag

I'm developing a chrome extension that reads html comments from a page and render them in an action popup.
However, I don't know how to (and if it's possible) to fetch some comments that are before and after the <html> tag. For example:
<!-- test test test -->
<DOCTYPE html>
<html>
...
</html>
In jQuery, $("html").before() and $("html").after() both returns the same as $("html").
Is it possible do fetch those types of comments using either jQuery or pure Javascript?
Edit: the page with the comments looks like this:
<!-- Comment I'd like to fetch -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us" >
<head>
<title>Featured Designers for WOMEN</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
With this document:
<!-- comment 1 -->
<!DOCTYPE html>
<!-- comment 2 -->
<html>
<body>
hello world
</body>
</html>
You get the first comment like this:
document.firstChild.nodeValue
The second comment is found like this:
document.childNodes[2].nodeValue
To get all comments underneath document:
var nodes = document.childNodes;
for (var i = 0, len = nodes.length; i !== len; ++i) {
if (nodes[i].nodeType === 8) {
console.log('Found comment' + nodes[i].nodeValue);
}
}
document.firstChild should do it.
$("html").siblings(); This will return all the dom object elements at the same level as the html tag I believe. I wanted to confirm by using JSfiddle but I'm receviing Javascript errors on their website using IE8 right now. I can confirm later when I get home if it doesn't work for you in your testing.

Categories

Resources