I'm working on a Quran web application, I've recently encountered a weird situation, please take a look at the following URL:
http://www.silverlight4web.com/quran/test4.aspx
this is just a sample page which looks fine in Firefox, but Chrome doesn't display it correctly, as you can see, there are some spaces between verses, I'm going to remove these extra spaces. These spaces are randomly distributed between verses, I've also applied word-spacing CSS tag which doesn't seem to be a remedy. What is going wrong here?
Also you can here view a screen shot of the error:
error screen shot
In this URL you can view another copy of this page, but this time with a regular font (Tahoma). It seems that the font is the main source of this problem. Is there any chance to overcome this problem while still maintaining the font?
Related
Screenshot of webpage, Chrome devtools inspection info, and source code
I have a Wordpress site where, for no reason I can find, the text caption under the graphics is being displayed in the browser as two or more lines, even though there's no line break specified in the source code.
As you can see in the screenshot, when I inspect it with Chrome, the console shows a line break in the code before and after the A tag, as well as two quotation marks around the first "line" that don't appear in the browser's render. However, when viewing the source code in Notepad, neither the line breaks nor the quotation marks are there.
The rendered page, with the erroneous line break, appears the same in Chrome, Firefox, and Edge (the last of which has no add-ons installed). This is all on Windows 10. Firefox's inspection panel shows the line breaks in the code, but not the quotation marks.
The page in the screenshot is behind a paywall, but you can see an identical situation at this link [now-obsolete link redacted]. In fact, it appears to be happening on other pages of the site too, for example this one [now-obsolete link redacted], where you can see an even more extreme example of a line break being inserted before and after every link. This started recently - all of these captions appeared normal, as if only a single line, a couple weeks ago at most.
I am totally stumped. What on earth is going on here? Is this somehow the doing of a WordPress theme/plugin? I could try disabling them all, but even if that fixes it, I'm still dying to know what it means for something to show up as multiple lines in the devtools inspector (and in the rendered output) but not in the actual source code.
The problem was that the A tag had the display: block property applied to it. Thanks to #MuhammadZohaib for the quick reply!
This was entirely my own doing - I had added a rule in the stylesheet making A tags in the caption container tables display as blocks as a way to fix some weird display results on the linked graphics themselves, and didn't realize I had allowed it to apply to the A tags in the actual caption text as well (in fact, I had almost completely forgotten about it).
Apparently the A tag still displays on a separate line in the devtools inspector's code display, but that's fine with me as long as the end users don't see it. Still no idea why Chrome's inspector is showing quotation marks around the first sentence (they're still there even after a hard refresh), but that's also apparently not a problem.
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.
I want to test my media-queries, but my browser doesn’t shrink the width even when I change it, examples below:
Moto G4 screen appears with a fixed width of 980px:
The same when I test with any other device screen:
Does someone know why is that happening?
Note: The problem is not the code at all, you know? It's like, I commented all the lines of my html, no css applied, no tags, nothing, and when I open it in the browser the fixed width remains.
Note 2: Funny thing is that when I create any other HTML file, the same problem happens, but when I create a react project it doesn't. So it's not the browser as well, is there some meta tag or anything of the kind that I'm grossly forgetting?
PROBLEM SOLVED
I just forgot the most trivial thing of a HTML file, the initial meta tags, maybe it's due to so many time programming in React LOL
After some changes to our site, we are seeing that when certain pages are loaded, the page quickly changes width. This occurs every time on webkit browsers Chrome and Safair, but only rarely on some other browsers.
I have not been able to produce the effect at all on Firefox on Windows, Firefox on Mac, nor IE9 and IE11. It seems to rarely occur on IE8 and IE10. I have not found a pattern yet that causes it to appear on IE8 and IE10.
To understand what might be causing this, it would be good to know if certain styling attributes take an initial value while the page is loading but them assume some other value by the time the page is fully loaded. This could explain what is happening.
I should add that this problem developed after some changes which "should" not have caused this issue. Basically having to do with adding URL rewriting to eliminate duplicate pages. Clearly some side effect is operative.
At the moment we only have the code on development servers, so it would not be that easy to actually see it right now, although that is the obvious first question from a responder. So at this point, the question is more "what generically causes pages to reformat under Webkit."
UPDATE: the problem seems to be traced to Google Translate. When I remove that from the page, the problem goes away. Put it back; problem comes back.
Oddly, it mostly impacts Chrome! IE10 and 11 are exempt, and with even earlier IE versions the problem is much less.
I can readily demonstrate the temporary widening of the page just by reloading the page.
I experimented with trying to put the div containing the translate div instead a container div and setting some attributes on that. So far I have not found something that mitigates the problem.
We have suppressed Google Translate recently because it started adding other junk to the bottom of the page. That other junk is gone but we will continue to suppress it due to this new jumpiness.
I believe there is some clever way to contain the issue, but have no more time for it.
I have confirmed that the issue is definitely caused by Google Translate being on the page.
So I've come across an issue with a site today regarding strange behavior with Google Chrome. Essentially when the end user uses the built in "CTRL +/ CTRL -" functions to change the text size on the page, the images get bigger and all, but the text size remains constant. I've gone over the markup and css and can't find anything that would cause this. The site behaves as expected when the equivalent functions are used in Firefox and I.E. so I am wondering if anyone has any idea what would cause this?
Does anyone have any suggestions on what I should look for here?
Look for:
-webkit-text-size-adjust: none;
in your CSS.
If it exists, there's your problem. Change it to:
-webkit-text-size-adjust: auto;
or remove the reference altogether (it should default to auto).