Printing a mutated vowel with CSS
I am creating table headers for my responsive table in CSS like this:
td:nth-of-type(1):before { content: "Abfahrtszeitpunkt"; }
td:nth-of-type(2):before { content: "Startort"; }
td:nth-of-type(3):before { content: "Zielort"; }
td:nth-of-type(4):before { content: "Karte"; }
td:nth-of-type(5):before { content: "Bewertung"; }
td:nth-of-type(6):before { content: "Fahrt löschen"; }
But when I load this table into my web browser, "ö" is not displayed correctly. The website only prints out a diamond with a question mark in it. I already tried to install it using html and javascript but it doesn't work. Is there an easy way to fix my problem?
source to share
It's hard to be specific, nothing more to continue, but somewhere something is interpreted in the encoding of one character, when in fact it is another. It's helpful to make sure your entire stack uses the same encoding (e.g. UTF-8). Mandatory link: Absolute minimum Every software developer should absolutely, positively know about Unicode and character sets (no excuses!)
As a workaround, you can use \f6
for ö
in your CSS (in HTML, you should use ö
), but this is a workaround, not a solution. The solution is to ensure that your files are encoded sequentially and that your server serves them up with the necessary headers to tell you what the encoding is. Here's a checklist:
- Select encoding. UTF-8 is a very popular choice for western texts, well supported by tools.
- Your editor and other content generating tools: make sure they know you want to work in UTF-8, not the default for your operating system (which varies: for a number of modern * nix systems, this is UTF-8 or ISO-8859 -1, for Windows this is ISO-8859-1 or Windows-1252 [which are very similar]).
- Your database: If you have a database on your stack, you must make sure that the text columns in your tables are using the correct encoding.
- Your web server: make sure it has configured file delivery with correct and complete header
Content-Type
, for exampleContent-Type: text/html; charset=UTF-8
(for HTML files) - I've always put the meta tag
<meta charset="UTF-8">
at the beginning ofhead
my HTML files. It's basically the case that if I open them directly from the filesystem in the browser (and not through the server), the browser knows what encoding I'm using on them. Some HTML editors are smart enough to see them and make sure they also work in a named encoding.
source to share