Text

When you first add a text element, the content is displayed as a placeholder, using the Redacted font (which looks like unintelligible squiggles) until it is edited. This lets you think of a webpage in wireframe terms, roughing out a layout before perfecting it.

Once you have found a suitable text placement, you can exit the placeholder/wireframe mode by either starting to edit or pressing the “Insert ‘Lorem Ipsum’…” button available in the Style pane of the Inspector (which will enter just enough words to fit the text box).

“Lorem Ipsum” is nonsensical, improper Latin filler text, commonly used to demonstrate the visual representation of text, and is useful if you want to experiment with typography before entering the actual content copy.

Editing is done in the Working Area directly. To enter editing mode click twice anywhere on the text element, or just once if you filled it with "Lorem Ipsum". The Inspector will show settings to manage the text appearance: style, font, weight, size, color, paragraph options and more.

The Inspector setting is applied to the whole text when the text box is selected or, when in editing mode, just to the current selected text .

Style

The first box of the Style panel shows the current text style, which is a combination of font family, weight and style, text size and color, and paragraph attributes. Using styles helps with website consistency, e.g. allowing you to be sure that all headings (or captions, etc.) look the same.

To change text style click on the down pointing triangle and choose one from the popup list. Sparkle comes with a few preconfigured styles (Body, Title, Citation, etc.). You can rename, delete or create your own by using the + button.

When a style name is followed by an asterisk, “(*)”, it means the text under the cursor (or in the current selection) is based on an existing style but has differences. Two buttons appear under its name: "Apply Changes", which commits the changes, and "Revert to Style", which reverts back to the original settings.

Font

This section of the text inspector controls basic typographic features such as font family, weight and other type traits such as italics and underlining. 

The + button next to the font family menu opens the font panel, through which you can add and remove fonts (including web fonts) to Sparkle.

Text color can be defined by clicking on the round circle, which will make a color picker appear. 

Size and text tracking, which can be used to tighten or loosen text for stylistic reasons or to better fit the available space, are also controlled here by writing values, or using menus, arrows and sliders.

Advanced text options

Clicking on the cogwheel icon opens the advanced text options. These include a subscript/superscript text setting, forcing the text uppercase or lowercase, setting a background color for the text, strikethrough and two shadow styles. 

Paragraph

The alignment and first line settings control horizontal alignment, while the line height, space before and after control the vertical alignment of text.

Line height is a multiplier of the text size. In a multiline paragraph a line height of 1.25 to 1.5 times the font size usually will make for optimal legibility. 

Space before and after add spacing between paragraphs, and can help in scanning through a page. For example this document has a spacing of 10 points after each paragraph.

The HTML tag menu lets you control the tag that will be used in the code. This can be useful with search engines and special browsers for people with disabilities will benefit from the proper tagging. Sparkle can automatically detect and set this by evaluating how text is used on the page.

List

The List checkbox will transform any block of text delimited by a new line character or a series of paragraphs into a list. You can choose the style (bullets, squares, check marks, etc.) and type (unordered or ordered) of the points preceding each item, as well as modify the hierarchy and the indenting.

On Click

The On Click menu is for adding a link or an action to text, such as sending an email address or starting the download of a file.  For more details see the page about Links.

Links have a particular text style associated with them, which is identical to the original but with the addition of underlining. You can customize the link style and, by applying the changes, it will be applied to all links.

Animate On Scroll

Text can be animated like many other elements, see the animations page.

Please report any shortcoming in this documentation and we’ll fix it as soon as possible!

This site uses cookies. Some are essential to make our site work; others help us improve the user experience and display third party content. By using the site, you agree to our site sending these cookies. Read our privacy policy to learn more or opt out.