I want to create a presentation using reveal.js. The slides are automatically scaled to fit the browser window.
However, in Firefox (47), the font is really blurry, both on Windows 10 and Fedora. Chrome looks fine on both systems, so does Edge.
I've put a comparison image below: It shows the 'V' from the reveal.js demo page. As you can see, Chrome and Edge have about 1 pixel of "antialiasing boarder", while Firefox shows about 3 pixel. That's really hard on the eye...
What can I do to get a crisper presentation in FF?
Related
A very weird thing happened a couple of hours ago. I am developing a new site - which is already live Utopia Africa - using laravel & bootstrap. I am normally using Firefox on my mac to view the local site. Suddenly everything started to be rendered "big" by Firefox as for a cellphone but with text extremely big (see image below) and all logos/images at full size (although img-fluid). The size of text and images do not change when resizing the window. I tried everything like clearing cache, rebooting... However, the same local site is perfectly rendered on chrome, opera & safari. And once again, the same source file (I compared them) is rendered well on firefox when on the live server (as the above link shows). I am pulling my hair off with this one... any idea?
Have you zoomed Firefox by accident? Press CTRL + 0 to set the viewport zoom to 100% instead of 300% it is now on.
Firefox zoom option:
https://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages
I'm displaying this image on a website, however Chrome seems to be adjusting the brightness or saturation (not sure the exact term). I've only run into this problem recently, this image was displaying on Chrome correctly however some recent changes in Chrome must have changed that.
I've done a quick test with browsers and here are the results:
Chrome Desktop (64.0.3282.186): Broken
Chrome Mobile: Broken
Opera: Working
Edge: Working
Raw image can be found here: https://imgur.com/a/3TLlc
Here's a side by side comparison between Chrome (left) and Edge.
Could anyone tell me the cause of this? Or perhaps point me in the right direction?
I think that your image is in CMYK (print) color mode. Chrome renders its colors differently.
Try to open the image with an editor (for example: Photoshop, Gimp 2), set the color mode to RGB (if the editor doesn't do that by default), and save it (or export it) with the same extension, .jpg. This works for me.
If your colors are changing a little bit, that is because of the conversion to RGB.
Very simple, I've created a report, and use printThis.js JQuery plugin, which works perfectly on all browsers and all platforms, except when I send the report via IE, the CSS inch measurements, which should be inches regardless of browser, all the sudden are 2/3 of their normal size. All browsers are set to LETTER size 8.5 x 11, so the page setups are identical.
On Firefox, Chrome, Safari, 1 inch is 1 inch. On IE, 1 inch is .75in.
I've searched all over the web, but given that IE has metric tons of problems associated with CSS, the results are impossible to isolate to my issue. I'm sure there are answers out there, but I can't find them amid all the legacy issues with this pile of steaming browser.
Appreciate any help.
Question: How do you make 1.0in in CSS 1.0in in IE printing?
Basically I am designing a jquery plugin to create circular presentation using vw to get rid of font size.
Everything works fine except for IE9, which renders the size of the font bigger than the other browser.
You can take a look at the example here:
http://www.rubenrizzi.com/circularslideshow/example-cell-encrypted/
Looks how bigger looks on IE9 than in the other browser.
Is there a way to handle this behavior with a polyfill, or a css trick to make IE9 respect the vw size?
I'm trying to turn my icons into font glyphs.
Now, the problem is antialiasing of the font in Google Chrome on Windows 7 (it looks good on OS X). I took two shots, where on the first one you can see the desired behaviour, as seen on Firefox/Windows 7 and all the other browsers, except Google Chrome, which is the second shot. Is that problem in font itself? Or is it because of system settings? Is it in CSS settings?
Firefox 12 Windows 7
Google Chrome 18 Windows 7
The most problematic parts are highlighted with red.
Use CUFON instead of #font-face it's a better option as per the rendering font in windows because CUFON put the font in canvas & it's look smooth in windows.
Using text-shadow helps a little, try adding a little bit of shadow with 4-6 pixels of blur. Play around with it and you may find the "sweet spot." Some font sizes also seem to be more problematic than others, try taking it up or down a pixel or two and see if that helps. I'm tilting at this particular windmill with Google right now and hoping I can get someone's attention. In this image, the top example is IE9, the bottom example is Google Chrome (both Windows 7). https://twitter.com/#!/tacomamama/status/197397136470589440/photo/1