Created by: gwideman, Jul 18, 2013 2:20 am
Revised by: gwideman, Jul 18, 2013 3:29 am (9 revisions)

Overview

Wikispaces uses br tags instead of paragraph tags to delineate paragraphs. Thus the usual means to control inter-paragraph spacing -- supplying css for the p tag -- is not available.
One might expect to style the br tag, but unfortunately br is not a normal tag, and it's not obvious how to style it in a way that has the desired effect, and works across browsers.
Furthermore, the mce editor injects additional br tags, and uses the br tags in a special way which is apt to be defeated by some css settings we might wish to make.
Not being a normal tag, br does not appear in listings of browsers' default markup and attributes, and consequently, though we can change br's attributes, so far as I can see we don't have a way to reset them to "normal". This will become important in trying to get br to behave properly in mce.

First pass: display block

The first pass at css that mostly works is this:
.wiki  br {
   content: ""         ;
   display: block      ;
   margin: 0 0 1.5em 0   ;
}
 
.wiki table br,
.wiki .gwsitetoc br {
   margin: 0 0 0 0     ;
}
Results (on Windows):
Browser
Effect
Firefox 22
Adds space between paragraphs as desired
IE 10
No effect
Chrome 28
Adds space between paragraphs as desired
Opera 12
Adds space between paragraphs as desired
Safari 5.1.7
Adds space between paragraphs as desired


So, pretty close to a success.
However, setting display: block results in very messy behavior in the mce editor. This is attributable to mce injecting a lot of additional <br> </br> tags (with mce_bogus="1" attributes. See: www.tinymce.com/forum/viewtopic.php?pid=51333. These are apparently intended to enable the cursor to move to all possible locations. If we mess with the br tag, then cursor positioning doesn't work properly, and "empty" table cells are initially drawn tiny.
Changing to display:inline-block allowed mce to work properly in Firefox. For reading in Firefox the desired paragraph spacing appears, but not in other browsers.:
Browser
Effect
Firefox 22
Adds space between paragraphs
IE 10
No effect
Chrome 28
Paragraph spacing does not appear; and other strange line spaces do appear.
Opera 12
Paragraph spacing does not appear; and other strange line spaces do appear.
Safari 5.1.7
Paragraph spacing does not appear; and other strange line spaces do appear.


Second pass: Separate css for the editor?

If we revert to the CSS shown above (with display: block), can we separately set some CSS for the editor? A challenge here is that:
  • Wikispaces requires our stylesheet rules to have a qualifier that includes class .wiki.
  • The immediate container for the editor text is the body element (inside mce's iframe), which has:
    • id="tinymce"
    • class="mceContentBody wiki"
  • To make a rule apply only to the editor, we need to use .wiki and either #tinymce or .mceContentBody. But
    • It's not clear which combinations wikispaces will allow. At one point wikispaces parser only recognized ".wiki" if it stands by itself.
    • It's not clear whether browsers reliably detect rules with multiclasses on the same element, or id plus class.
Attempt 1:
.wiki  br {
   content: ""         ;
   display: block      ;
   margin: 0 0 1.5em 0   ;
}
 
.wiki table br,
.wiki .gwsitetoc br {
   margin: 0 0 0 0     ;
}
 
.mceContentBody.wiki br {
   display: inline       ;
   margin: 0  ;
}
Results:
Browser
Viewing page
Editing page
Firefox 22
Adds space between paragraphs, as intended
Cursor and tables work
IE 10
No effect
Cursor and tables work. (But can't edit inside code block? Hmmm)
Chrome 28
Adds space between paragraphs, as intended
Code block appears with no newlines(ie: one long wrapped text).
New tables appear small.
Cursor navigation not too bad.
Opera 12
Adds space between paragraphs, as intended
Cursor navigation poor.
Code block appears with no newlines (ie: one long wrapped text).
New tables appear with tiny cells. Inserting content expands the cells.
Safari 5.1.7
Adds space between paragraphs, as intended
Similar problems as Opera.
Using inspect to change br to block fixes the code block, but breaks cursor in tables.



Bottom line: We get good viewing in all browsers except IE, and acceptable editing in Firefox. That's not a commercially acceptable outcome, but it works for me and it's as much as I have the patience for, considering this entire detour is a band aid to fix wikispaces not using paragraph tags.