[xwiki-devs] IE issue with placing the caret at the beginning of a text node
Hi devs, To explain the issue lets consider the following scenario: * Edit a new page with the new WYSIWYG editor. * Type "foobar" and place the caret as in "foo|bar", where the pipe represents the caret. * Press the Bold button or type CRTL+B in order to start typing bold text at the current insertion point. * At this moment, the HTML should be "foo<strong>|</strong>bar" where the pipe represents the caret. The Problem In Mozilla it's easy to place the caret as suggested. In IE it's impossible (this weekend I tried all sort of things and search desperately on Google..). What I can easily do in IE is either "foo|<strong></strong>bar" or "foo<strong></strong>|bar". The workaround that I found is to use a special space symbol http://en.wikipedia.org/wiki/Zero-width_non-joiner inside the strong tag (before, it had an empty text node inside) and place the caret just after this special space symbol. PROs: * When the use will type the text will be bold. CONs: * Although the space character is not visible you have to jump over it while navigating with the arrow keys. * Although we can remove these special symbols before converting to wiki syntax, the user will have them when copy&pasting. I'm in favor of using this special space symbol. WDYT? Thanks, Marius. P.S.: I need your opinion ASAP, thanks!
Marius Dumitru Florea wrote:
Hi devs,
To explain the issue lets consider the following scenario:
* Edit a new page with the new WYSIWYG editor. * Type "foobar" and place the caret as in "foo|bar", where the pipe represents the caret. * Press the Bold button or type CRTL+B in order to start typing bold text at the current insertion point. * At this moment, the HTML should be "foo<strong>|</strong>bar" where the pipe represents the caret.
The Problem
In Mozilla it's easy to place the caret as suggested. In IE it's impossible (this weekend I tried all sort of things and search desperately on Google..). What I can easily do in IE is either "foo|<strong></strong>bar" or "foo<strong></strong>|bar". The workaround that I found is to use a special space symbol http://en.wikipedia.org/wiki/Zero-width_non-joiner inside the strong tag (before, it had an empty text node inside) and place the caret just after this special space symbol.
PROs: * When the use will type the text will be bold.
CONs: * Although the space character is not visible you have to jump over it while navigating with the arrow keys. * Although we can remove these special symbols before converting to wiki syntax, the user will have them when copy&pasting.
I'm in favor of using this special space symbol. WDYT?
I would be for some limitations and inconsistencies between browsers (like not being able to start writing bold but only select and boldify in IE) than for inserting an obscure character and mess up copy-paste and navigation. I really don't like the idea of this character, even if it won't endup in the actually saved content. Happy coding, Anca
Thanks, Marius.
P.S.: I need your opinion ASAP, thanks! _______________________________________________ devs mailing list devs@xwiki.org http://lists.xwiki.org/mailman/listinfo/devs
Anca Paula Luca wrote:
Marius Dumitru Florea wrote:
Hi devs,
To explain the issue lets consider the following scenario:
* Edit a new page with the new WYSIWYG editor. * Type "foobar" and place the caret as in "foo|bar", where the pipe represents the caret. * Press the Bold button or type CRTL+B in order to start typing bold text at the current insertion point. * At this moment, the HTML should be "foo<strong>|</strong>bar" where the pipe represents the caret.
The Problem
In Mozilla it's easy to place the caret as suggested. In IE it's impossible (this weekend I tried all sort of things and search desperately on Google..). What I can easily do in IE is either "foo|<strong></strong>bar" or "foo<strong></strong>|bar". The workaround that I found is to use a special space symbol http://en.wikipedia.org/wiki/Zero-width_non-joiner inside the strong tag (before, it had an empty text node inside) and place the caret just after this special space symbol.
PROs: * When the use will type the text will be bold.
CONs: * Although the space character is not visible you have to jump over it while navigating with the arrow keys. * Although we can remove these special symbols before converting to wiki syntax, the user will have them when copy&pasting.
I'm in favor of using this special space symbol. WDYT?
I would be for some limitations and inconsistencies between browsers (like not being able to start writing bold but only select and boldify in IE) than for inserting an obscure character and mess up copy-paste and navigation. I really don't like the idea of this character, even if it won't endup in the actually saved content.
That would mean we would have different implementations at the high level whereas using this special symbol allows me to have the same logic in the application at the high lever and different implementation just at the lower level (only different implementations for the Range class -- all that is build on top of it is cross-browser). Thanks Anca, Marius
Happy coding, Anca
Thanks, Marius.
P.S.: I need your opinion ASAP, thanks! _______________________________________________ devs mailing list devs@xwiki.org http://lists.xwiki.org/mailman/listinfo/devs
devs mailing list devs@xwiki.org http://lists.xwiki.org/mailman/listinfo/devs
Marius Dumitru Florea wrote:
Anca Paula Luca wrote:
Marius Dumitru Florea wrote:
Hi devs,
To explain the issue lets consider the following scenario:
* Edit a new page with the new WYSIWYG editor. * Type "foobar" and place the caret as in "foo|bar", where the pipe represents the caret. * Press the Bold button or type CRTL+B in order to start typing bold text at the current insertion point. * At this moment, the HTML should be "foo<strong>|</strong>bar" where the pipe represents the caret.
The Problem
In Mozilla it's easy to place the caret as suggested. In IE it's impossible (this weekend I tried all sort of things and search desperately on Google..). What I can easily do in IE is either "foo|<strong></strong>bar" or "foo<strong></strong>|bar". The workaround that I found is to use a special space symbol http://en.wikipedia.org/wiki/Zero-width_non-joiner inside the strong tag (before, it had an empty text node inside) and place the caret just after this special space symbol.
PROs: * When the use will type the text will be bold.
CONs: * Although the space character is not visible you have to jump over it while navigating with the arrow keys. * Although we can remove these special symbols before converting to wiki syntax, the user will have them when copy&pasting.
I'm in favor of using this special space symbol. WDYT? I would be for some limitations and inconsistencies between browsers (like not being able to start writing bold but only select and boldify in IE) than for inserting an obscure character and mess up copy-paste and navigation. I really don't like the idea of this character, even if it won't endup in the actually saved content.
That would mean we would have different implementations at the high level whereas using this special symbol allows me to have the same logic in the application at the high lever and different implementation just at the lower level (only different implementations for the Range class -- all that is build on top of it is cross-browser).
What if we have the same logic highlevel and, well, as much as I hate saying it, buggy behaviour on IE? How buggy would that make it?
Thanks Anca, Marius
Happy coding, Anca
Thanks, Marius.
P.S.: I need your opinion ASAP, thanks! _______________________________________________ devs mailing list devs@xwiki.org http://lists.xwiki.org/mailman/listinfo/devs
devs mailing list devs@xwiki.org http://lists.xwiki.org/mailman/listinfo/devs
devs mailing list devs@xwiki.org http://lists.xwiki.org/mailman/listinfo/devs
The third option is to have a different behavior in IE, i.e. bold the whole word at the caret location when you hit bold. Especially if all existing wysiwyg browsers do this. The proposed solution sounds a bit hackish and complex. I don't have a better opinion for now. Thanks -Vincent On Oct 27, 2008, at 12:17 PM, Marius Dumitru Florea wrote:
Hi devs,
To explain the issue lets consider the following scenario:
* Edit a new page with the new WYSIWYG editor. * Type "foobar" and place the caret as in "foo|bar", where the pipe represents the caret. * Press the Bold button or type CRTL+B in order to start typing bold text at the current insertion point. * At this moment, the HTML should be "foo<strong>|</strong>bar" where the pipe represents the caret.
The Problem
In Mozilla it's easy to place the caret as suggested. In IE it's impossible (this weekend I tried all sort of things and search desperately on Google..). What I can easily do in IE is either "foo|<strong></strong>bar" or "foo<strong></strong>|bar". The workaround that I found is to use a special space symbol http://en.wikipedia.org/wiki/Zero-width_non-joiner inside the strong tag (before, it had an empty text node inside) and place the caret just after this special space symbol.
PROs: * When the use will type the text will be bold.
CONs: * Although the space character is not visible you have to jump over it while navigating with the arrow keys. * Although we can remove these special symbols before converting to wiki syntax, the user will have them when copy&pasting.
I'm in favor of using this special space symbol. WDYT?
Thanks, Marius.
P.S.: I need your opinion ASAP, thanks! _______________________________________________ devs mailing list devs@xwiki.org http://lists.xwiki.org/mailman/listinfo/devs
Vincent Massol wrote:
The third option is to have a different behavior in IE, i.e. bold the whole word at the caret location when you hit bold. Especially if all existing wysiwyg browsers do this.
The proposed solution sounds a bit hackish and complex.
Hackish yes, complex no.
I don't have a better opinion for now.
I talked with Marta and she noticed that Open Office has the same behavior as IE: the whole word becomes bold and not just the insertion point, the only exception being when the caret is not inside a word. I'll raise a vote on this. Thanks, Marius
Thanks -Vincent
On Oct 27, 2008, at 12:17 PM, Marius Dumitru Florea wrote:
Hi devs,
To explain the issue lets consider the following scenario:
* Edit a new page with the new WYSIWYG editor. * Type "foobar" and place the caret as in "foo|bar", where the pipe represents the caret. * Press the Bold button or type CRTL+B in order to start typing bold text at the current insertion point. * At this moment, the HTML should be "foo<strong>|</strong>bar" where the pipe represents the caret.
The Problem
In Mozilla it's easy to place the caret as suggested. In IE it's impossible (this weekend I tried all sort of things and search desperately on Google..). What I can easily do in IE is either "foo|<strong></strong>bar" or "foo<strong></strong>|bar". The workaround that I found is to use a special space symbol http://en.wikipedia.org/wiki/Zero-width_non-joiner inside the strong tag (before, it had an empty text node inside) and place the caret just after this special space symbol.
PROs: * When the use will type the text will be bold.
CONs: * Although the space character is not visible you have to jump over it while navigating with the arrow keys. * Although we can remove these special symbols before converting to wiki syntax, the user will have them when copy&pasting.
I'm in favor of using this special space symbol. WDYT?
Thanks, Marius.
P.S.: I need your opinion ASAP, thanks! _______________________________________________ devs mailing list devs@xwiki.org http://lists.xwiki.org/mailman/listinfo/devs
_______________________________________________ devs mailing list devs@xwiki.org http://lists.xwiki.org/mailman/listinfo/devs
Marius Dumitru Florea wrote:
Hi devs,
To explain the issue lets consider the following scenario:
* Edit a new page with the new WYSIWYG editor. * Type "foobar" and place the caret as in "foo|bar", where the pipe represents the caret. * Press the Bold button or type CRTL+B in order to start typing bold text at the current insertion point. * At this moment, the HTML should be "foo<strong>|</strong>bar" where the pipe represents the caret.
The Problem
In Mozilla it's easy to place the caret as suggested. In IE it's impossible (this weekend I tried all sort of things and search desperately on Google..). What I can easily do in IE is either "foo|<strong></strong>bar" or "foo<strong></strong>|bar". The workaround that I found is to use a special space symbol http://en.wikipedia.org/wiki/Zero-width_non-joiner inside the strong tag (before, it had an empty text node inside) and place the caret just after this special space symbol.
Question: does IE support clicking bold outside/at the start/end of the word? For example: * Type " foo bar " * What happens when the cursor is like: "| foo bar "? * What happens when the cursor is like: " |foo bar "? * What happens when the cursor is like: " foo| bar "? * What happens when the cursor is like: " foo |bar "? * What happens when the cursor is like: " foo bar| "? * What happens when the cursor is like: " foo bar |"? * What happens when the cursor is like: " foo | bar "? If the " foo | bar " case works fine, then this is just another example of how IE is so incredibly wrongly coded... These cases (along with "foo|bar") should be tested in several browsers and see what's happening. -- Sergiu Dumitriu http://purl.org/net/sergiu/
Sergiu Dumitriu wrote:
Marius Dumitru Florea wrote:
Hi devs,
To explain the issue lets consider the following scenario:
* Edit a new page with the new WYSIWYG editor. * Type "foobar" and place the caret as in "foo|bar", where the pipe represents the caret. * Press the Bold button or type CRTL+B in order to start typing bold text at the current insertion point. * At this moment, the HTML should be "foo<strong>|</strong>bar" where the pipe represents the caret.
The Problem
In Mozilla it's easy to place the caret as suggested. In IE it's impossible (this weekend I tried all sort of things and search desperately on Google..). What I can easily do in IE is either "foo|<strong></strong>bar" or "foo<strong></strong>|bar". The workaround that I found is to use a special space symbol http://en.wikipedia.org/wiki/Zero-width_non-joiner inside the strong tag (before, it had an empty text node inside) and place the caret just after this special space symbol.
Question: does IE support clicking bold outside/at the start/end of the word? For example:
* Type " foo bar " * What happens when the cursor is like: "| foo bar "? * What happens when the cursor is like: " |foo bar "? * What happens when the cursor is like: " foo| bar "? * What happens when the cursor is like: " foo |bar "? * What happens when the cursor is like: " foo bar| "? * What happens when the cursor is like: " foo bar |"? * What happens when the cursor is like: " foo | bar "?
If the " foo | bar " case works fine, then this is just another example of how IE is so incredibly wrongly coded...
These cases (along with "foo|bar") should be tested in several browsers and see what's happening.
IE behaves exactly as Word. The answer to all your questions is: They don't insert a strong element immediately, but just as soon as you type a letter. And this is the right behavior, I think. On the contrary, I insert the strong element right away and that's why I need to place the caret inside it. I'll change my implementation to delay the insertion of the strong element, thus avoiding the use of the special space symbol. Thanks, Marius.
participants (4)
-
Anca Paula Luca -
Marius Dumitru Florea -
Sergiu Dumitriu -
Vincent Massol