Here's a quick rundown of formatting best-practices and tips for our wiki. Because it is dependent on various sources, the wiki has the potential to become a stylistic nightmare because it's made up of contributions from individuals who've joined at different times, have different senses of style, and have varied comfort levels with the WikiFoundry EasyEdit tool. This page serves as a formatting FAQ and contains suggestions for general formatting guidelines as well as a list of tips contributed by the community.
If you've learned something about using the WikiFoundry Editor, add it to the tips section below! More than likely, it will help out newer contributors and save them a little frustration. By clicking EasyEdit above (and accessing the WikiFoundry Editor), you'll be able to see a number of examples referenced in this page. You can also go back through this page's history to see how it developed. This page utilizes a number of strategies for producing the same effect in order to demonstrate some of the examples discussed below.
I . Creating Tables:
The backbone of the WikiFoundry Editor is tabling. Tables can be nested within other tables to allow for some flexibility in creating different "content spaces" on the page. The screenshot to the right is nested within a table (to provide a spacing buffer between the text and the image) that has cell margin=10, width =100, etc. Don't worry if you don't get these right the first time. You can always come back to these settings and change them if you want. Through the edit table window, you're able to define the number of cells in the table and how much space is between each cell (or the table border). Below is a description of each option:
1) Rows: This option allows you to set the number of rows in the table (Rows go horizontally, left and right).
2) Columns: Allows you to set the number of columns (vertically, up and down) in a table. A one row, one column table is a single cell (see Table 1). Single cell tables are useful for placing a border around text or images. You can also use a single cell table to create borders around other tables (see Table 2 for an example of the framing table with a hidden border and Table 3 for an example with a visible border).
| Table 2|
3) Table width: Table width is a very handy function, but it can also cause some problems. For an explanation of the problems, see Section V: Different Monitor Resolutions. Generally, it's best to select Fit to page and then break the table up into smaller tables later, or embed tables to create the best structure for your page. It's also useful to set the width to 100 pixels for framing images. Considering that most images are going to be larger than 100 pixels across, the table will expand to the width of the image, creating the frame.
4) Cell Margins: Cell margins are the space between a cell and the information inside. Generally, this can be left to the default (3), but sometimes it might need to be modified. 0 is handy for putting a tight border on an image. For a table that contains text or one that borders text, 5 works well. Sometimes, 10 is effective at helping to balance the content of the page (e.g. if the page contains a bulleted list on the left with an image on the right). The Add Table screenshot above is nested within a table that has a cell margin of 10 to help set the image off from the text.
5) Wrap Text: Wrap Text allows you to position text around a table or image. If you're having issues with the alignment of your image or table, make sure this is set to the first option.
6) Table Border: Initially, it might be useful to keep this on the default setting (i.e. show all borders), but as it says, you can (and should!) come back and customize this for every table you create (and possibly each cell). It may help some people to keep the borders visible for their initial work on the page and then come back to hide them later once they have a better grasp of how the layout will develop.
| II . Editing Tables:|
You can access the table editor by right clicking on a table. Editing tables is an important part of the formatting process as it allows for more detailed manipulation of the tables. It's best to right click on a table and add a row as opposed to creating new tables. There are a number of options available by right clicking a table:
1) Add/Remove column (up and down): Add column adds to the right of the column that you select.
2) Add/Remove row (left and right): Add row adds below the selected row.
3) Edit table: see "Creating Tables" above.
4) Edit table cell: discussed below.
5) Select table: Select table is a useful option for diagnosing formatting bugs. You can right click on a table, choose "Select table", and then ctrl+x on your keyboard to cut. Then click further down the page and ctrl+v to paste the table away from the troublesome tags (for a brief discussion of "tags" and HTML, see Section XIII on this page). By using select table, you can also create a space between tables if you're not able to select that area. It's also necessary to use select table as opposed to left clicking to access some options such as merge cells.
6) Delete table: Useful for correcting mistakes. It's generally better to use "Select table" before "Delete table" as opposed to left click so that you can be sure which table you are deleting.
7) Merge Cells: If you drag from one cell to another and then right click, you have access to one more option, "Merge Cells". This allows you to combine two adjacent cells and is particularly useful when combined with the "Edit table cell" option for customization of table borders.
III. Editing Table Cells:
If you right-click on a table cell, you have the option to edit the borders and background color of that cell . You can make borders appear or disappear. You can also change the width/density of the border. This opens up a number of different options for creating different "content spaces" on the page. Play around with different border combinations.
| Screenshot of Edit Table Cell|
"Content spaces" are breaks in the text or images that help to organize the page and delimit the boundaries between sections on the page. This page contains a number of examples of different strategies for developing content spaces:
- Between Sections I and II, there is single row table with the top, left, and right borders hidden. This kind of table serves as a horizontal divider between the two sections.
- The same effect is achieved between Sections V-XII. In this case, lines between sections are created by editing each cell between a section so that only the bottom borders are visible. Here, all of the content is included in one table, whereas from Sections I-IV, each section is contained within its own table.
IV. Image Size and Quality:
- Notice that between each of the rows containing Images 3-6 below, there is a row of cells with all of the borders hidden. This is a more subtle way to create individual content spaces for each of the images and their respective captions. It's also a good strategy for creating content spaces in sections delimited with horizontal lines.
Images really make our wiki stand out from others. We have a number of contributors who have found some really nice images and they're now contained on our pages. However, there are a few things to keep in mind when selecting and formatting images. Good images are very nice. Bad images can make a wiki look unprofessional and, in some cases, confusing and ugly.
- Avoid using the editor's built-in picture resizer. This tends to destroy the quality of the images and makes it difficult to see the content of the image clearly. Use a free picture editor such as Picasa to change the size of the images.
- Keep picture sizes standardized and manageable. Look to see how big the other pictures are on the page and reformat your pictures so that they are roughly the same size. They may require cropping so that they are the same general shape. Also, remember that people have different monitor resolutions and something that may look great on your monitor could force ugly formatting on someone else. Try to never exceed 600 pixels for the width of any image. Of course, there are some exceptions.
- Don't post poor quality images. We're not trying to be the biggest Bond wiki, but rather the best Bond wiki. If an image is too small, increasing it's size will cause distortion and poor quality (ex: Image 1 and Image 2). It's better to either leave the image small and clear, or leave it off altogether. One good quality image that took a couple hours to find is a better contribution than ten poor quality images.
| || || |
| Image 1 |
| || Image 2 |
XIII. Quick HTML Overview:
| V. Different Monitor resolutions:|
Different people have different monitor resolutions. The low end is probably 800X600, while most people won't be using more than 1600X1200. That means that when you're creating your tables, there's a wide range of how your page will be viewed. Because people have different monitor resolutions, it's important to make sure that your pages can be visible to most people. Keeping the content of your page no wider than 1000 pixels is a good guideline to follow because it will contain enough content for the higher resolution viewers and will still be manageable by people on the lower end of the scale.
| || |
| Image 3 |
| Image 4|
| || |
| Image 5 |
| Image 6|
Images 3-6 are screenshots that are all taken of the same content on four different resolutions. The two wide pictures at the top of the page are not viewable in Image 3, partially viewable in Image 4, fully viewable in Image 5 (but the right side toolbar is not), and in Image 6, the entire width of the page is viewable. There are different ways to help make your page more viewable across resolutions. In this case, you could choose to not include the wide images in the table, i.e. side-by-side, and could stack them on top of each other. Another option is to reduce the size of the images so that each are no more than 500 pixels across (totaling 1000 pixels). The 800X600 resolution would still have problems viewing the content, but more of the page would be available across all four resolutions.
Also, keep in mind that the left and right toolbars are each about 200 pixels in width. They take up approximately 400 pixels worth of page width. So on a 800X600 setting, that only leaves about 400 pixels of content area that can be added and still allow both left and right toolbars to be viewed.
Try to always be aware of what your own monitor resolution is when you're creating tables and resizing pictures. Generally, if you have a high resolution monitor, you'll want to make sure that there's plenty of space between images and that tables don't exceed more than about 1000 pixels. If pictures are too large, they force the boundaries of the table to conform to those of the picture.
|Here are the steps for checking your monitor resolution on a PC running Windows XP:|
- Right-click on your desktop
- Select properties
- Select the Settings tab
- You can change/view your screen resolution by moving the slider on the left.
For Windows Vista, the process is similar:
- Right-click on your desktop
- Select Personalize
- Select Display Settings
- You will see a window similar to the screenshot on the right. Your resolution can be viewed/changed by moving the slider on the left of the window.
|Again, the process is surprisingly similar for Mac OS X:|
- Open the System Preferences (either from the Dock or from the Apple menu).
- Open the Displays panel and choose the Display tab.
- On the left of the Displays tab you can select one of the resolutions from the list.
| IV. Suggest links:|
While this feature works nicely for some of the content, it must be used in moderation. It is not sufficient to click Suggest Links, then click accept all, and then be done with it. Sometimes, the Suggest Links feature links to inaccurate content (e.g. linking from the "Moonraker" novel page to the Moonraker film page). Other times, it repeatedly links to pages that appear throughout a page (i.e. linking to Jaws every time he's mentioned in the Moonraker synopsis). Generally, if a particular link is found throughout a page only link to it periodically. It keeps the text clean.
Suggest Links should be the beginning of your pass through the page looking for links. It will point out some of the more obvious ones, but each link it suggests should be inspected for accuracy. Once the suggestions are exhausted, a manual pass over the page is required to locate potential links that were not picked up by the suggest link feature such as:
We've experimented with different methods of tricking the feature into doing what we want (e.g. naming the pages "Octopussy (character)" and "Octopussy (film)", but then, every time we refer to the character Octopussy throughout the website, we would have to refer to her as "Octopussy (character)". For pages with synopses or extensive text, this work-around reads horribly. Also, these kinds of work-arounds can conflict with page names designed to be easily returnable by search engines. For instance, the gadgets page is titled "James Bond Gadgets". The only way that the Suggest Links feature will know that a reference to "gadgets" is intended to be linked to the "James Bond Gadgets" page is if we refer to gadgets in every case as "James Bond Gadgets". This is extremely unwieldy and again, may make for unreadable text. So in short, use the Suggest Links feature with care.
Accurate and extensive linking is crucial to the effectiveness and structure of a wiki, and can be tedious work. It's generally best for the links to be added at the page's creation, so that we can ensure the comprehensiveness of our links.
| VII. Italics vs. Quotation Marks:|
Italics are used for all film titles. Quotation marks are used for all novels. If you are quoting something that a character said, then use quotation marks. Most of the pages already contain formatting hints. When in doubt, use the same formatting that appears earlier on the page you're editing.
| VIII. Bullet-points:|
Bulletpoints are an effective way to break the text down into manageable chunks. For some text, it's appropriate (e.g. listing henchmen on the film pages). For other text (e.g. the detailed summary of the film Dr. No) they're not. You can make your own custom bullet-points by using the indent feature on the EasyEdit Toolbar. Sometimes this is useful if you have a long bullet-point that wraps around an image to the right. If you use the bullet point feature, the text won't actually wrap until the following bullet-point. This work-around was used in sections I and II on this page.
| IX. Colors: |
Stick primarily to the default colors: white, black, blue (for links), and sometimes a dark red. You shouldn't ever have to change the color of the text. The links will automatically change to the blue color when you link them to something. You don't have to worry about manually changing the color of the links.
| X. Templates:|
If there's a template for the page you're trying to create, take advantage of it. They also serve as good models for understanding the basics of the WikiFoundry Editor. The use of templates will help to ensure that our wiki has consistent formatting within sections. If you've decided to create a new section, make sure that you create a template for the material that will contained within that section so that all of the pages will be stylistically unified.
| XI. Alignment:|
If you have problems with alignment of pictures or tables use right click and make sure that the Text Wrap is set on the first option. If it's set on the other options, the tags can get switched and you may have a formatting nightmare. If you want to align a table, you need to right click, Select table, and then click the alignment button on the EasyEdit Toolbar.
| XII. Text Size: |
The default text size is 12pt and should be used for most text. For adding parenthetical material, use the next smallest size 10 (e.g. for dates, film titles, and other information you want to de-emphasize). In some cases for emphasis, size 14 works well, but bold can be used for emphasis in most cases. Size 14 is most appropriate on text-heavy pages where there may be a need for different levels of emphasis.
HTML (or XML) is the "language" that is read by your browser (e.g. Internet Explorer, Mozilla Firefox, Netscape Navigator, etc.) and allows plain text to be formatted into the beautiful webpages that you look at every day. HTML works based ona simple system of "tags". If you know the tags, you can format the text. In HTML, to make text italicized it is tagged as <i>SOME TEXT</i>. Thanks to our handy WikiFoundry Editor, we don't need to know HTML in order to create our wiki pages. The WikiFoundry Editor translates each click of the button into the appropriate tag-set (an opening and a closing tag that frames the content to be formatted). To view the HTML tags that are embedded (behind the scenes) in this page, click View on your browser toolbar and then select Page Source.
This section has been included because a missing closing tag is generally the culprit when formatting anomalies occur. If you don't delete all the white-space surrounding some text that you're trying to delete, then you may have preserved the tags even though the text is gone. If you go to paste new text in the same spot, it may be pasted between the tags, causing those tags to apply to the new text without your knowledge. If you're having formatting issues between the editor and the saved page, make sure to delete all of the white-space near where the problems are occurring. See the tips section below for a more detailed description of this work around.
- Right-click is your friend.
- Always check the page after you have saved your changes. Many times, the editor page doesn't match the saved page.
- If your saved page doesn't look like your editor page, try cutting the bad content (either text or tables), deleting all the white space up until the next bit of unformatted text (i.e. no bold, no italics, no color, no alignment). Then space down a few lines, and paste. When adding or cut/pasting a table or picture, it's usually best to hit enter 3 times and then add/paste the item into the middle (2nd line) of your 3 line white-space-buffer. Then if necessary, go back and delete the two lines. This strategy ensures that you'll have a space above and below your table if you decide to add text or formatting. If you're nesting tables within tables, this will also allows you the space to select the framing table. If you don't allow for these spaces between tables (at least initially), it may be difficult to select the framing table.
- If you can't figure out why your formatting isn't behaving properly on the saved page, you might have to start over. Copy the pictures to your desktop. Copy the text into a text editor (like notepad), not into a Word document (The Word document may retain the funny tags that are causing the anomaly)!
- Use the editor as your canvas. You don't have to try to create the page from top down working out exactly how the content will fall. Cut and paste from one part of the page to another part further down. Then cut back to the area you're working in. This can help to find some of those formatting bugs. You can view this page's history to see the process through which it was created.
- Pay attention to the formatting of the page you're editing. It can give you hints about how to maintain consistency.
- Sometimes if you delete something out of a cell (e.g. an image) the cell doesn't remember that it's a cell anymore and you're not able to click inside it. If this happens, copy the information from the other cells in the row down to the bottom of the page and then delete the row. Add a new row and then paste the information, cell by cell, back into the new row.
- It's better to enter all of your text first into the editor and then apply any formatting. To help avoid formatting bugs, adding bold, italics, and bullet points should be done last. If you add them at the beginning, sometimes the tags end up carrying over to text you don't want formatted, and you end up with an entire page that's bold because the tag from the first bold word on the page was never closed.
- Use right-clicking to select tables. Left clicking is inaccurate and can lead to the unintentional deletion of content.
- To place a box around a picture, create a table with width 50. When you place the picture, it will force the table to expand around it.
- You can use tables to force spaces between content. Sometimes, you may have a space in the editor, and then when you Save, the space has disappeared. In these cases, create a table in the spot where you want the space and set the options to width=100, borders=invisible, cell spacing=0. I've done this on a number of occasions on this page because I entered a space in the editor and it wasn't showing up after I saved. It seems to only happen when the space is below the text.
- Try to vary things on a page, but stick to the same theme.
- If you can't delete something, try using both Backspace and the Delete key. Invisible tags like bold face and alignment can be hidden in white-space.