Text formatting on SF.gov

Owned by Bekah Otto
Last updated: Apr 08, 2022 by Anita Cheng (Unlicensed)
3 min read

Table of contents

Many of the function buttons will be familiar from Microsoft Word.

If you hover over an icon, a tool-tip will tell you what each icon does.

This guide will help you understand the available tools so you can use the text editor to format your content.

Text editor menu in SF.gov's Drupal site
The text editor menu on SF.gov

Text formatting

The following formatting will affect an entire paragraph at a time. It cannot be applied only to a letter, word, or sentence inside a paragraph.

Paragraph Format

  • Use the drop-down menu, labeled by default "Normal," to change your text's formatting.

  • In most text fields, you can use Heading 3 or Heading 4 for headers.

  • The heading formats are based on the SF.gov design theme.

Bulleted or Numbered Lists

  • Ordered/Numbered List 

    • This function creates an ordered or numbered list.

    • Select your text, and then click the insert ordered list button.

  • Bulleted List 

    • Bullet lists creates an unordered or bullet list.

    • Select your text, and then click the insert bulleted list button to select from the bullet list symbols.

See more about when to use Bullets in our Style guide.

Paragraph Breaks and Line Breaks

To create breaks in your body text:

  • Enter (Return)

    • Ends a paragraph and starts a new one. A new paragraph will begin with a full line of space between paragraphs.

    • This is known as a "hard return." In your html source code, you will see </p><p> to indicate the end of one paragraph and the start of a new paragraph.

  • Shift + Enter

    • Adds a line break and starts the next line directly below the first. You may use line break when you are typing an address, for example, where the City, State line should follow directly after the address line.

    • This is known as a "soft return." This text is all part of the same paragraph, so the same paragraph style (normal, heading, etc.) applies on both sides of the line break.

Use a hyperlink to open another page on your site, open a page on an external site, or to launch a mail-ready email in your user’s email client.  

To create a link within the Body of your content item:

  1. Highlight the text you want to hyperlink.

  2. Click the Link icon (Ctrl+K) to open the Link window. 

  3. Add a link

    1. If the page URL does not start with sf.gov/, copy the URL of the page you want to link to and paste it in the URL field.

      1. See more about adding PDF links to info pages, news, and Step by Steps.

    2. If the URL starts with sf.gov/, you can type in its page title. Potential pages will appear as a dropdown underneath. Select the page you want to link. A URL like /node/[ID number] will appear. Use this link. (It helps Drupal point people to the right page if they look are looking at the site in another language.)

      Potential pages on SF.gov that have “vaccine” in the title.

  4. Click Save.

To remove a link within the Body of your content item:

  1. Highlight or click on the text or image that has the link you want to remove.

  2. Click the Unlink icon. 

This removes the link from your text or image. It should now display the same as the rest of your content.