I've noticed an interesting anomaly when running Chrome 40.0.2214.10 beta-m (64-bit) on Win7. Admittedly, I have yet to test this on other browsers.
In the screenshot below you will see to eBay item pages -- the first has a title which renders as a Serif (is that Times New Roman) in the Chrome Title Tab. The latter renders in the standard Sans-Serif Chrome font.
The URL for the first example is here: http://ebay.com/itm/301399607776
My principle question is whether or not this is something that I can reproduce using any combination of markup, javascript or other file or server-side settings -- or whether or not this is some kind of unusual bug or setting in my local browser settings.
This is a bug with certain characters in Chrome, if you copy and paste (for example, into a Chrome URL bar):
Mens Mickey Mouse T Shirt
You will see the rendering issue appear in the Input Form. (Note: the character U+0091 appears between the "n" and "s" in "Mens" here.)
Related
TL;DR
How/why are some browsers able to search and highlight text in the HTML body which is followed by #:~:text= in the URL?
Explanation
One day I was searching for something on Google, which lead me to Quora's result. I observed that 2 sentences were highlighted in yellow, which were part of URL after the aforementioned parameter. I thought this would be Quora's feature for SEO or something, however, also found this on Linkedin, and Medium, and so on.
I'd like to know:
What is this highlighting called? Why/how does it work?
This seems to be browser-specific. What kind of browsers support this?
It seems to work on Chrome and Edge; but not on Firefox, Safari, and IE.
Does a frontend programmer need to incorporate something in the code to have search engines highlight content on their web-pages? (Based on the assumption that search engines actually appends the relevant string predicted by user's query)
The highlighting is called Text Fragments. Its a new feature that was recently added to Chrome 80. It works by specifying a text snippet in the URL hash.
Yes it is browser specific.
No, the experience that you get when clicking on a link from Google's search results is part of Featured Snippets which are algorithmically determined. There is nothing you can incorporate into your code to prompt search engines to highlight text on your page.
There is no markup needed by webmasters. This happens automatically,
using Scroll To Text for HTML pages
https://chromestatus.com/feature/4733392803332096. See also more
background here: https://support.google.com/webmasters/answer/6229325
Sources:
https://web.dev/text-fragments/
https://www.theverge.com/2020/6/4/21280115/google-search-engine-yellow-highlight-featured-snippet-anchor-text
https://www.theverge.com/2020/6/18/21295300/google-link-to-text-fragment-chrome-extension-chromium-highlight-scroll-down
https://searchengineland.com/google-launches-featured-snippet-to-web-page-content-highlight-feature-335511
https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html
While text fragments is natively implemented only in latest Google Chrome (and the latest versions of Chromium-based browsers, such as the new Microsoft Edge), there is a browser extension/add-on that seems to enable it on Firefox and Safari: https://github.com/GoogleChromeLabs/link-to-text-fragment
It appears to use #ref-for-fragment-directive:~:text= and additional arguments (instead of just simple #:~:text=).
Firefox: https://addons.mozilla.org/firefox/addon/link-to-text-fragment/
Safari: https://apps.apple.com/app/link-to-text-fragment/id1532224396
Curiously enough, the extension has also been made available for Chrome and Edge too (!).
.
UPDATE: I'm testing it on Firefox Developer Edition, and it doesn't work for me.
Chrome for Windows (v58) seems to add a glyph at the end of a h3 heading.
This square is also seen in the inspector but not in the source code.
It seems like Chrome isn't rendering the font completely as it should?
I'm using TT Hazelnuts from myfonts here.
There is no character missing from my line so doens't seem to be a special char issue or something.
The font is used throughout the site but it seems to only happen on some headers. Also other browsers don't have problems displaying the text correctly.
Changing text-rendering settings in CSS doesn't make a difference.
The site can be found at http://dev.everywhere.consulting (until is goes live)
I have been able to fix this by copying the text out of your editor, pasting it into the URL bar in Chrome on Windows (this will show you the strange square glyph), delete the square glyph there in the URL bar, then copy the text back into your editor.
Oddly enough, even source control will recognize the change but it won't appear to look any different.
Here I am doing it: https://i.imgur.com/Hr2s08j.gif
I have a new website with a set of favicon images auto generated from a source file using Real Favicon Generator, and there are:
9 Apple favicons
1 Android favicon
3 named favicons
1 Safari pinned SVG
1 json manifest
1 set of Microsoft tile image/colour
Obviously most of these can be placed for their respective vendors - Apple, Microsoft tiles, etc.
I have an issue in that running the website on Firefox, I want the favicon it uses to change but I do not know which one it actually uses?
I have read this question but the stated answer on here is incorrect and
Firefox and Safari will use the favicon that comes last.
is no longer true.
Obviously it's a time consuming repetition to go through ~15 images to find the one that gets changed on one browser, and I actually found that Firefox 42 selects the 96x96 dimension favicon, rather than the last one presented.
Question:
Is there a way [aside from trial and error] to load a page and then find a declaration in the browser defining which image from the HTML head is used as the page favicon in that browser?
Additional Information:
There is an incomplete reference list here. However, this misses out various versions and various OS, and I can only assume these details where found from trial and error.
While this is useful, the various links and solutions on that question give a single URL result for an automated process, such as
http://www.google.com/s2/favicons?domain=www.domain.com
Which works fine in returning a valid favicon but it does not return the favicon that my browser uses when I tested it.
Other links from that question are similar, most only returned a 16x16 favicon and many clearly did not return the image used. Some probably didn't return the image used... it is hard to differentiate 16x16px sometimes!
You can use the Compatibility test of RealFaviconGenerator. The test will ask you which icon you see. But there is a twist: the test is not really for the end-user, so you will have to right-click the image corresponding to the icon you see, inspect it, and look at the alt attribute of the img tag. But that will prevent you from playing with 20+ images to make them different. Much easier!
Full disclosure: I'm the author of RealFaviconGenerator.
Note: I would be interested in your investigations to fix the answer you mention (I'm his author).
Using the Inspect Element, or just Inspect tool, available in Firefox and Chromium. The Network tab shows all http operations related to reload. Filtering by 'favicon' most likely peeks the correct operation, when the page is reloaded.
The fact that the browser downloads an image is a strong hint of what gets displayed. Yet, doubts can persist, e.g. which part of an .ICO. Unfortunately, the tab is a computed element not visible in the (computed) page source.
On Firefox, the iconuri is visible in the json code of exported bookmarks.
I know there is a total flood of font rendering related questions on all sorts of sites these days. One of them should provide me with an answer, so you would think. However much I search I cannot seem to find a solution for my problem though.
In google chrome almost all fonts are displayed bold. Well that wouldn't really be the end of the world. What bugs me even more is, that they are rendered very jittery. As in they look sort of distorted.
I have made a picture to show the difference between my firefox and chrome font rendering:
http://i.stack.imgur.com/hYRh4.png
I simply want to get rid of this. It has been bothering me for a while and no solution I can find on the web helps.
For the record I have uninstalled and reinstalled chrome. Also I have disabled Direct Write in the chrome://flags.
Any help?
This is actually not a rendering problem, but a font loading problem. Firefox shows Arial (a font optimized for rendering at small sizes), while Chrome shows Helvetica (which is not, at least your installed version).
The editor from your screenshot probably asks for the font Helvetica and, if Helvetica is not available, Arial and other sans-serif fonts. I assume you only have the Bold version of Helvetica installed on your computer. It actually should display the Regular version, but it isn't available.
Firefox therefore falls back on Arial, while Chrome shows the closest weight you do have: the Bold version.
To fix your problem, you should try uninstalling Helvetica Bold (through Control Panel > Fonts). Note it can also go by other names such as Helvetica Neue, Helvetica LT Std, Neue Helvetica, etc. Don't forget to restart just to be sure. Then Chrome should also show the optimized Arial.
Eventhough the question is kind of old, the "problem" may still occur and I found another scenario which causes this text-appearance to happen (which, honestly, brought me here).
In my case, I did not note that my jQuery callback loops and renders the text multiple times to a fix position, about 20 times. I checked the entire css. font-family, text-rendering (geometricPrecision in this scenario), font-weight and what not.
It took me quite a while to figure out that I had 20 divs over each other with the same text, because I've got a very complex and deeply encapsulated DOM there.
So if you ever get here with similar problems, you may also want to check for this one.
The easiest way to check is, to delete the element holding the text using the browser integrated inspector / developer tools (Windows: F12, Mac: ALT+CMD+I) - navigate to "Elements", toggle the left icon (that one with the cursor symbol in it) to blue (active), click the element in your browser. It should be highlighted under "Elements" now, easiest way to find it in the DOM. Right-Click and delete it. If you still see the text, you've most likely got multiple overlays while you only wanted one.
I just want to say that I resolved this issue by deleting a whole Roboto Font Family from the system. (MacOS Big Sur 11.2 (20D64).
I made a form on my WordPress site that listed a few options. When viewing the website in Chrome the text doesn't render correctly, however, it renders correctly when viewing the page via Internet Explorer.
Not too sure for the reasoning behind this. Does anybody have a clue?
Sometimes, the default font on your computer might have been overwritten expecially if your font is georgia, I most times have this problem as well, i think what you should do is find another machine running your version of chrome, preferably newly formatted without font installation and test the page. also check the encoding, [utf_8(http://en.wikipedia.org/wiki/Character_encodings_in_HTML) is the browser standard
This thread might show you how to change character encoding
Her is another resource that might help