Feature: Formatted text

Calcapp now supports formatted text in text boxes. Use bold, italic, quotes, links, various headings and bulleted and numbered lists. All features are keyboard-accessible for a smooth typing experience.

Calcapp now supports formatted text. When you edit text in a text box in Calcapp Creator, the following drop-down menu and toolbar are displayed in the inspector on the left-hand side:

The formatting toolbar

The following formatting features are supported:

  • Headings (three levels).
  • Bold text.
  • Italic text.
  • Bulleted lists.
  • Numbered lists.
  • Quotes.
  • Links.

Bold, italic, lists, quotes and links are available from the toolbar. Headings are available from the drop-down menu:

The drop-down menu for selecting headings

Links are by default displayed using the primary color you have set. Quotes are set apart from the surrounding text using a bar to the left of the quote, whose color is set to the accent color. Both these colors can be customized using the color picker or through formulas.

Read more about inserting links in a separate blog post.

Keyboard accessibility

Being able to access all formatting features directly from your keyboard is important when you’re typing so you don’t lose your flow. Calcapp Creator supports a few of the keyboard shortcuts you may already be familiar with, including Ctrl+B to toggle bold, Ctrl+I to toggle italic and Ctrl+K to insert or remove links.

There are no traditional keyboard shortcuts for headings, quotes or lists because we’re using a different approach to making these features keyboard-accessible. This is best exemplified with a video:

To access formatting affecting an entire block of text, type the special characters below on a new line, followed by a space:

  • Heading 1. Type #
  • Heading 2. Type ##
  • Heading 3. Type ###
  • Bulleted list. Type * or -
  • Numbered list. Type 1. or 1)
  • Quote. Type >

Italic and bold are accessed by typing the characters below, substituting your text for text:

  • Italic. Type *text* or _text_
  • Bold. Type **text** or __text__
  • Bold and italic. Type ***text*** or ___text___

Browser compatibility

Enabling formatted text to be edited in a web browser is technically challenging. We wouldn’t have gotten as far as we have without help from a so-called rich text editor named CKEditor 5, an open source project which has not yet released its first production-ready version. We leverage CKEditor 5 to ensure that you get identical behavior regardless of what web browser you use.

However, CKEditor 5 has stringent requirements on what web browser you use. Calcapp Creator supports all recent versions of Chrome, Safari, Firefox and Microsoft Edge as well as Internet Explorer 11, but CKEditor 5 has more limited browser support. If we detect that your web browser cannot edit formatted text, you won’t be presented with the drop-down menu and formatting toolbar and you will only be able to edit plain, unformatted text. Our data for October indicates that 90% of our users are able to use formatted text.

CKEditor 5 only supports Firefox versions 52 and later (where Firefox 52 was released on March 7, 2017) and Safari version 11 (which was released on September 19, 2017). While CKEditor 5 formally supports Microsoft Edge, we have decided not to support it just yet, as there are still some serious issues when that browser is used with CKEditor 5. We hope to enable Microsoft Edge support soon.

As we’re using an early version of CKEditor 5 that is not yet ready for production, some things don’t yet work quite right, especially if you’re using a browser other than Chrome. Please bear with us, we expect to improve support for browsers other than Chrome in the near future.

Future work

We think that the support for formatted text we offer in this release is a major leap forward for Calcapp, which previously didn’t support any text formatting whatsoever. However, we’re far from done — the future will bring more formatting features and better support for pasting from Word and possibly Excel. For our next release, though, our singular focus will be on enabling you to insert custom images. Stay tuned.

« Feature: Open reports directly from your apps Feature: Links »