I am using this bit of jQuery:
$('.myClass').html().replace("-", "‑");
to replace hyphens with non-breaking hyphens to prevent wrapping on text containing....you guessed it: hyphens
This works fine in IE8 and upwards but we have to support IE6 and 7, in which this approach does not work.
Any ideas?
I believe it is because IE 6-7 see a hyphen as a "word break".
The only way I can think to fix it is to wrap the phrase in <nobr></nobr> tags.
Eg. <nobr>word-break</nobr> which should prevent your issue.
Though without seeing some context it's hard to say how you would do this.
EDIT
This info may be helpful: http://www.cs.tut.fi/~jkorpela/html/nobr.html
Related
is awesome, especially because it works in all popular browsers. You put it in the middle of a word, which tells the browser that the word may be broken in that place. If it does get broken there, a hyphen appears. If it doesn't, the character remains invisible.
But it's not very easy to use for content authors: you have to go into the HTML to add it. Even if you can add it in a CMS, you can't see where it is as soon as you inserted it.
So I went ahead and declared an inline style in my CMS for my authors to use. They can select part of a word, for example <span class="shy">communi</span>cation, and then a css rule will magically add the using an :after pseudo-element! And with some CMS-specific CSS I can give that tag a dotted underline to show that it's got one of those soft hyphens. Works in Firefox and IE8+. Neat.
But the hyphen doesn't appear in Google Chrome! It breaks the word, but there's no dash. I knew it didn't support the hyphens css property, but it does normally support .
But all right, so I removed the css style and wrote some javascript to add upon load. Using jQuery, I tried both .append and .after. I even tried innerHTML += ''. None of them work! How disappointing...
How to work around this?
I figured out a solution while writing this question.
seems to work in Chrome only if there is another character right after it (and before it). The issue above is that the character is always the last one within the tag. So I added a space and then closed that space with css. Unfortunately this does not work with a css pseudo element, so I still needed javascript.
I did need to use browser detection because adding the space made it stop working in Internet Explorer and Firefox. (using makes it work in Firefox, but not IE)
$(".shy").each(function(){
this.innerHTML += ' '; // add the soft hyphen (for all browsers)
// Only Chrome has an issue
if(/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) {
this.innerHTML += ' '; // add a space
$(this).css('margin-right', '-.26em'); // close the gap from the space
}
});
To be used like this:
<span class="shy">communi</span>cation
Server side, I build a list of strings which are the option text of an html select multiple.
Every string is the result of the concatenation of four strings. First, second and third have a length=5. Third string has a variable length, so I complete its length to 19 chars with white spaces:
StringUtils.rightPad(data.toUpperCase(), 19, " ");
Nevertheless, in my html page, these whites spaces are removed.
I have looked for similar problems in this web and others, I have tried with & nbsp;, \u0020, I have tried with css style white-space:pre-wrap;, I have tried a lot of things but white spaces are not preserved.
Any one knows how to solve this problem without javascript? only with html/styles.
Thank you, regards
The default styling in webpages is to collapse whitespace, you can easily change this with the white-space property in CSS:
p {
white-space: pre;
}
The values pre and pre-wrap preserve whitespace, the difference between them being that pre will only wrap the text on line-breaks, whereas pre-wrap will wrap on all whitespace characters (like regular text. Your question states that you have tried this and it did not work, however I have tested this code and it worked fine for me (using Google Chrome) and the W3C reference says that it works in all major browsers, therefore I suspect it is a mistake in implementation, try again and double-check you are applying styles to the correct class and there are no specificity issues.
I don't speak Arabic, but I need specific support for Arabic on our web. I need parts of Arabic words to be in a <span> with a different style than the rest of word. When I type two characters ش and س, they are composed into word شس, but when I use HTML markup
<span>ش</span>س
these letters are not concatenated right in the output.
In the picture, desired output is on second line, actual output is on first line.
EDIT: It works on Firefox, but does not work in Chrome/Safari.
Insert a zero-width joiner (e.g. using the entity reference ) at the end of the span element content: <span>ش</span>س.
More generally, the zero-width joiners at the start and end of each span element as well as (just to be more sure) before and after each span element, in situations where the text should have cursive (joining) behavior and span may break it.
The issue is discussed and illustrated on the Bidirectional text page by Andreas Prilop.
Update: Unfortunately, it seems that even does not help on current versions of WebKit browsers. They seem to treat HTML markup as breaking joining behavior, no matter what.
Update 2: As described in #NasserAl-Wohaibi’s comment, the new problem can be solved by using twice. However, in current Safari (5.1.7) for Windows, it does not help; in fact, it displays even شس wrong whereas without the joiner, it shows شس correctly.
This is actually a reported bug in WebKit, thus presumably affects all WebKit-based browsers.
As Jukka K. Korpela indicated, This is mostly a bug in most WebKit-based browsers(chrome, safari, etc).
A simple hack other than the TAMDEED char or getting contextual forms for Arabic letters would be to put the zero-width-joiner ( or ) before/after the letter you want to be treated as single Arabic ligature - two chars making up another one. e.g.
<p>عرب<span style="color: Red;">ي</span></p>
demo: jsfiddle
see also the webkit bug report.
I was reading a book about AJAX and the writer said that one should always add a space inside of empty div tags so as to not risk compatibility problems in "some browsers".
So this would be wrong <div></div> and this would be right <div> </div>.
Question: Is he an idiot or does he know something?
Thank you.
He's not an idiot. IE 8 (possibly earlier versions as well?) will subtly mess up your layout if your empty div is really empty; adding a comment seems to be the suggested way of dealing with it, but apparently a space works as well.
i usually add instead of the empty space!
I would add a comment so that nothing is displayed. This does cause problems in ie8 for some reason!
Firefox and seems to render a hyphen followed by differently to other browsers. Here is some test code that demonstrates the problem:
<html>
<body>
<div style="border: 1px solid blue;width: 50px">
This text can break. Do not - break this text.
</div>
</body>
</html>
Notice how in Firefox the second sentence does not break, but in Chrome and IE it breaks at the hyphen.
Does anyone know a good workaround so that the break does not occur?
The problem is that the "minus" sign in your code allows breaking.
There are lots of ways how you can write a "horizontal line" in HTML. –, —, -. There is "A list apart" article describing all the possible ways.
But also several specific Unicode characters exist which can be used by their code point numbers. One of them is a "non-breaking hyphen", which can be written like this: ‑.
I tried using it in your example and now the text does not break.
Naivist has the answer, but, for the record, I ended up using CSS's white-space: nowrap;