Umlaute are not being displayed in Chrome and Opera [duplicate] - utf-8

This question already has answers here:
.load() kills character encoding
(3 answers)
Closed 7 years ago.
The Problem: Chrome (Version 47.0.2526.106 m) doesn't display 'German Umlaute' regardless what I'm trying to do. Opera the same (34.0.2036.36)
However in Firefox (43.0.2) and Edge the 'Umlaute' show correctly.
Tried the following things:
Cleared Browser Cache
Saved all files with UTF-8 encoding from Sublime
Checkt default character settings from hosting server
Deinstalled 'Helvetica Neue' according to the hint here:
www.productforums.google.com/forum/#!topic/chrome-de/eB_ljsQN2gw
Header looks like the following:
<?php
header('Content-Type: text/html; charset=UTF-8');
?>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
[...]
Important to know is the fact that the affected text is located within another external .htm file which is loaded into a dynamically generated div via jQuery
like so:
$(environment).load("infotxt/meadow-1-1.htm");
The intersting thing is that this is the only text that doesn't display the Umlaute correctly.
I attatched an example picture of the site, the text I'm reffering to is the one in the upper right corner.
Text with Umlaute
Link to Image
Anyone encountered similar things?
Im thankful for support in this matter.
Cheers!
OS: Windows 10 Pro

SOLVED
Simply by changing the extension of the loaded document from .htm to .php together with my previous settings (as stated in the request/problem) did the trick for me.
You can find the link to the original answer here:
Stackoverflow
thanks to rslinger

Related

ADA Compliance Language Missing or Invalid for video transcription txt files

Reaching out to see if any ADA compliance experts might know how I might resolve an ADA compliance issue pertaining to our video transactions. We essentially provide links to .txt files for all of our videos which contain the video transcription. But when running an ADA scan we receive 2 errors pertaining to our transcriptions.
"Language missing or invalid "
"Missing or uninformative page title"
I'm not sure how I would tell a screen reader or ADA scanner the language or a page title given that these are just plain txt files. Any assistance would be greatly appreciated. Thanks.
This might be more about how your browser is set up to handle .txt files. Is your default action to download the file or to view it in the browser?
If the file is downloaded, then it's up to the end user to display the .txt file in whatever program they have set up to view them.
If you're letting the browser display the page, then that page is generated by the browser and I'm not sure if you can customize the page that's generated. I tried Firefox, Chrome, and Edge and they all generated a similar template to view a text file. (Edge uses the chromium engine so it's not surprising that Edge and Chrome have the same template). There's just a minor difference in the <head> between Firefox and Chrome.
This is essentially what's generated:
<html>
<head>
<!-- if using firefox -->
<link rel="stylesheet" href="resource://content-accessible/plaintext.css">
<!-- if using chrome/edge -->
<meta name="color-scheme" content="light dark">
</head>
<body>
<pre>
(contents of text file)
</pre>
</body>
</html>
If you run an accessibility scanner on this generated page, you will indeed get the two errors you mentioned.
3.1.1 Language of Page
2.4.2 Page Titled
For the language, that's specified on the <html> element with the lang attribute. If you bring up the code inspector on this stackoverflow page, you'll see lang="en":
<html class="html__responsive " lang="en">
For the page title, that's specified in the <head> with a child element of <title>. You can also see that in the stackoverflow page:
<head>
<title>wcag - ADA Compliance Language Missing or Invalid for video transcription txt files - Stack Overflow</title>
...
</head>
If no page title is specified, the browser usually shows the URL or just the filename as the title.
So, can you do anything about the template? I'm not sure. That would be an interesting project.
An alternative is to have your own webpage display the text file, which you would obviously have complete control over and could specify the language and the page title. But I would make this a lower priority issue over other accessibility issues that your website might have.

Cyrillic characters displayed wrong in the html source but correct in the browser

I looked for a solution to this but could not find an answer anywhere. I have a Question2Answer website in Cyrillic that displays the characters correctly in the browser, however, when I check the HTML source file, it looks like the text inside the question and the answer are displayed as &# numbers.
The characters on row 15 are not correctly displayed. As a result, when I try to edit a question/answer on my Android phone, the question or the answer is delivered with the encoding and it is not possible for the website users to edit their question/answer. (It still works on a computer but you can see that the characters are displayed wrong in the source file).
Please use this question on my website as a reference.
I tried to change the encoding via HtAccess:
AddDefaultCharset
UTF-8 DefaultLanguage bg-BG
However, this did not work. I am curious as to how to fix this problem. Any ideas or suggestions are more than welcome.

Change image icon in addressbar of browser

I searched through many sites, but I failed to get an answer.
Question :
I want to change icon as per given in below image in my browser.
Currently chrome and Mozilla does not support this feature if you want check you can check it in either ie or safari, it will show where you want.
you should add this tag to head
<link rel="shortcut icon" href="<YOUR ICON PATH>">
this is a tool to help you to create icon using converter
http://www.favicongenerator.com/
Those are called "favicons", and you can set one for your website using a special tag in the HEAD of your HTML. You can find many tutorials on this by Googling (now that you know what they're called).
Wikipedia suggests a tag something like this:
<link rel="shortcut icon" href="http://example.com/myicon.ico" />
As an alternative, your website can provide an image named favicon.ico in the root folder.
That icon names "favicon". To create Something like that go to THIS LINK, Upload an image and get the favicon.ico file, then put it next to your template page on your host.
To get more information go HERE.

Komodo Edit 8 doesn't recognize Django tags for HTML5 pages

I am using Komodo Edit 8 for a Django project. HTML5 pages do not recognize django template tags for syntax highlighting or code intelligence. However, HTML pages do accurately recognize these tags. Is there a setting that can be adjusted? Can I just make all HTML5 pages be recognized as only an HTML page?
It appears to me that .html files that are snippets are recognized as HTML (4) and .html files that contain the <html> tag are recognized as HTML5.
I found this StackOverflow page, but the answer does not correct my problem
My Komodo build is:
Komodo Edit, version 8.0.2, build 12590, platform linux-x86_64
Well, that was a total noob question. The answer is simple. To solve, switch the file type from "HTML5" to "Django" using the selector on the status bar at the bottom of the application.

How to put an image on the tab bar next to the title of the page on the browser? [duplicate]

This question already has answers here:
Image icon beside the site URL
(9 answers)
Closed 10 years ago.
Hi I am wondering how to put an image on the tab bar same as this website that has placed its logo on the left side of its title. as following picture.
It's called a favicon and it's set with a <link> tag in the document's header tag.
For example, Stack Overflow sets it with:
<link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">
<link rel="apple-touch-icon" href="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png">
The first tag is the cross browser way of setting the icon for common desktop browsers. The second tag is meant for iOS devices.
What I think you're referring to is called a Favicon. Here's a link that helps you make (or import an image) and then exports the favicon for you to use. Once you've downloaded the file, just place it on the root of your site directory.
http://www.favicon.cc

Resources