• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Work with all your cloud files (Drive, Dropbox, and Slack and Gmail attachments) and documents (Google Docs, Sheets, and Notion) in one place. Try Dokkio (from the makers of PBworks) for free. Now available on the web, Mac, Windows, and as a Chrome extension!


Quirks of the WYSIWYG Editor you need to watch out for

Page history last edited by PBworks 14 years, 2 months ago

To call the Wiki's default Editor WYSIWYG, (What You See Is What You Get),  is wildly inaccurate, to say the least.  Though the editor is powerful and quite easy to use, it has some serious bugs, and if you do not keep them in mind while composing your articles, the finished product may bear little resemblance to what you see in the editor.  Most of these bugs relate to the side-bar, which is always present in the finished article, but which is nowhere to be seen in the editor.  To ensure that your text formatting and images appear as intended in the finished article, you must imagine that the side-bar is there, occupying the right-most third of the page, and manually break your text at that point, by hitting the Enter key when your text line reaches approximately 640 pixels in length.  An easy way to know where to break your text is to insert your first image, which is sized to exactly 640 pixels wide, then use it as a guide.  When your text line is even with the right edge of the picture, click Enter to break your text.  Repeat this for each line of text.  For the same reason, you must also constrain the images you insert to no more than 640 pixels wide.  Sometimes the automatic word-wrap will work okay, but more often than not it will introduce large gaps, and random line feeds into your text body, making it look very unprofessional. 


Below I have inserted an image which is sized properly to less than 640 pixels wide.  As you can see it fits neatly

in the space to the left of the side-bar.



The next image is too wide, at 700 pixels.  Even though it looks like it would easily fit in the available space,

the actual area allottted to the side-bar is wider than than it appears, and there are no markings to tell you

where the limits are.  I arrived at the 640 pixel size by trial and error.  Note how it is pushed way down the page

until it is below the bottom of the side-bar.



Needless to say, that is not the professional look we are trying to achieve for the Klikit Wiki, so please remember to keep

your first few images constrained to 640 pixels wide.  Images which naturally fall below the side-bar can be 800 or more

pixels wide, since they have the full width of the window available.




At the end of a text line, after which you intend to insert a picture, please hit Enter twice, in order to maintain even spacing

in all articles, wiki-wide, and do the same at the bottom of the image, before starting the next text segment.


Please note also, that the Numbered List and Bulleted List gadgets shown above, work fine as long as you are dealing with

text only, but they do not play nicely with inserted images.  If you want to number your text segments, for clarity, when including

screenshots or other illustrations, please do so manually.  I recommend using the Tab key to indent your line, then type the number,

followed by a period, and two spaces, as shown in the following example:


    1.  This is the first line.

    2.  This is the second.

    3.  And so it goes......


For further information, please read the Wiki Style Guide here:  http://klikit.pbwiki.com/Style+Guide


Then, let the composing commence!   papabearak




Comments (0)

You don't have permission to comment on this page.