WYSIWYG Buttons

Most of these will probably be familiar. There are five different groupings of buttons. Let’s examine the buttons from left to right, starting after the dropdown menu that says Normal.

Group 1: Lists, Block Quotes, & Horizontal Rules

The first two buttons create lists. The first of these creates a bulleted or unordered list. The second of these creates a numbered or ordered list. The third button makes text into a block quote. (This will indent the entire paragraph slightly.) The fourth and final button creates a horizontal rule (a dividing line).

Group 2: Text Alignment

The first three buttons in this group set text alignment: left, centered, or right. The following two control indents for lists. They are greyed out unless you are working with text that is formatted as either an ordered or unordered list, which you do with the buttons in the previous group.

Group 3: Bold, Italic, Super/Subscript, & Links

In the third group, we have buttons for bold, italic, superscript, subscript, adding a link, and removing a link. Note that you can also use keyboard shortcuts for bold (cmd + B Mac, ctrl + B Windows), italic (cmd + I Mac, ctrl + I Windows), and link (cmd + K Mac, ctrl + K Windows).

Group 4: Remove formatting & Language

The first button removes all formatting you’ve applied. This can be very useful when you have interfering styles applied to text and want to reset things. The second button allows you to set a language for your block. The default is English.

Group 5: Special Characters, Source, & Full Screen

The first button in this group, embed media, is still under development. We recommend pasting embed codes directly into the source code of a Basic Block. This is covered on the Block Types page, under Video.

The second button allows you to insert a special character, like a diacritic or an arrow. It will open up a small pop up window with special character options to choose from.

The third button, Source, allows you to look at the HTML source code for the text in the WYSIWYG. Note that reading the source code does require some basic knowledge of HTML. Accessing the WYSIWYG’s source code can be useful for a number of reasons. It is a good way to troubleshoot text styles, because you can see exactly what styles have been applied to a paragraph or span, or remove errant characters. Being able to see and manipulate the source code is also crucial for  embedding videos from Vimeo or Youtube, and for advanced styling techniques. Once you have clicked the Source button, you will need to click it again to toggle back to normal view. Finally, the fourth button is a full screen button. This gets a little wacky, but it is an option, and can be useful if you are doing code-heavy modifications to your Block.

Ok, now for the two drop down menus. One is on the far left: this is for our Paragraph Format. It is default set to normal, but these are our options here. Towards the center we have this Styles dropdown, with Lots of options! So what is the difference?

WYSIWYG Dropdown Menus

The WYSIWYG editor has two drop down menus. One is on the far left: Paragraph Format. It is default set to Normal. Towards the center is the Styles dropdown, with lots of options! So what is the difference?

Style Dropdown

Styles are the more obvious of the two dropdowns. They make a superficial change to your text’s appearance. Play around with the different styling options; there are many, and we won’t cover every single one in detail. In general, there are options for distinguishing between paragraphs, like creating a bold lead paragraph, indenting, and initial caps. Then there are various options for pull quotes. Then there are multiple text sizing options. Then you can assign fonts to your text. Text primary sets your text to the Primary font. Text Secondary sets your text to the Secondary font. (Those are established in Edit view.) Then you have capitalization options. And then font weight options, for fonts with different weights. (The font you are using might not have all these options, so if you set font weight light to a font without a light weight, it will just display as the regular weight.) After that, you have options to change the colors of your font. You can set the Primary font color on in Edit view, and colors 1-10 with a Color Palette, which are covered on the Edit View and Intermediate Styles pages, respectively.

While you can only choose one style at a time, you can assign multiple styles to a string of text. For example, you can make text Header 2, and then Color 1. You can’t, however, assign the same kind of style twice. For instance, if you assign a paragraph to be one color, but want a single line to be a different color, if try to assign color 3 as well, you’ll notice no change. You will need to deselect the first color for that single line in order for second color to appear. The same goes for sizing.

Sometimes, when you have many styles applied, it’s easier to remove all styles with the Remove Text Formatting (T_x) button and start over.

