This site requires Javascript to be turned on. Please enable Javascript and reload the page.

Scalar 2 User's Guide

Scalar WYSIWYG Editor

This page is referenced by:

Adding Media and Annotations [DRAFT] 24 plain 2016-06-05T10:27:36-07:00
This section describes functionality in Scalar's page editor, which is accessed by clicking the icon (if creating new content) or the icon (if editing existing content) in your Scalar header bar.
Adding media to your page is done through links in the page editor.
Adding Media Links
You can add media links to your content by selecting the text you want to link and then using the first blue media button seen at the top of the text editor in its Visual mode. This will insert a link to a media file that's already been imported into Scalar. This kind of link allows maximum flexibility in the layout of your text and media--Scalar can rearrange them as needed depending on the current view.
Adding Inline Media
If, however, you want to embed your media in the page at a specific location in the more traditional style, you can use the second blue media button . This will insert an inline reference to a Scalar media file that will be embedded in the page at the selected location.
Formatting Media
Once you've selected the media you'd like to insert, whether as a media link or as inline media, you'll be promted to choose your formatting options. Using the media reference options select the following display preferences:
1. Size. Choices include “Small” (206px wide), “Medium” (412px wide), “Large” (620px wide), “Full” (maximum wide of the page), and “Native” (the original size of the media up to the maximum width of the page).
2. Alignment. Choices include "Left" (aligned left), "Center" (aligned center), and "Right" (aligned right).
3. Caption. Choices include "Description" (the description for the media object will be displayed), "Title" (the title of the media object will be displayed), "Title and description" (the title and description for the media object will be displayed), and "None" (neither title nor description will be displayed).
Adding Media Annotations
If the media you're adding has been annotated, the media reference options described above will also include options for displaying those annotations. Just below options for displaying the size, alignment and caption of the media object, you can select which annotations will display and which will be featured. For example, if the image you're adding has ten annotations (ten bounded areas with commentary) you can choose to have none of those annotations display, all of them display or any combination of those ten annotations display.
Reformatting Media
To change the size, alignment, caption, and annotation display options for media already added to a page, follow the steps below:

For linked media: Click on the hyperlink for the linked media in the text editor and select the gear icon that pops up. Then change the setting in the media reference options.

For inline media: Click on the grey box for the media object and then select the gear icon that pops up. Then change the setting in the media reference options.
Embedding Third Party Material into a Scalar Page The best way to embed a map, timeline or any other third party platform into a Scalar page is by using an iframe tag (read more about iframes here).
Here's how to do it.
Click in your in your Scalar header bar to create a new page, or navigate to an existing page in which you'd like to insert a third party material and click to edit that page.

Click the "Source" tab at the top of the page editor.

Find the url where the map, timeline or other material resides.

Paste the code below into the html editor, being sure to insert the url you have inside the quotation marks after src=. Also be sure to include http:// at the beginning of the url you're using. (See below for seeting the paramaters for "frameborder," "height" and "width.")

<iframe src="[your url]" frameborder="0" height="650" width="100%"></iframe>

Using your own url, your code should then look something like this:

<iframe src="http://www.tiki-toki.com/timeline/embed/137152/4308693385" frameborder="0" width="100%" height="650" ></iframe

Under "Layout," select "Blank Slate."

Click "Save."

Frameborder defines the width of the border around the material inside the iframe; a frameborder of 0 means there is no frame; a frameborder of N (frameborder="N") will place a border N pixels wide around the material.

Width sets the width of the material displayed. Width can be set to pixels or percentages. Setting the width to 100% (as in the example above) allows the iframe to expand to the maximum width allowed inside the main content area of a Scalar page.

