Alignment and Indentation

 

Overview

Much like a word processor, Campusuite's page editor can align text and other objects on your pages. The alignment options for the editor are left-aligned, right-aligned, or centered.

In the world of the web, there is no tab whitespace. It is possible though to use styling to mimic indented text, and the Campusuite editor provides tools that allow you to easily and covertly use those styling tricks to achieve indentation in your pages. Page content other than text can also have indentation applied to them, however, indenting text is probably the most common usage.

If elements are included within a text section, they will automatically be indented along with the text.

 

Aligning Text

It is important to note the role of hard vs. soft breaks when applying formatting such as text alignment. Alignment will apply to sections of text based upon these different kinds of breaks. The alignment will be applied to all sections selected, but will stop at the hard breaks. If the alignment comes to a soft break, it will continue to apply the alignment. So, if you have extra lines between two paragraphs of text, and the alignment affects both paragraphs, then this means that the two sections are separated only by soft breaks and not hard breaks.

  1. Click somewhere within the selection/paragraph of text you wish to align. It is unnecessary to highlight the entire paragraph. If you wish to align text that spans multiple sections (pieces of text that are broken by hard breaks) at one time, then you will need to highlight at least some part of the text from each section.
  2. In the Editor Toolbar, there are three buttons that can be used to quickly apply the alignment you wish to use: the Left Justify button, Right Justify button, or Center Justify button. Click the appropriate button.
  3. The chosen alignment will be applied to the sections of content that you selected/highlighted.

 

Aligning Page Elements

Elements on pages, such as images, can also be aligned just like text. Since alignment is applied to sections of text and content, if an image or some other object resides in the text, it will inherit the alignment from its container. For instance, if you have a paragraph of text and you place an image somewhere in the text, if you change the alignment of the image, you will in turn change the alignment of the text (since you are really applying the alignment to the HTML container that holds the image and the text).

The only time that alignment will not affect such elements that reside within text is if a special styling is applied that "floats" the element on the page. It should be noted that applying alignment to an element is not the same as floating the element (floating is often obtained by setting a style to the element). Alignment is concerning with how the text/element is positioned within its container, whereas floating deals with how text and other objects are wrapped around it.

Unless floating elements, it might be good to place images and other elements in pages on their own (they are on thier own line that is preceded and followed by hard breaks). That way you can apply alignment to images and other such elements without altering the look of any text that may be near them. You can choose not to, but floating and aligning content on the page may be more difficult.

  1. Click on the element you wish to align. Please note that even though you may select an element, like an image, if any text immediately follows or precedes the element (there are no hard breaks, just soft breaks or spaces), the alignment will also be applied to the surrounding text.
  2. In the Editor Toolbar, there are three buttons that can be used to quickly apply the alignment you wish to use: the Left Justify button, Right Justify button, or Center Justify button. Click the appropriate button.
  3. The chosen alignment will be applied to the sections of content that you selected/highlighted.

 

Increasing the Indentation of Content

Indentation can be applied to content in sections (defined by the placement of hard breaks); it is not possible to indent pieces of text that are separated only by soft breaks.

  1. Click and place your cursor somewhere within the text you wish to indent. It is unnecessary to highlight and select the whole section.
  2. In the Editor Toolbar, click the Increase Indent button.
  3. The indentation of the section will be increased immediately.

 

Decreasing the Indentation of Content

  1. Click and place your cursor somewhere within the text you wish to remove indentation from. It is unnecessary to highlight and select the whole section.
  2. In the Editor Toolbar, click the Decrease Indent button.
  3. The indentation of the text section will be decreased immediately.