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 are applied to the whole text when the text box selected or, when in editing mode, just to the current text selection.

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 just click on the small triangle pointing down and choose one from the list in the popup window. Sparkle comes with some preconfigured styles (Body, Title, Citation, etc.). You can rename or delete them or create your own by using the + button.

To change text style just click on the small triangle and choose one from the list in the popup window. Sparkle comes with some preconfigured styles (Body, Title, Citation, etc.). You can rename or delete them or create your own by using the + button.

When the style name is followed by a “(*)” it means the text under the cursor (or in the current selection) is based on an existing style that has been modified. 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. 

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, 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, which has 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 

If checked, this control allows you to animate the way the selected text box appears on the webpage. You can specify an effect, the direction and starting point of the movement and options like the duration and number of times the animation will repeat.

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. By using the site, you consent to the placement of these cookies. Read our privacy policy to learn mode.