One more thing to note about text Styles from this dropdown. In most cases, it doesn’t matter what order you select Styles in, but in some cases it does matter. These would be when using Font Weight, and Text Primary or Text Secondary with any of the header or display sizes. Let’s say you want some text to be bold, Display 3, and Text Secondary. (As a side note, text sizes Display 1 through Header 3 are automatically Text Primary, while Header 4 through 6 and anything below are default Text Secondary.) As a rule of thumb, you will always want to choose Text Primary or Secondary first (if you need to change that from the default), and in this case you do. And then set your font weight. And then choose your font size. Again, that’s choose your font, choose your weight, and then choose your size. Of course, if you want your text to look like a regular Display 3, then you don’t need to worry about the font or the weight, and you can move straight to selecting the size.

Paragraph Format Dropdown

So if Styles is taking care of all that, what is the Paragraph Format dropdown for? Its options just look like an abbreviated version of the Styles dropdown?

Paragraph Format allows you to assign header tags to your text. We’re dipping our toes into HTML code territory here. In HTML, you can assign different hierarchies to text with headers. This isn’t so important to the front-end user, but it can be crucially important to people using screenreaders, and can also be important for search features. Human eyes distinguish text hierarchy from visual clues like size, boldness, and changes in font. But computers can’t, so they rely on code cues to know what is important on a page.

The most important header is Heading 1 and they continue down to Heading 6, in terms of level of importance, until we get to Normal. (That’s why Normal is default.) 

Now, things get a little confusing, because as you can see from the dropdown menu, there are visual distinctions between these headers, as we’d expect from the styles. This is so that you, as a user not looking at code, still know that you’ve applied that tag. That means assigning text a Header 1 tag from the Paragraph Format looks exactly like assigning text a Header 1 style from the style menu to us, but it looks very different to the computer. 

Clicking Source will reveal the difference between a Header 1 tag and a Header 1 style. Text with a Header 1 tag applied will begin with <h2>, instead of the usual <p>. Text with the Header 1 style applied will begin with <p><span class="h2">. So that text is still considered Normal by the computer, and not important, Header 2 text.

This requires a brief explanation of how HTML works. All text in HTML needs to get placed into a container that gives the computer information about how to handle that text. These containers are called tags. There are lots of different kinds of tags, and their purpose is to tell the computer what kind of content is in the tag (for example, is it text, or is it a picture?), and that content’s hierarchy. As mentioned before, you can create text hierarchy with header tags. The <h1> tag means that it’s the most important text on the page. By default, text in the WYSIWYG is assigned a <p> tag, which is a paragraph tag. That is just plain old text. But, you can make that plain look important visually by adding a style to it—that’s what that a <span> tag is doing. It’s applying a CSS style to increase the font size to a reader. But to a computer or a screenreader, that text is a plain old paragraph.

So, why should you use one method over the other, if they look the same? Basically, you’ll want to assign Paragraph Format tags to things like titles or other important information. But when it comes to actually styling your text, you’ll want to do that with the Styles dropdown, as that gives you more options. Furthermore, the two menus are separate, so I can apply both a Paragraph Format and Styles to a piece of text. The Paragraph Format will make the text hierarchically important to the computer, and the Styles dropdown menu will let you style that text visually according to your design scheme. Note that you can tell what tags have been applied to your text in the grey bar at the bottom of the WYSIWYG. (Spans are tags representing each style from the dropdown menu you have applied). You’ll also notice that if you remove text formatting (T_x), it removes the spans but not the Paragraph Format tags.

WYSINWYG

One final note about the WYSIWYG. Notice that when you leave the Configure window for your block, the text can suddenly look a little different, particularly when it comes to fonts. What you saw is not exactly what you got. This is because the typography overrides applied at the page level only go into effect outside the Configure window. You’ll have to do a tiny bit of imagining when using the WYSIWYG when it comes to fonts. This can be particularly tricky if your Primary Font is a sans serif, and your Secondary Font is a serif, as that will appear to be the reverse in the WYSIWYG. Just remember, in the WYSIWYG, your Primary Font will display as a serif, and the Secondary Font will display as a sans serif, regardless of what you have assigned at the page level.