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.

You can re-arrange styles by clicking and holding on one to move it up or down.

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 is optimal for text legibility. 

Space before and after adds 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 setting lets you control the tag that will be used in the code. This is necessary for search engine optimization 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.

Scrollable

The scrollable checkbox will let the contained text extend beyond the text box frame, with a scrollbar added in the browser to let site visitors scroll through the text.

Insert…

While editing text, the text inspector shows two additional buttons, an “Insert Smart Field…” button and an “Insert Icon…” button. The former opens a popup letting you add a Smart Field, the latter opens a popup letting you browse and add an icon from the Font Awesome and the Google Material Design icon libraries.

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.

Scroll Effects

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

Sparkle's text inspector
The Sparkle style picker

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

Updated for Sparkle 5.2

Made with Sparkle

Copyright © Crinon SRL 

This website makes use of cookies.

Please see our privacy policy for details.

It’s Okay

Deny