Has anyone successfully been able to implement hyphenation in any of the WebKit browsers? I've tried the CSS3 hyphenation style as well as -webkit-hyphens: auto. No dice for either of those. Or maybe I'm doing something wrong?
Note: I've only tried Safari and Chrome on a Mac.
Update: Code example
<html>
<head>
<style>
div {
-webkit-hyphens: auto;
}
</style>
</head>
<body>
<div style="width: 150px; border: solid 1px black;">
<p>Anaideia, spirit of ruthlessness, shamelessness, and unforgivingness</p>
<p>Supercalifragilisticexpialidocious, Antidisestablishmentarianism, Floccinaucinihilipilification, Hippopotomonstrosesquipedaliophobia</p>
</div>
</body>
</html>
-webkit-hyphens works fine on iOS 4.2 and above, and is partially supported in the webkit nightlies.
Webkit:
iOS 4.3:
It works in Safari (tested with Safari 5.1 on OS X Lion, and Safari mobile on iPad), not with Chrome yet. See http://caniuse.com/css-hyphens for hyphens browser support.
Here is how paragraphs are styled in the 320 and up project (http://www.stuffandnonsense.co.uk/projects/320andup/):
p {
hyphens:auto;
text-align:justify;
-webkit-hyphens:auto;
-webkit-hyphenate-character:"\2010";
-webkit-hyphenate-limit-after:1;
-webkit-hyphenate-limit-before:3;
-moz-hyphens:auto;
}
(last line is for Firefox)
So justified text in browsers which was a big no-no is slowly becoming a reality.
Better days are coming.. After browsing the Editors working draft - In the instance provided I think the better property in future would be 'overflow-wrap:'. 'hyphens:' is really more suited to general formatting requirements, whereas overflow-wrap is for the emergency cases of overly long words that require breaking. The best value would be
* {
overflow-wrap:hyphenate.
}
Alas overflow-wrap doesen't seem to be supported in any way just yet on the iphone or firefox, and overflow-wrap:hyphenate isn't even in the working draft. (sadface)
Related
It seems the hyphens property doesn't work in Edge. caniuse.com says it's supposed to work with Edge 88 - which I have. But it ain't working. Throw on the -ms- vendor prefix and it works in Internet Explorer but not at all in Edge. (Odd that anything works in IE and not Edge.) The only thing that works in Edge is to bloat your HTML with soft hyphens all over the place () - and with that no CSS is needed. Buuuuuut - CSS hyphens:auto adds hyphens automatically without the need for . So - is caniuse.com wrong? Is there a hack to make auto hyphens work in Edge?
Edge 88 doesn't suppoet hyphens:auto. You can try the CSS Demo: hyphens in this page in Edge 88. Besides, the Browser compatibility table also shows only Edge 12+ (Edge Legacy) supports it. So maybe there's something wrong with caniuse.com.
As a workaround, you can use Hyphenopoly.js. It's a JavaScript-polyfill for hyphenation in HTML: it hyphenates text if the user agent does not support CSS-hyphenation at all or not for the required languages and it is a Node.js-module. You can test the example in Edge 88 and it works well:
At least since version 95 Edge chromium finally seems to support hyphens auto without third party libraries like Hyphenator or Hyphenopoly.
Here a small test using a modified version of the mdn test (without shy entities)
<html>
<head>
<style>
div {
hyphens: auto;
border: 1px dashed black;
}
</style>
</head>
<body>
<div style="width: 55px;" lang="en">An extremely long English word</div>
</body>
</html>
I have a page which displays just fine, in Firefox and Chrome. However, it has the content pushed past the bottom of the sidebar (as if I had a clear) in Internet Explorer 8 (I haven't tested any other IE versions). Does anyone know how to fix this?
The page is located here
Thanks,
Lemiant
You're missing the doctype for you page. Without it, IE will revert to quirks mode, which is essentially IE 5.5's rendering engine.
What you're observing is IE incorrectly computing widths for your elements, see here for a description on how IE 6 and older versions implement width.
For some reason that remains a mystery to me, IE thinks the #content element is wider than it should be.
This code did the trick for me:
#content {
line-height: 18px;
margin-right: 250px;
width: 550px;
width: 497px\9;
}
This makes all browsers use the width of 550px, and IE (all versions), 497px, which seems to be tha maximum it accepts. Hacky, but it works :D
EDIT: You're missing a !doctype. This might be the cause.
Firefox 3.5 now supports the nth-* pseudoclass, which was what I was using to target my css for Safari and Chrome. Now Firefox reads those too, causing minor layout issues. Does anyone know a way to specifically target FF 3.5+?
BODY:nth-of-type(1) #topsearch input[type=submit] /* Safari 3.1+ and Chrome */ {
height:19px
}
How about this, I tested it in Safari 4 and the height is 19px, in Firefox 3.5 the height displays as 39px.
<style>
BODY:nth-of-type(1) #topsearch input[type=submit] /* Safari 3.1+ and Chrome */ { height:19px }
BODY:nth-of-type(1) #topsearch input[type=submit], x:-moz-any-link, x:default { height: 39px; }
</style>
CSS Browser selector lets you write CSS that targets specific browsers, without worrying about hacks. I cannot recommend it highly enough.
On a "religious" note, we shouldn't be using CSS to target any browser. Unfortunately due to IE being waaaay behind on supporting CSS features (and all the bugs) hacks have been applied to target CSS for a given browser.
The Conditional Comments that IE uses... although ugly... do provide a handy mechanism for targeting a browser (and version)... I almost wish other browsers supported this.
I've seen a few sites do this... which is an interesting approach to handling targeting of various browsers.
<head>
<style>
body.safari form input{
/*special styles for Safari*/
}
body.firefox form input{
/*special styles for Firefox*/
}
body.firefox.v3-5 form input{
/*special styles for Firefox 3.5*/
}
</style>
</head>
<body>
<script>
//run code here, that sets the class and or id attribute on the body tag...
</script>
In the long run, they are all hacks... it just depends what kind of hacks you're willing to live with ;-)
Incidentally the "BODY:nth-of-type(1) ..." syntax breaks YUI compressor's ability to minify CSS. Instead I use "body:first-of-type ...".
My approach using a PHP class to detect os, browser and browser version. You can target any version of almost any browser on any operating system.
using http://rafael.adm.br/css_browser_selector/
just substitute this part:
is('firefox/2')?g+'
ff2':is('firefox/3')?g+' ff3'
for this part:
is('firefox/2')?g+'
ff2':is('firefox/3.5')?g+'
ff3_5':is('firefox/3')?g+' ff3'
that should do the trick
PS: if you want to also catch other 3.x versions you might want to add:
is('firefox/2')?g+'
ff2':is('firefox/3.5')?g+'
ff3_5':is('firefox/3.6')?g+'
ff3_5':is('firefox/3.8')?g+'
ff3_5':is('firefox/3')?g+' ff3'
This works:
#media screen and (-webkit-min-device-pixel-ratio:0){
#topsearch input[type=submit] { height:19px; }
}}
That targets newer WebKit browsers, and not Gecko or Trident.
A lot has changed in the last few years. For a Firefox 3.5+ hack, here is one I created for that purpose:
/* Firefox 3.5 and newer */
_:-moz-handler-blocked, :root .selector { property:value; }
To test it you can see these live along with many others for different versions of browser at my live CSS hacks test site here: http://browserstrangeness.bitbucket.org/css_hacks.html#firefox
Enjoy!
Recently a client has complained about the appearance of a system font in IE6. Basically th issue is that IE6 doesn't support font-smoothing/anti-aliasing (I know you can turn it on in an OS setting or something). But someone threw out this gem:
"You can force font anti-alias in css by using pt instead of px."
I did a quick POC in various browsers and saw no difference. I found one reference to it online, last post on this forum:
http://www.webmasterworld.com/css/3280638.htm
This sounds like the equivalent of a web developer urban myth, my feeling is it's BS. Has anyone ever encountered it?
Oh yes you can:
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
Source for Firefox, thanks Justin for the heads up.
There's these exciting new properties in CSS3:
font-smooth:always;
-webkit-font-smoothing: antialiased;
Still not done much testing with them myself though, and they almost definitely won't be any good for IE. Could be useful for Chrome on Windows or maybe Firefox though. Last time I checked, they didn't antialias small stuff automatically like they do in OSX.
UPDATE
These are not supported in IE or Firefox. The font-smooth property is only available in iOS safari as far as I remember
No, there's not really any way to control this as a web developer.
Small exceptions are that you can do some fake forcing of anti-aliasing by using Flash through sIFR, and some browsers won't anti-alias bitmap/pixel fonts (as they shouldn't, more info: Anti-Aliasing / Anti-Anti-Aliasing).
Also, as Daniel mentioned, it's ideal to be using em units for all fonts, see The Incredible Em & Elastic Layouts with CSS for more information about this.
I found a really awkward solution using the zoom and filter ms-only properties
Example (try with no aa, standard and cleartype):
http://nadycoon.hu/special/archive/internet-explorer-force-antialias.html
How it works:
-zoom up text with zoom:x, x>1
-apply some blur(s) (or any other filter)
-zoom down with zoom:1/x
It's a bit slow, and very! memory-hungry method, and on non-white backgrounds it has some slight dark halo.
CSS:
.insane-aa-4b { zoom:0.25; }
.insane-aa-4b .insane-aa-inner { zoom:4; }
.insane-aa-4b .insane-aa-blur { zoom:1;
filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);
}
HTML:
<div class="insane-aa-4b">
<div class="insane-aa-blur">
<div class="insane-aa-inner">
<div style="font-size:12px;">Lorem Ipsum</div>
</div></div></div>
You can use this short jQuery to force anti-aliasing, just add the ieaa class to anything:
$(function(){ $('.ieaa').wrap(
'<div style="zoom:0.25;"><div style="zoom:1;filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);"><div style="zoom:4;"><'+'/div><'+'/div><'+'/div>'
); });
Adding the following line of CSS works for Chrome, but not Internet Explorer or Firefox.
text-shadow: #fff 0px 1px 1px;
I disagree with Chad Birch. We can force anti-aliasing, at least in Chrome using a simple css trick with the -webkit-text-stroke property:-
-webkit-text-stroke: 1px transparent;
I say its a myth.
The only difference I've found between pt, px, and percent based fonts is in terms of what IE will scale when the Menu > View > Text Size > ?Setting? is changed.
IIRC:
the px and pt based fonts will NOT scale
percent based fonts scale in IE just fine
AFAIK:
The font anti-aliasing is mostly controlled by the windows setting for "ClearType" or in the case of IE7/IE8 the IE-specific setting for ClearType.
I think you got it a bit wrong. Someone in the thread you pasted says that you can stop anti-aliasing by using px instead of pt, not that you can force it by using the latter. I'm a bit sceptical to both of the claims though...
The px to pt fix worked for me on a site that uses a font from Google Web Fonts. On Win7 - IE8 it correctly fixed the lack of anti-alias rendering.
Using an opacity setting of 99% (through the DXTransform filters) actually forces Internet Explorer to turn off ClearType, at least in Version 7. Source
Here's a nice way to achieve anti-aliasing:
text-shadow: 0 0 1px rgba(0,0,0,0.3);
I doubt there is anyway to force a browser to do anything. It would depend on the system configuration, the font used, browser settings, etc. It sounds like BS to me too.
As a note, always use relative sizes not PX.
Seems like the most exhaustive solution can be found at http://www.elfboy.com/blog/text-shadow_anti-aliasing/. Works in Firefox and Chrome, although Firefox is not quite as effective as Chrome.
As a side note, Gecko and WebKit support the the
text-rendering
property as well.
Not a pure CSS but natively supported method without any font replacement hacks:
Simply convert your font to SVG and place it higher(before WOFF or TTF) in #font-face order. Voila! Fonts are smooth now, because they're no longer treated as a font but an SVG shape which will be nicely smoothened.
Note: I noticed that SVG can weight more than WOFF or TTF.
I found a fix...
.text {
font-size: 15px; /* for firefox */
*font-size: 90%; /* % restart the antialiasing for ie, note the * hack */
font-weight: bold; /* needed, don't know why! */
}
For IE 6 we have plenty of bugs to bug us as a designer.
incorrect box model etc etc.
i have searched for fixes via JavaScript and found
[link text][1]
IE7.js
IE7 is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.
but do we have real life saver other than javascript via css.
Ways to deal with IE6 bugs with CSS? Sure.
See: http://www.quirksmode.org/css/condcom.html
for conditional comments
There are other ways, such as adding some specific characters in some CSS properties that get ignored in some browsers but not in others.
However, in some cases, web designers should be very cautious when using these.
The alternative is to live within the IE 6 world of bugs and design your pages to look right despite them. You can serve up different css for your IE6 clients, or even different html if necessary, depending on your design. In some cases, you can use one CSS file that will mean different things to IE6 clients, but that technique is problematic with respect to IE7 and 8.
this link is also handy one
How do you deal with Internet Explorer?
I never knew this - thanks svinto
"IE6 doesn't have the incorrect box model unless you have the wrong doctype. – svinto"
There are some simple stylesheet hacks that can modify the presentation in various internet explorer versions to solve your CSS problems. For example these three:
Simplified box model hack for IE4, IE5, IE5.5:
div.values { margin: 10px; m\argin: 20px; }
star html hack for IE4, IE5, IE5.5 and IE6:
* html div.values { margin: 5px; }
star first-child+html hack for IE7:
*:first-child+html div.values { margin: 5px; }
PNG transparancy issues could be solved with solutions like this:
<div style="width:50px;height:50px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/logo/logo.png');">
<img src="/images/logo/logo.png" height="50" width="50" alt="" style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" />
</div>
Great info so far but one thing to note is that IE7.js doesn't fix pngs in all cases (at least last I looked). For instance, you won't be able to tile a background image with transparency.
In the case of DXImageTransform you may find that when this is applied to elements that contain links, those links are no longer 'clickable'. You can sometimes fix this by giving the parent element that has the transform applied to it static positioning and to position the child anchor element e.g.,
h2{
position:static;
zoom:1;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/mypng.png", sizingMethod="scale");
}
h2 a{
position:relative;
}
<h2><a href="" >a link!</a></h2>
If you have to do this sort of garbage put it in a separate stylesheet and control loading with conditional comments. If the design is of any complexity try you best not to support ie6 or <. If you can't avoid doing it, charge more ;). Sometimes that is enough to persuade someone that supporting ie6 isn't "worth their while".
why don't you try FireBug Light for IE? It's not as powerful as FireFox FireBug but can be helpful
Many bugs can be worked around in CSS using conditional comments or CSS selector hacks. But there are some bugs that CSS hacks alone cannot handle such as IE6's .multiple.class.selector.bug
There's another quick and dirty hack for IE6 styles
for e.g.
You can define the CSS as;
.divTitle
{
padding: 5px;
width: 600px;
_width: 590px;
}
All the other browsers picks up 600px as the width value & IE6 overwrites it & take 590px;
I've tested this in IE7 & FF as well.
Also you may want to check this link;
link text