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>
Related
I'm struggling with the different ways browsers handle hyphenation for justified text from line to line. I have the following css settings for my text:
text-align: justify;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
My language setting is en. One word that is being handled inconsistently is "expressing":
Chrome: no hyphenation
Firefox: express-ing [correct!]
IE11: express-ing [correct!]
Safari: express-ing [correct!]
Bafflingly, Safari is able to hyphenate the German word "Gesamtkunstwerk":
Chrome: no hyphenation
Firefox: no hyphenation
IE11: no hyphenation
Safari: Gesamtkunst-werk [correct!]
I have no idea how Safari is sensing that the word is German and is hyphenating it. Any ideas?
The CSS3 specification indicates a hyphenate-resource option, but I've found no example files to include and/or edit. Ideally, if that option is supported among the major browsers, I'd include it and want to edit it for non-English words as well as editing its defaults.
What is the best approach?
I'm struggling with the different ways browsers handle hyphenation for
justified text from line to line.
Method 1. CSS
See this link for a CSS only solution.
article p{
text-align: justify;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
You have already tried this, and found out that there is absolutely no support for Chrome no matter the browser version, and have seen the lack of consistency of the results across the browsers. And probably wondered is there a more consistent way to hyphen words that works well on ALL major browsers everyhere?
Method 2. Javascript
Hyphenator.js is a Javascript library solution that works on ALL major browsers. And... with even more language support than most browsers offer at the moment. First select one (or multiple) languages you need hypening support in your site, then follow the steps and customise your own script, then finally click on "Create!" which will create the minified javascript for you. You copy that into your hyphenate.js file, and finally don't forget to define the class on the paragraphs you want to be hyphenated.
<head>
<script src="hyphenate.js" type="text/javascript"></script>
</head>
<body>
<article lang="nl" class="hyphen"> // in this case Dutch >> NL
<p>.......</p>
</article>
</body>
Note: notice I customized the class and shortened to hyphen instead of the default hyphenate
I was playing around with this CSS in my IE9 browser:
className{border: red solid 1px; *border: black solid 1px;}
In IE 8,9 the border is shown red.
When I turn on IE 7 compatibility mode, I see the
black border.
It looks liks the *border syntax is a fallback only for IE.
Does anyone know about this star (*) CSS rule & what does it do?
How well does it work for which browsers?
It is incorrect CSS so not parsed in most (good) browsers. Older IE however parses it as valid CSS and applies the rule. Using an underscore works in the same way.
See here for further information, or here
This is different to the use of the asterisk as a universal selector in CSS
*+html SELECTOR {}
targets only IE7 and keeps the CSS valid. This should be prefered.
The only time I ever use the star is for the inline block fix for ie7, the star just allows you to target ie6 (from i remember) as well as ie7. You can also use an exclamation mark to target ie7 if you're feeling lazy (!border:1px solid #000)
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)
I just discovered the box-sizing: border-box CSS property which solves a bunch of cross browser layout problems for me.
The only issue I now have is that IE7 doesn't seem to support it. Is there a hack to get IE7 to support it?
There are several ways to do this, none perfect.
As you point out:
Firefox / Opera / Safari / Chrome / IE8+ will recognise the box-sizing property allowing you to use border-boxes.
IE6 will use the old school (correct?) border-box model by default.
However IE7 uses the W3C padding box model when in standards mode, and will not recognise the CSS box-sizing property so there's no way to revert to the border box model. If you need to support IE7 (and you probably still do), you're stuck with one of four options:
1. Conditional Comments:
<!--[if IE 7]>
Special instructions for IE 7 here
<![endif]-->
Use box-sizing for IE8 and 9, then make specific overrides for IE7. This option will be painful.
2. The Schepp Box Sizing Polyfill:
https://github.com/Schepp/box-sizing-polyfill
This excellent Polyfill is an HTC file which modifies the default browser behavior in IE6 and 7 so they use the W3C box model. It's fine for light use, but may cause problems of it's own if used extensively. Use with caution and TEST.
3. Old Style Nested Divs:
The old style nested div approach is still a fine way:
<div style="width:100px; border:1px solid black">
<div style="margin:10px">
Content
</div>
</div>
A non-semantic nested div provides the padding indirectly, with the disadvantage that your markup becomes untidy. Obviously don't use inline styles, I'm using them here for the sake of illustration.
The old adage Never use padding on a fixed width element still stands true.
4. My Preferred Solution - A Direct Child Selector:
The other way round this is with the direct child selector. Say you have a fixed width div containing some content:
<div class="content">
<h1>Hi</h1>
<p>hello <em>there</em></p>
</div>
You can then write a rule to add left and right margins to all the direct children of the div:
.content {
width:500px;
padding:20px 0;
}
.content > * {
margin:0 20px;
}
This will add a little margin to the h1 and p, but not to the nested em, giving the appearance of 20px padding on the content div, but without triggering the box model bug.
5. Consider Dropping IE7 support
IE7 is the last browser not to recognise the box-sizing property. If you're getting little traffic from IE7, you might consider dropping support. Your CSS will be much nicer.
As of late 2013, this is my preferred option.
2017 EDIT: It's probably long past time to drop support for IE7 now, and just use border-box.
You can use a polyfill to make it work on some items, it didn't work for my input fields though.
https://github.com/Schepp/box-sizing-polyfill
box-sizing: border-box;
*behavior: url(/css/boxsizing.htc);
Just note that the behavior url is relative to the page and not the css file. Use relative paths to site's root (start the url with an slash and then go from there).
I'm assuming you're using this to get around the IE6 box model. Unfortunately, there really is no general way to trick earlier versions of IE into supporting arbitrary CSS properties.
I would recommend not using the box-sizing property, because every browser other than IE6 will implement the box model correctly. The Wikipedia article does a good job of explaining how IE6 differs.
To solve this, I recommend using a separate style sheet for IE6, and including it using IE conditional comments. In your IE6 style sheet, you can specify different widths/heights/padding/margins to make your layout look consistent. You can include a style sheet for IE6 only like this:
<!--[if IE 6]>
<link href="ie6sucks.css" rel="stylesheet" type="text/css" />
<![endif]-->
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