Height sets the height of the material displayed. In the example above, we've set the height to 650 pixels.
Adding Text
This section describes functionality in Scalar's page editor, which is accessed by clicking the icon (if creating new content) or the icon (if editing existing content) in your Scalar header bar.
Title and Description
Every page in Scalar must have a title, and while it isn't required, it is highly recommended that every title in your book be unique. For example, a page with commentary about a video called "Cloudy Day" should probably not also be called "Cloudy Day"--otherwise readers searching in your book could get confused. Better to leave the video title as is and call the page "Cloudy Day Commentary". It's also useful to make your titles as self-contained and descriptive as possible, since you can never be sure how users will arrive at a given location. A page titled "Questions About Cloudy Day" immediately lets the reader know what it's about; a page just titled "Questions," much less so.
Page descriptions are optional, but recommended, as they appear in various places in Scalar (with more likely coming in the future) as a way to quickly let the reader know what a particular page is about. One sentence or so is usually a good length.
Body Content
Below the title and description in the page editor is a text editor, similar to what you might find in blogging software. This is where you enter the main content of the page. The text editor has two modes, Visual (the default) and Source. The Visual mode functions much like a typical word processor: text is displayed with styling and formatting, much as it will appear in the final page. A row of icons at the top of the Visual mode editor allows you to change the style and alignment of the text, to indent or outdent, add subscripts or superscripts, assign headings, create numbers and bulleted lists, and insert horizontal rules. The Source mode of the editor (activated by clicking the Source button in the top left) displays the raw code that will be saved with the page, and can be used when precision in formatting is essential.
Pasting Text into Scalar
Pasting styled text from a word processing program into Scalar (or any blogging software) can have unpredictable results. As the text editor tries to interpret and preserve the pre-existing styles, it's easy to end up with large quantities of redundant style code that can slow your book down, add unwanted fonts, and make editing more difficult later on.

Scalar's text editor provides two options to help address these issues. The "Paste as plain text" button (second from the left, the clipboard with a "T" on it) strips out existing formatting, including any text styling, from the text you paste. The "Paste from Word" button attempts to strip out irrelevant formatting, while preserving the text's existing styling.
If you do somehow end up with text in your book that has unwanted styling, you can easily remove it by switching the editor to Visual mode, selecting the text, and clicking the right-most button (a "T" with an "x" beside it)--this will delete any links and formatting from the selected text.
Adding Media and Links 7 How to add media and various kinds of links to the text of a page. plain 2016-10-20T15:47:59-07:00
This section describes functionality in Scalar's page editor, which is accessed by clicking the icon (if creating new content) or the icon (if editing existing content) in your Scalar header bar.
Adding Links to Media
Adding media to your page is done through links in the page editor--by selecting a relevant bit of text and then linking it to the media you want to reference. When Scalar shows the page, it finds all of these links and turns them into media players. Because the media is referenced indirectly through links instead of directly through the kind of embed code you would use to add a YouTube video to a blog, Scalar is free to change the layout of the text and media on the fly, making your content much more flexible.
You can add media links to your content by selecting the text you want to link and then using one the following blue buttons seen at the top of the text editor in its Visual mode:
- Inserts a link to a media file that's already been imported into Scalar. This is probably the type of link you'll use most often.
- Inserts a link to a media annotation. The media will be embedded on the page and automatically cued up to the start point of the annotation (for temporal media).
The kind of links created above allow maximum flexibility in the layout of your text and media--Scalar can rearrange them as needed depending on the current view. If, however, you want to embed your media in the page at a specific location in the more traditional style, you can use these options:
- Inserts an inline reference to a Scalar media file that will be embedded in the page at the selected location.
- Inserts an inline reference to a media annotation, which will likewise be embedded in the page and cued.
To ensure images are accessible, Scalar automatically uses the image's description as its alt text.
Adding Other Kinds of Links
The remaining link buttons in the View mode of the text editor work as follows:
- Inserts a note-style link to Scalar content. When rolled over, this link will display the contents of the linked page in a pop-up window. Similar to footnotes.
- Inserts a link to Scalar content. The title and description of the content will be displayed when rolled over, but no media will be embedded on the page.
- Inserts a conventional hyperlink to whatever URL you choose.
Creating Relationships with Other Content
For more on this topic, visit the Working with Structure section of the documentation.
Adding Links 5 plain 2016-06-04T13:37:14-07:00
This section describes functionality in Scalar's page editor, which is accessed by clicking the icon (if creating new content) or the icon (if editing existing content) in your Scalar header bar.
Adding Links
Linking to material is done in one of three ways in the page editor; by adding a Scalar Note, a hyperlink to Scalar content or a traditional hyperlink to any url.
- Inserts a note-style link to Scalar content. When clicked by the reader, this link will display the contents of the linked page in a pop-up window, with an option to navigate to that page.
- Inserts a link to Scalar content.
- Inserts a conventional hyperlink to whatever URL you choose.
Creating Relationships with Other Content
For more on this topic, visit the Working with Structure section of the documentation.