We're using Barlow, available for free from Google fonts, in a web app. Here's the way a sample phrase looks when rendered on Google's example page. (If you want to reproduce it, you will need to enter the custom text yourself and adjust the slider to 14px.)
Note, in particular, the distinct space between the bottom of the i and its dot above, as well as the clarity of the top part of the f.
This is how the same phrase looks when rendered in our app, as reproduced in this Code Pen.
Note the muddy space between the i and its dot, as well as the muddy top curve to the f.
I've tried looking through all the styles on the elements in question, and I can't find any style that should affect these differently. The network tab clearly shows that the bold version of the font is being loaded; it doesn't look as if this could be faux bold.
This may seem trivial, but we've actually had quite a few complaints about how the font looks in our app, specifically that the bold, lowercase i looks like an l.
Anyone have an idea what might be happening here?
Update: Using Chrome on a Mac; I can confirm the same issue in Firefox. This is on an external display... on a retina there's no problem, as there is way more detail.
The problem turned out to be a problem with the source repo: "hinting got missed in the most recent commit" and the Google specimen (which looked correct) was "actually running an earlier version."
Happily, the maintainer was able to get the problem fixed with a subsequent version.
Related
I have a very pretty calendar report that I've created on one machine, that shows my company's daily revenue as a color coded block for every day for the past several years. After finally getting a color scheme down and pretty much finalizing it, I went to test it on another machine - and hit a rather large obstacle.
This is the report that I used as a template:
http://bl.ocks.org/mbostock/4063318
It's awesome. And, inside Internet Explorer 11, it looks fantastic. I never would have expected that copying the code and testing the report would produce a blank page, but there it is. On that page, the calendar report is visible. In IE 11. Copying the code to a new html file and opening it, shows nothing. In Firefox, however, everything is visible. as is.
Now, there's a part of that page that points to "//d3js.org/d3.v3.min.js"
And I figured out that in order to make that work in firefox I had to add the http: in front, so that's not my issue.
I'm literally sitting here at my desk staring at two browser windows open and pointing to the same html file. One contains my beautiful report, one is a completely blank page.
Some cursory google searches reveal that IE 8 or lower have issues with the svg. I can't seem to find any references on someone having a similar issue though. Their situation seems to be that with IE10, you need to specify the height and width, not just one or the other, to make sure everything scales properly.
If I could have my way, I'd just run Firefox on all of the machines that are going to run the report, even if it's just for that one thing! Alas, I am but a mere peasant coder and so I have to make it work. in the dreaded IE.
Are there any svg/html/d3.js coders out there that can tell me another way to spit out the data I'm using so that I can get what I'm looking for?
copying the code and testing the report would produce a blank page
Because you're outputting invalid HTML. There is no html or head element for starters.
Output your code in to a file like example.xhtml and open it in Firefox (specifically) as it's XML parser will very quickly tell you what line and column the first XML parser error is occurring on. You are rendering in standards mode instead of quirks though that does not imply your page meets standards.
var m=(document.compatMode == 'CSS1Compat') ? 'Standards' : 'Quirks'; window.alert(m+'-mode.');
I was making a presentation using Google slides (in Chinese) and when I want to preview it in presentation mode, "some" of the font looks different from editor mode.
The sample here
I've tried searching on Google and found only this discussion thread, but my problem is a little bit different. The font changes when I change it in the editor and in the presentation mode, the "character" somehow just looks different in presentation mode(the font style is correct). I have tried Safari, Chrome, Firefox, but all fails.
Is this like a bug only for Chinese characters? English seems perfectly fine to me. Does anyone have the same problem and knows how to resolve it?
Actually this happens to many other languages (like JP, KO, etc.) as well.
It gets rendered differently from editor to presentation mode.
So, here is the quick fix for the issue.
Use 'ShowAsIs' Chrome extension to fix it.
https://www.youtube.com/watch?v=Rt4xnAFFGik
Disclaimer: I am the developer of the extension.
I'm having an issue with my website http://www.ben-drury.co.uk/ (I know the content sounds dumb, but it's my first attempt at a portfolio and it's not finished) where the formatting of the text is very peculiar under a specific set of circumstances.
When loading any post or page in Google Chrome, if I remain in the tab for the duration of the loading it looks like the image below, which is perfect and exactly what I want.
However if I start loading the webpage in a new tab and don't instantly navigate to that new tab, or indeed if I refresh the page and navigate away from the tab, when I come back it looks like the image below.
Interestingly it seems to work absolutely fine in Internet Explorer and Firefox, so initially I thought that it might be an issue with my installation of Google Chrome. However testing it on other computers resulted in the same thing happening, and a variety of different ways of phrasing the issue has turned up very little.
So essentially, how do I fix it for Google Chrome users?
(For those that cannot see the images, the text in the post placed as an example runs outside of the box it should be displayed in and often lines appear over the top of each other around hyper links.)
Update:
I've managed to fix the issue for pages by removing the justified alignment of the text. However I have made said change to the posts as well yet the problem persists for them.
So after a little more delving into the issue, I came to the conclusion that not only was the idea of web safe fonts actually a load of miss-represented nonsense, but that Google fonts might be the way to go. After installing a plugin for Google fonts onto WordPress and making all my posts use one by default, my problem has been entirely resolved and I can even have justified text on my posts and pages.
I have been experiencing the weirdest problem, that I can't even begin to troubleshoot. It is important that the webpage in this project I am working is 100% printable. As you can see the signature field below and the note field (with the string "erererer") shows great in Google Chromes print preview but not when I actually print it out using the Chrome browser. In fact, the note field just prints out the border and nothing else (looks like a white empty div with a border) and the signature field prints out everything but the actual signature. When I use google chrome to save the document as a PDF and then print it out directly from the PDF everything prints perfect. When I use firefox to print, the signature area prints perfect, but the note problem remains of it only printing the outter border.
I would greatly appreciate any suggestions on how to begin to fix this or any input on why this may be happening.
Many thanks in advance!
If you need accurate & reliable printability, going iText and PDF is a solution. You can render the page as PDF and it will show in the browser, and then print exactly as specified.
HTML is often inexact, has marks (page numbers etc) from the browser, and can be glitchy.
iText (latest versions) are available open-source, or commercially. There's also an older version available free. See: What is latest version of itext that is not AGPL?
As for your note field: maybe there's something weird with backgrounds, non-standard styling? , or fonts that aren't present? Try making it a plain vanilla table.
I've a problem which is most likely some ugly CSS mistake, but I just can't spot the solution (and a few changes I tried did not help).
Some of in-text hyperlinks (not all!) are shown by Internet Explorer without the following space.
here is the example
See the link WatchBot just below the Rationale title (and a few similar links deeper in the article). Firefox, Opera, Chrome, Konqueror - all display it properly: WatchBot can. IE (6.0 but IIRC also 7.0) displays it as **WatchBot***can*.
I am using Yui-reset and yui-base. Is it possible that those libraries cause the problem?
Do you have a script running on, and altering, the content in any way? I say this because the page loads normally initially, but looks as though it undergos some modification later in the loading lifecycle.
If you think reset or base are making this happen try removing them one at a time - I haven't had any experience of this error before however (I usually use the full whack: Reset, Grids, Base and Fonts).
What I did notice however is that the first WatchBot link of the page is simply this:
<p>Have you ever been curious how is
WatchBot
picking the games to observe and save? Here is the explanation.</p>
Where as the second link looks like this:
<span>Due to the FICS limitations </span>
WatchBot<span> can
I have no idea what that second span is doing there - might be something to check up on. (It validated fine however - so there's definitely an closing span somewhere).
I'd say a good place to start would be to but a space after the anchor but before the span, rather than right after the span start tag.
Current state of the things: as steve_c spotted first, and buti-oxa confirmed, it looks like the layout is being spoiled by javascript (and as Ross noted, some extra spans are injected). Thank you all, I missed it.
I am to make experiments and selectively disable those scripts (analytics and google ads) to check whether it helps (my current bet is that maybe I have some HTML error or naming conflict)
Did you try to disable pageTracker? It seems to be the only script on your page, and it looks fine to me in its static form.
EDIT: I wondered what span Ross was talking about - I did not see any. I viewed the source. I just learned that Firefox allows to see both source and generated source (Toos/Web Developer/View Source). Sure enough, generated source has additional span inserted.
Solution: my page was spoiled by the text-link-ads script (which, in fact I activated on English blog by mistake - this is script by adkontekst.wp.pl, Polish firm). After disabling it everything is OK.
Thanks for everybody who pointed me into the right direction.