Content
Typography#
The primary task of the Learning Guide Styler is to format content into a cleaner layout.
Academic view
Student view
Body text#
Standard paragraph text is formatted into a larger font. Emphasis and colour styling are maintained from the original content.
Manual overrides of the body content are also maintained. It can cause layout issues for the student, so it is essential to keep your content clean, allowing the styler to reformat it more easily.
Information on cleaning your content can be found in the Known Problems section of this documentation.
Title#
The title of a page comes from its “Content Folder” container. The title of this parent folder is pushed to the top-right of the page.
A colon can be used in the folder name to set a subtitle. Any text before the colon is treated as a subheading and placed above the main title in smaller type size. The remaining portion of the title is formatted into a larger font.
Headings#
Along with the name of the item, Blackboard allows for three additional heading levels, available under the paragraph style drop-down menu.
- Heading
- Sub-Heading 1
- Sub-Heading 2
These headings are displayed in a larger coloured font.
Note
The title of the item is also displayed in a larger font but can be disabled using the ”No Heading” attribute.
Block quote#
A block quote is styled with a large double-quote symbol.
Images#
An image item will be reformatted to fit the width of the content and will resize responsively on different screen sizes. To improve accessibility, don't forget to add a relevant ALT attribute to images. If the image is just for decoration you do not need to provide an ALT description (i.e. leave it blank), and most e-readers will ignore the image.
Images should be optimised for student viewing.
Academic view
Student view
If an image item also contains a description it will reformat the image as a figure, keeping it at its original size, and use the description as a caption.
Academic view
Student view
Images inserted directly into a content area will not be altered.
Academic view
Student view
Tables#
Tables will be reformatted to be responsive. Adding manual styling will increase the chance of something going wrong with the reformatting, so to avoid problems keep tables as simple as possible. Some manual formatting such as heading cells and fill and text colours will be honoured. Others formatting such as cell sizes and borders may not work or may cause problems. Experimentation is the best option here.
Academic view
Student view
Equations#
Blackboard has a built-in equation editor that works fine for the most part, but MathJax, an equation formatting script, can also been included to improve inline equations in content. Right-clicking on a MathJax equation gives additional functionality to the student. For example, right-clicking on the example equations below will display the MathJax menu where you can show the TEX and MathML code.
MathJax will read TEX, MathML and AsciiMath code and format it into a visual representation of the equation.
LaTex is the easiest choice and can be typed directly into the editor.
To avoid conflicts with Blackboard's editor, equations to be formatted with MathJax should be wrapped with specific brace code:
\[ ...equation... \]- Format as a display equation\( ...equation... \)- Format as an inline equation
Display equation#
A display equation is centered on the page, on its own line.
Example
Nullam et dolor magna.
\[F(x) = \int^a_b \frac{1}{3}x^3\]
Duis sit amet imperdiet sem.
Nullam et dolor magna.
Duis sit amet imperdiet sem.
Inline equation#
An inline equation is displayed... well... in line.
Example
Nullam et dolor magna \(F(x) = \int^a_b \frac{1}{3}x^3\) duis sit amet imperdiet sem.
Nullam et dolor magna F(x) = \int^a_b \frac{1}{3}x^3 duis sit amet imperdiet sem.
Mark reviewed#
Mark reviewed links are reformatted to look like a button.
They will be positioned in the bottom-right of the content to which they relate, with the exception of items that are wrapped in an activity style container, in which case the button will be positioned in the top-right heading area of that container.
If a page contains Mark Reviewed items, a progress indicator (e.g. You have reviewed 1 of 3 items) will be added underneath the title of the page.
Academic view
Student view
