I'm having this problem with L characters showing up in IE 8. It's happening in the Healthcare Professionals block and the bottom two blocks. Any experience with this/clue as to what's wrong? I'm going to start deconstructing the whole page soon and rebuilding it line by line, but it would be great to get an answer as to what the heck the cause is.
Maybe you can refer to this https://webmasters.stackexchange.com/questions/15709/strange-characters-appearing-on-websites-ascii-unicode
There may be some encoding issue with the content.
Related
Can you help me with a way to go around this issue?
There is an Arabic font rendering issue, which, at first, I thought was a problem in the font I am currently designing. However, I now believe it originates from the browsers because the same problem appeared in the Arabic Typesetting font (arabtype.ttf), already built into my computer’s Windows 10 Home OS.
Also, this problem happens only in Edge and Chrome browsers under Windows OS and Android, but it doesn’t happen in Firefox.
Further, there is no problem under IOS, not even with Chrome or Edge.
The text renders correctly in MS Word.
The image below, showing text in the Arabic Typesetting font provided by Windows, depicts an example of this problem.
font rendering issue
The Problem: Ideally, a ligature glyph composed of 2, 3, or more characters has diacritical marks positioned in an ordered sequence above or below the combined ligature. The ligature in this example is a combination of two Arabic letters, Jeem and Heh, where the Fatha and Damma diacritics cluster only above the Heh instead of their assigned sequenced order.
You can try the text on the test webpage: https://www.colorfulquran.com/fonts/ProblemOfTheMarksAboveLigatures.html in any browser under any OS.
There is something so peculiar and strange about this problem! As shown in the attached images, a string of text in one paragraph has two occurrences of the same ligature. The problem occurs in one of them, but not the other!
I thought the problem was in the font I was designing. I have been trying to fix it for over three months. Finally, I thought to have fixed the problem by reordering the GSUB lookups. Unfortunately, while the problematic ligatures would render correctly, the same situation would reappear in other ligatures generated correctly before the reordering!
Can you help me with a way to go around this issue? For example, is there anything I should do in the font design? Or maybe something in the HTML/CSS design of the web page?
How can I get such ligature and diacritic intensive Arabic text to render correctly in all browsers under all operating systems?
Thanks.
This post is a follow-up.
I sent my original question to Google Chrome’s “Report an Issue” and MS Edge’s “Send Feedback.” A few days later, I noticed that the problem had disappeared from Chrome. They seem to have fixed it. Thanks, Google. But it still shows in Edge.
On the other hand, thanks to posting the question here, I found a workaround for the issue, although no one responded. While preparing the test webpage linked in the original question, I first thought of emphasizing the problematic words by making them bold. But then I turned them back to regular because, after making them bold, they rendered correctly, which defied the purpose of this question. Using HTML bold tag seems to reset the browser’s font rendering engine. So, as a workaround, I now turn each space between every two words to bold, which will not show, of course, because the space glyph is empty. This workaround seems to work on all browsers, including Edge.
Thanks.
Edge seems to have fixed the issue as well. Thanks, Microsoft.
Until now I thought justify meant that the text will start and end at the same pixel, but i was surprised a few hours ago, when I saw this:
I got similar results in 2 computers (win7+chrome, ubuntu+firefox), and not just at this place, there are more similar bugs on the same site.
After my second chec I thought this is general and I just haven't noticed yet, but other sites don't show this strange behaviour. Also refreshing the site and restarting the browser didn't solved it.
Has anybody else noticed this? What causes this?
Actually that could well be intended behaviour. As with kerning it's about the appearance, rather than being pixel perfect. With justification the appearance that's trying to be achieved is of a straight edge on both sides of the text column.
Letting a letterform with an uneven right edge like "k" stick out past the straight edge of a letter like "n" helps to give that appearance visually. This is because of Gestalt psychology, which deals with how we perceive shapes, and you can see it happening at the start of lines as well:
It wouldn't surprise me if Webkit handles the nuances of text reproduction like this better than IE's engine—it's a feature in desktop publishing software like Adobe InDesign.
It should be because of the character width is variable, a pixel is the smallest unit here, and fill the spaces, with, spaces can sometimes compute a float which is rounded.
Anyway, you should really not worry about this as the main reason would readability and not a design vagary.
The points previously made about this being a perceptual issue are valid, but also a bit accepting of a best-case scenario where the justification is being done right/well in the first place. It's worth nothing that proper text justification is actually rather hard, and the algorithms used by browsers just aren't that great. This Hacker News thread has a bunch of notes and links that should be of interest.
I'm not even sure where to start on this one. in (some versions) of ff 3.6 (maybe others) my float-tastic page, doesn't render. At all: if you switch from another tab, the old page continues to show. if you reload, it will draw /some/ elements over the other page (really!). If you scroll, you get a page of ridiculous glitches and 5 to 30px high repeats.
Here is the offending page:
http://artdispenser.com/quarterrat/index2.php
It's set up as a long column with alternating floats to create a punk rock type look. The page is randomly generated, so feel free to reload it a few times.
Seems to work well on other browsers. Has anybody ever seen anything like this? any idea where to begin? I figure that this page is such an insane pile of fail that anybody who knows what is going on will immediately know the problem.
Thanks, folks!
For starters you have the same id used multiple times on the page. That is bad, very bad HTML. However that is not the problem.
Secondly, FF does have issues rendering monospace fonts. Which in your case would be Courier. Change that to Courier New and it will work again. But then you will have to resize the font accordingly.
I would highly recommend using web-safe fonts. A sample list of these fonts can be found on http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html or on http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html.
And as #David Dorward mentioned, validate the page. That might have also picked your font rendering issue.
This part at the end doesn't look very encouraging:
</body>
</html>kes to move the world.You unlock this door with the key of imagination. Beyond it is another dimension: a dimension of sound, a dimension of sight, a dimension of mind. You're moving into a land of both shadow and substance, of things and ideas; you've just crossed over into the Twilight Zone.
</div>-->
</div>
</div>
</body>
</html>
It doesn't help that you never opened an html tag, even though you're closing it. Twice.
Problem is located on http://www.preownedweddingdresses.com/
We have a dresses slider at the bottom, select tabs different dresses shown.
Works fine everywhere else, but for some reason, in IE6, the letters "ls" (from the tab "Best Deals") are duplicating inside the content and causing rendering issues.
I've yet to find anything that can fix this, or anything that can be blamed for causing this either.
I've changed the letters at the end of Best Deals, and the duplicated letters change as well.
Open to any suggestions.
You've (re-)discovered another of the many reasons that every web developer hates IE6.
One of the pages on my website is pretty tall. It's under 200KB in size, but it's a series of tables that takes a lot of vertical space. After about 40 screenfuls (about 1/4 of the total scrolling height of the webpage), it just stops drawing: everything above that looks fine, and everything below that is plain white background -- except the footer (in a different div, I guess), which shows up fine at the very bottom.
I've asked around the office, and other people have seen this before, but don't know what causes it. We certainly have other pages here that are just as tall, and have no problem. I've seen pages render fine which are much longer. It's not a complex document at all -- some nested divs, some tables (4 or 5 columns, a couple hundred rows each), some CSS.
The page renders great in both IE7 and Chrome. Only Firefox 3 does this.
Any clues as to what's causing this? Or a workaround? I don't even know what to google for here.
EDIT: I've seen this on another, completely unrelated page. In both cases, it cuts off at about 33000 px from the top -- ha. I know FF3 can have divs and tables longer than that. Anybody know what they might be using a 16-bit size/coordinate for?
Sounds like this may be related to Firefox Bug 215055 or Firefox Bug 333994. Check these out. If it is indeed related, you can always attach your testcase to one of these bugs and add your comments to the bug.
I also recommend, like zodeus does, trying a nightly build or a beta of 3.1. If it's fixed there, that doesn't mean you force your customers to upgrade, but at least you know it's fixed in a future build and you can campaign for Mozilla.org to bring the fix back to a more current build where you might get people to upgrade.
Try downloading the Fire Fox 3.1 Beta or Nightly Build. They have reworked a lot of their internals. If it works there then I would say it's a reported and fixed FF3.0 bug.
This bug filed in Bugzilla may be related...