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. 

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.

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

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 

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.

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 more.

X