search

commIT-Group / advice-generator-app

FrontEnd Mentor project
https://commit-group.github.io/advice-generator-app/
5 stars 0 forks source link

Issue with formatting Unicode characters #38

Open nikkehtine opened 1 year ago

nikkehtine commented 1 year ago

obraz

The correctly displayed word should be Jägermeister

Software

I was unable to determine if the issue occurs on other browsers and devices, it's hard to track and debug it given the randomized nature.

car2t commented 1 year ago

Hi @nikkehtine

You got a eagle eye Nikki! ;D

I edit the HTML directly in Firefox to add that German word in the span content and I saw it perfectly, so no sure.

Could set the lang attribute in the paragraph to undefined help with that?

<p lang="">...</p>

What do you think?

WitchDevelops commented 1 year ago
  1. StackOverflow says UTF-8 should fix that (but we're already using it).

Another encoding they suggest is ISO-8859-1.

  1. Another solution I found says to add this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> however there is no explanation as to why.

  1. Solution #3 says to add this line of code to ensure every rendered page is displayed in UTF-8
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">

(it was said in a context that form submission can mess up encoding, and since our page isn't static, this may be somewhat relevant. I didn't raed the whole thing tho).

car2t commented 1 year ago

Hi @nikkehtine and @WitchDevelops

We could try the last solution. Using

<meta http-equiv="Content-type" content="text/html; charset=UTF-8">

instead using <meta charset="UTF-8"> and see if it works fine.

If that doesn't work then we could use JavaScript. We can figure out how. I don't like other solutions.

Let's try it! ;D

WitchDevelops commented 1 year ago

It's gonna be hard to test if any of those solutions work without somehow forcing the response from the API to see those characters... any ideas how to do that?

nikkehtine commented 1 year ago

It's gonna be hard to test if any of those solutions work without somehow forcing the response from the API to see those characters... any ideas how to do that?

We could use that particular advice as the API source for testing.

const API = "https://api.adviceslip.com/advice/76";

Maybe instead of manually testing and changing that line, we could set up a JS test that would get that advice and test if that problematic character renders correctly?