I'm trying to rotate a simple line of text by some degrees with the CSS3 property »rotate«,
precisely by 1.5 degrees.
-webkit-transform: rotate(1.5deg);
-moz-transform: rotate(1.5deg);
-ms-transform: rotate(1.5deg);
-o-transform: rotate(1.5deg);
transform: rotate(1.5deg);
The result in Chrome (v18) is looking OK,
in Firefox (v10) and Safari (5.1.5) however I am getting ugly results.
I am using a font implemented with #font-face, but with Arial i still get problems (at least in Firefox). See examples below.
What's really weird is that switching to a system font (Arial) in Safari resolves the problem, while in Firefox the problem persists.
Any help, workaround or hack would be greatly appreciated.
1) Chrome 18 / font-family: Calibri / alignment OK
2) Firefox 10 / font-family: Calibri / alignment ugly
3) Firefox 10 / font-family: Arial / alignment still ugly
4) Safari 5.1.5 / font-family: Calibri / alignment ugly
5) Safari 5.1.5 / font-family: Arial / alignment OK
So far, I have found the following threads,
but none of them gives an explanation on how to solve the problem:
https://bugzilla.mozilla.org/show_bug.cgi?id=403447
CSS3 Bugs - Issues when using transform:rotate rules (Safari + Firefox)
CSS Transform Rotate letter alignment
I have also tried setting the DirectWrite variables (to change font rendering), as described in this tutorial: http://www.askvg.com/how-to-enable-direct2d-directwrite-hardware-acceleration-in-mozilla-firefox/ , but the results are the same.
This isn't something that you can fix, from the bug report and other bits it looks like the browser makers are aware of these problems.. but I wouldn't hold out for a permanent fix for a while.
Maybe try putting the text in its own div container and rotating that instead of the text directly?
But IMHO if you need this to work on a production site, replace the text with an image. Users are using browsers that don't support the new CSS3 stuff so if it's important either don't use it, or ensure it degrades nicely (functional on all platforms, but may loose some snazz) ie disable the text rotation on the browsers that look ugly.
Related
A Firefox change broke some of my background/border images. See this issue for more details: CSS - New Firefox-release doesn't show Border-Image anymore. When I fixed this issue by adding border-style: solid my text now displays a white/gray background behind it. Any idea why this might be happening. See my image on Chrome (how it is supposed to look) and then on Firefox.
Chrome:
Firefox:
Here is the jsfiddle link: http://jsfiddle.net/nirodhasoftware/offuhxao/1/
You need to draw a background too.
From pseudo or from element itself :2 examples to tune to your needs.
pseudo:
background:#5099D6;
background-clip:padding-box;
element:
background:url(http://www.rwe-uk.com/static/ichat_with_css3/speech_bubble_left_2.png) center / 300% 150%;
background-clip:content-box;
I'm struggling to see why a nice clean / simple font like Open Sans Light doesn't look right in Firefox, but looks fine in Chrome and Safari. I guess even Chrome and Safari have some slight differences, but for the most part they look the same in those browsers.
http://503rephotography.com/_font/testfont.html - try and look at it in Firefox and then Chrome or Safari, and you will see what I mean...not sure what it looks like in IE and don't really care all that much to be honest... :) but the font in Firefox is kinda heavy and not quite the right shape, where it should be lighter and better looking. And it's not just this font, it's pretty much every font other than the basics like Arial or Verdana.
CSS
h1 {
font-size:2em;
font-family:OpenSansLight;
color:#000;
}
#font-face {
font-family: 'OpenSansLight';
src: url('fonts/OpenSans-Light-webfont.eot');
src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Light-webfont.woff') format('woff'),
url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
font-weight: normal;
font-style: normal;
}
HTML
<h1 align="center">Test... Open Sans Light</h1>
I looked around for an answer and most of the issues were just with a specific font, but I don't think that's the case here, as it applies to all of the ones I've tried, and I know they can look good in Firefox from viewing other sites.
Lots of sites use these fonts and look identical across browsers, are they using something like Adobe typekit in order to do this..? For a lot of these I've got the web font kit off fontsquirrel.com and it seems to work fine other than the inconsistencies. Any input is much appreciated...thanks!
All you need to do is to reset the h1 default weight, or include a bold version of the font.
h1 { font-weight: normal; }
The problem here is that h1 and other headline tags have font-weight: bold set as default. And since you've set the fonts font-weight propery to normal and there is no available bold font the browser, the browser will attempt to create a faux-bold version of your font. Which pretty much always ends up looking horrible.
Firefox seems to mess up fonts the most - on the other hand the text looks bold. Chrome and Safari doesn't alter fonts nearly as much, making them look sharper but not really bold at all. Just look at your sample - it's not very obvious that the text is bold.
A good article on the issue here: http://alistapart.com/article/say-no-to-faux-bold
I often embed webfont (#font-face) in sites that I develop and I have never encountered a major problem until today.
In fact, I feel there is a big issue with the line-height, I'm not extremely good at English so I'll try to illustrate it with pictures. I already contact the support from fontshop.com (where the font was bought) but they do not seem to understand / solve the problem.
What we had before with standard desktop font (= rendering is good for us):
What we had with the font-face (no change in CSS stylesheet):
Here is the CSS:
#content h1 {
background:#000000;
color:#FFFFFF;
font-family:"DINPro-Bold","Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
font-size:35px;
line-height:30px;
padding:10px;
text-transform:uppercase;
}
Usually font websites will have ways to configure the webfont package when you download it. I buy all my fonts from myfonts.com and under the advanced settings there are options for line-height adjustments. Try downloading the font using native line-height adjustments if this option is available. If not, try uploading the font to fontsquirrel's online font generator and upload the new version.
That's not the same font. The shape of the O and the curvature of the arm on the R give it away, which means the fallback fonts are being used, likely due to #font-face not loading properly. Different fonts will have different default spacing, as stated already, which would also lead you to believe it's a line-height issue.
Try making your fallback fonts something totally obvious, like:
font-family:"DINPro-Bold",serif;
This worked for me:
Generate the webfont at Font Squirrel. After uploading the fonts select 'Expert', scroll down and check the checkbox 'X-height Matching'. This resizes the height to match the x-height.
If you have problem with line-height of your webfont (especially if font suppose to be big in your project) try this: close your font in div or other block element and set "overflow" to "hidden". Div will have exact height of your font so any additional space will be cut off.
Try adding "position: relative; top: 5px;" to the "h1" tag
Try position: relative; paddint-top: 5px; padding-bottom: 0px;
Line height according to wikipedia
In typography, leading (rhymes with heading) refers to the amount of
added vertical spacing between lines of type.
This can be achieved like this...
.class{
line-height: 1em;
}
But if you are referring to the height of the letters then this is not something that can be adjusted. It is part of the font you have chosen to use.
Having issues getting specific background images to display in Firefox/Opera, all other browsers are playing ball (except obviously IE, for which I've had to compromise).
Currently, Opera won't allow multiple background images like so:
background-image: url('/images/h2_default_bg.png'), url('/images/dashed_bg_default.gif');
background-repeat: no-repeat, repeat-x;
background-position: top left, bottom left;
Also both Firefox and Opera are both being awkward when a background image is positioned in pixels:
background: url('/assets/images/dashed_bg.gif') bottom 2px repeat-x;
Are there any simple workarounds for either of these problems?
Multiple backgrounds are only supported starting from Firefox 3.6 and Opera 10.5. Are those the versions you're testing in? Chrome and Safari already support them, which I presume you mean with "all other browsers ... except obviously IE"
As for your second problem, the spec says this about the background-position syntax:
If two values are given and at least one value is not a keyword, then the first value represents the horizontal position (or offset) and the second represents the vertical position (or offset).
So you've given them in the wrong order. Make it 2px bottom instead.
Currently, Opera won't allow multiple background images like so:
Multiple background images like that are not possible in CSS2 / 2.1, which at the moment we still have to adhere to.
See this quirksmode page on which browsers currently support multiple backgrounds.
As for the other settings, background position definitely works across browsers, I'm not aware of any incompatibilies there. What exactly happens in Firefox and Opera?
As you found out, multiple backgrounds works in all the modern browsers. It does work in Opera as of version 10.5. There is no information on whether IE9 will have it nor if/when IE will ever support it.
I added a box-shadow to a section of a page recently to give it the same shadow border effect that is seen on Mac OS X apps. It looked great, but I noticed that scrolling up and down on the page made it lag. I usually only see this on pages that have annoying background images and tons of images and embedded videos plastered all over (cough MySpace cough). I originally decided to use box-shadow since I figured that it would remove the need to use an image, which would remove any possibility of scroll lag.
I know that CSS3 is still new, but is this the reason for the lag? Is the shadow being software rendered or something? When I apply the box shadow to smaller elements, it doesn't lag at all. I'm just wondering if anyone else has experienced this.
I just tried it on the Stack Overflow front page, on the #content div using Firebug with a setting of:
-moz-box-shadow: 1px 1px 10px;
And I did notice some scroll lag afterwards. I am using Firefox 3.5.
My question is, what are some alternatives to using this attribute if I want to add a Mac OS X style border to a section of my page?
On a side note, does anyone know if it is possible to apply the box shadow only to the top, left, and right sides of the element and not the bottom? I tried 1px -1px 10px but it still shows the shadow on the bottom. If I keep decreasing the second offset, it eventually removes the shadow from the bottom but then the top shadow is now way darker and bigger.
And yes, I have seen the articles on box-shadow at:
CSS3 Info
fredericiana's blog
Your best bet would be to use -moz-border-image instead. That should solve both your issues.
E.g. you could use an image like this,
, combined with CSS like this
-moz-border-image: url(shadow.png) 10 / 10px;
to create your shadow. And since you're using an image, you can leave out the bottom shadow as well, if you want.
You're not going to be able to remove the shadow from the bottom using -moz-box-shadow; it's not called "box shadow" for nothing. It applies a shadow to the entire box. You can't specify a shadow for each side separately like with border, say. The best you could do is fiddle around with the placement, blur and spread of the shadow. But that inevitably leads to a darker shadow on the opposite side.
I get the box shadow lag as well when I try it on Stackoverflow. It affects performance on Safari as well when I try -webkit-box-shadow, though it isn't as noticeable as in Firefox. The performance will hopefully improve in the future, but I presume the shadow will always have some impact since as far as I know it is software rendered.
This has been fixed in webkit as of two days ago. :)
https://bugs.webkit.org/show_bug.cgi?id=22102
You can pick up a chromium nightly to try it out.
I looked in FF3.6 and FF4 and don't see terrible scroll performance there, so it might be addressed there as well.
The issue still persists in Chrome for Android as of the current date. Some box-shadow combos result in a poor scrolling performance. In my case stacking two inset box-shadows (e.g. top / bottom) lead to the described problem. The only solution I can provide is to make the box-shadows less complex and try again...that worked for me. That's unsatisfactory but yeah instead u can also use the border-image solution or remove the affected box-shadow completely. Hope this gets fixed soon, finally. Btw the Android Version of Firefox does not have the problems anymore (for my css3). Moreover the desktop versions of both browsers are not affected in my case.
#shadow {
-moz-border-image: url(img.png) 10 / 10px; #Firefox under v15.0#
-webkit-border-image: url(img.png) 10 / 10px; #Safari, Chrome under v15.0, Android & iOS#
-o-border-image: url(img.png) 10 / 10px; #Opera under v15.0#
border-image: url(img.png) 10 / 10px; #IE v11+, other new Browser#
}
Cross browser version for old and new browser.
Simple img: http://i28.tinypic.com/2njzkt1.png
style :fixed for images too overload perfomance browser