Scalar WYSIWYG Editor
1 2015-05-25T23:19:25-07:00 Curtis Fletcher 3225f3b99ebb95ebd811595627293f68f680673e 3296 1 plain 2015-05-25T23:19:26-07:00 Curtis Fletcher 3225f3b99ebb95ebd811595627293f68f680673eThis page is referenced by:
-
1
2014-10-01T16:38:31-07:00
Embedding Third Party Material into a Scalar Page
24
plain
83788
2021-08-17T15:38:19-07:00
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. -
1
2014-10-01T16:38:30-07:00
Adding Text
10
Techniques for adding text to a page.
plain
2015-05-28T13:23:31-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.
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.
-
1
2014-10-01T16:38:30-07:00
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.
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.