Not displaying £ symbol correctly (v76/v77)
Hi all,
I found an issue when displaying the £ symbol in Firefox.
I'm using the below stylesheet that adds content with £ on a particular cell.
td:last-child::before {content: "£" ;}
I tested this with Chrome, IE 11, new Edge and also on multiple computers and always works fine on the other browsers but never on Firefox v76 and v77.
If I open the page source in FF it shows the incorrect symbol, same if I inspect the code but if I change it live, it displays fine. I also ruled out the font.
Image attached showing FF and Chrome below.
Thanks for your great work guys :)
Cheers
The same sample code I used to test:
<!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"> <head> <title>Test</title> <style> BODY{background-color:#FFFFFF;font-family: "Franklin Gothic", "Courier New", Courier, monospace;} TABLE{border-width: 1px;border-style: solid;border-color: black;border-collapse: collapse;table-layout: auto;width:600px} TH{border-width: 1px;padding: 3px;border-style: solid;border-color: black;color: white;background-color:#4E8435;font-size: 15px;font-family: "Lucida Sans Unicode";} TD{border-width: 1px;padding: 3px;border-style: solid;border-color: black;font-size: 14px;} td:last-child::before {content: "£" ;} tr:nth-child(odd) { background-color:#d3d3d3;} tr:nth-child(even) { background-color:white;} H1{margin-bottom:1px;color:#4E8435;font-family: "Lucida Sans Unicode";font-size: 50px;font-weight: 700;text-decoration: none;text-transform: capitalize;} H2{margin-top:1px;font-family: "Lucida Sans Unicode";font-size: 15px;text-decoration: none;text-transform: capitalize;} H3{margin-bottom:1px;color:#3B5566;font-family: "Lucida Sans Unicode";font-size: 25px;text-decoration: none;font-variant: none;text-transform: capitalize;} </style> </head><body> <table> <colgroup><col/><col/><col/></colgroup> <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr> <tr><td>Description</td><td>158</td><td>690.35</td></tr> </table></p> <table> </table> </body></html>
cor-el द्वारा सम्पादित
All Replies (10)
btw, I tried with other symbols like $ and works fine.
the table isn't showing the code but I'm sure you get it!
hello settleman,
please visit the given link resolve your problem easily :
I hope resolve your problem then reply back to me.
Thank you!
Hi Arman,
Thank for your quick reply. I had visited those pages but they don't actually help.
To replicate this issues, you need to save the html in a file and in your drive and open the file from your drive. If you paste the code to one of those pages or change the value live, it will work.
Just to be clear, I'm not seeking help, I'm reporting a bug. If this isn't the correct place, please let me know where to report it.
Cheers
Hi settleman,
If the bug you wish to report affects Mozilla, Firefox, Thunderbird, Camino, or Seamonkey, you need to go to bugzilla.mozilla.org.
Hope it Helps. Thank You.
Hello...
The little boxes indicate that a character specified by the page is missing from the font used for that element. This can occur when web font downloads are blocked, or when Firefox is set to disregard page style rules and use a standard set of fonts. Here are some steps to investigate:
Here are a couple things to check, the details follow:
(1) Font setting -- are pages allowed to specify fonts to use? (2) Is a setting or add-on blocking downloadable fonts?
For #1, go to the Options page:
- Windows: "3-bar" menu button (or Tools menu) > Options
- Mac: "3-bar" menu button (or Firefox menu) > Preferences
- Linux: "3-bar" menu button (or Edit menu) > Preferences
- Any system: type or paste about:preferences into the address bar and press Enter/Return to load it
In the search box at the top of the page, scroll down to the "Fonts & Colors" section and click the "Advanced" button.
Then make sure the box is checked for "Allow pages to choose their own fonts, instead of your selections above"
Any difference (you would need to reload the problem page, Ctrl+r or the circling arrow button, to see any difference)?
For #2, some add-ons have a feature to globally block downloadable fonts unless you specially allow them. Do you run uBlock Origin or NoScript, for example? In uBlock Origin, the setting is called "Block remote fonts".
There's also a general setting to block downloadable fonts in about:config, if you think you might ever have changed that:
(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button promising to be careful or accepting the risk.
(2) In the search box above the list, type or paste gfx.down and pause while the list is filtered
(3) If the gfx.downloadable_fonts.enabled preference is bolded and "modified" or "user set" to false, double-click it to restore the default value of true
Was it any of those things?
Ankit Kumar द्वारा सम्पादित
What font is Firefox using for the £ pound sign ?
You can right-click and select "Inspect Element" to open the builtin Inspector with this element selected.
You can check in the Rules tab in the right panel in the Inspector what font-family is used for selected text. You can check in the Font tab in the right panel in the Inspector what font is actually used because Firefox might be using a different font than specified by the website.
Thanks Shashank.
For everyone else, I'm very disapointed that you haven't even tried it yourselves. I know that because you have no idea what I'm talking about and are suggesting it all wrong and I suspect you haven't even read my post!
The problem is not the font. The problem is not even displaying the symbol in the browser. The problem is that FF is reading the file with the wrong character for some reason.
Anyway, I'm going to bugzilla!
Works for me.
Did you check what font is used like I posted above ?
Did you try a new clean profile to be sure that this isn't caused by your current profile ?
it's not the font.
I'm generating the html file from powershell using set-content and the file is 2Kb and doesn't work (as reported). If I generate the file using out-file instead, the file is 3Kb and works fine.
the file contents is exactly the same and shows correctly when opened with notepad but one of them doesn't display correctly in the browser as you can see in the image I attached in the first post.
The file encoding is clearly the issue but I imagine it shoulw work in FF the same way it works on the other browsers I tested. Notepad++ shows the encoding as UCS-2 LE BOM on the file that does not work and ANSI in the file that works properly.
I have now opened a ticket in bugzilla https://bugzilla.mozilla.org/show_bug.cgi?id=1643919
Cheers
Firefox seems to be using ISO-8859-2 (Latin 2) or ISO-8859-16.
It works properly if I specify the charset via a meta tag.
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
cor-el द्वारा सम्पादित