Curl Global Community
Getting Started2:Formatting and Styling Text - Printable Version

+- Curl Global Community (https://communities.curl.com)
+-- Forum: Tutorials (https://communities.curl.com/forumdisplay.php?fid=3)
+--- Forum: Public Training (https://communities.curl.com/forumdisplay.php?fid=4)
+---- Forum: Curl Clues (https://communities.curl.com/forumdisplay.php?fid=5)
+---- Thread: Getting Started2:Formatting and Styling Text (/showthread.php?tid=2)

Getting Started2:Formatting and Styling Text - kino - 06-15-2011

Most of the content that exists on the Web is static data. Tons and tons of information can be accessed using your browser. The way this information is presented plays a very important role.

Similar to HTML, Curl has a number of options that are used to enhance the presentability of the information. This includes the use of color, font size, font style, enumerated lists, and so on. The Curl language supports these text elements by providing text formats which can be classified as character formats and paragraph formats.

Formatting Text
Let's modify the applet text by adding simple text formatting. The simplest way to format text is to use Curl's predefined text formats.

Two very common text formats are bold and italic.
•bold presents the textual content in a bold font face.
•italic formats the textual content using an italic or oblique font.

Curly braces are used to specify a specific operator that is then followed by the content that it is applied to. We call this a Curly Expression, in which each open curly brace { has a matching closing curly brace } that bounds the {operator operands} expression.

An example is: {bold my text}, where bold is the operator and my text is the operand. In our example code below, we have nested the italic text format inside the bold text format. The result is that the word "first" will be both bold and italic.

Code:
{curl 6.0, 7.0 applet}
{applet {compiler-directives careful? = true}}

This is my {bold {italic first} applet}!

Tip: Notice that when we add an operator to the content, the editor automatically color codes it so that it stands out. The color coding of API elements is also available in the Curl IDE.

The above example is similar in functionality of HTML properties. The HTML code tags would resemble the following:

Code:
<b><i> This is text that is bold and italic </i></b>

Pre-defined Text Formats
As we stated above, both bold and italic are predefined text formats. These formats are derived form the core Curl text formats and are shortcuts to frequently used text formats. Other Curl predefined text formats include:

•monospace
•tiny
•small
•big
•huge
•quote
•underline
•line-through
•superscript
•subscript

Using Options
Similar to HTML, formatting text can be specified using properties or options.

Code:
{text
   option1=value1,                    
   option2=value2,                
   ...                
}

Each text format can have zero or more options that are specified in a comma delimited format. In the next example, we will specify the font size and the color of the text using option/value pairs.


Code:
{curl 6.0, 7.0 applet}
{applet  {compiler-directives careful? = true}}

{text
   font-size = 24pt,
   color = "red",
   This is my {bold {italic first}} applet!
}


Notice how you can mix Curl formatting techniques using option/value pairs and predefined text formats.

For more information regarding text formats, please refer to the following section in the Curl Documentation:Curl Developer's Guide > Getting Started with Text Formats

Formatting a Paragraph
By setting paragraph properties, or options, you control the appearance of the entire paragraph. This includes all contents of the paragraph (text, images, backgrounds, etc.) Each paragraph uses the paragraph text procedure that has the following syntax.

Code:
{paragraph                  
option1=value1,                    
option2=value2,                
...                
}

List each option and value in any order. Similar to text formatting, a comma is necessary between each option/value pair. The paragraph text is specified last. Notice that each paragraph option specifies a particular characteristic. You can include any number of paragraph options to define a format.

Code:
{curl 6.0, 7.0 applet}
{curl-file-attributes character-encoding = "utf8"}

{applet  {compiler-directives careful? = true}}

{paragraph
   color = "teal",
   font-size = 10pt,
   font-family = "Helvetica",
   The Curl IDE includes all of the tools you need to build rich Internet applications
   using the Curl content language. The Curl Run Time Environment (RTE) is free to end users,
   and includes a browser plugin so that any user who installs
   the RTE can run applications on your web site simply by visiting
   the url where you have deployed the applet.
   {paragraph
       font-weight = "bold",
       You write applets in a powerful object oriented language using the Curl IDE.}
}

{paragraph
   color = "red",
   font-size = 8pt,
   font-family = "Courier",
   The Curl language combines the presentation features
   you get from a markup language like HTML with an object oriented
   programming language and library similar in power and
   scope to what you get from Java. The combination makes
   it easier to write more powerful applications that take
   full advantage of client-side computing power.
}


Tip: Option values can be specified using any valid Curl quantity, or unit, such as pt, px, cm, and in.

For more information regarding Curl quantities, please refer to the following section in the Curl Documentation:Curl Developer's Guide > Core Language - Types > Quantities and Units


Indenting, Offsetting, and Spacing
In the following example, we are using paragraph spacing, indenting and offset properties. Obviously you might not use all of the options listed below, however for example purposes, we have listed the most commonly used options.

Code:
{curl 6.0, 7.0 applet}
{curl-file-attributes character-encoding = "utf8"}

{applet  {compiler-directives careful? = true}}

{paragraph
   paragraph-left-indent = .5in,
   paragraph-right-indent = .5in,
   paragraph-first-line-offset = 1in,
   paragraph-line-spacing = .1in,
   paragraph-after-spacing = .2in,
   paragraph-justify = "right",
   color = "navy",
   font-size = 10pt,
   font-family = "Helvetica",
   The Curl IDE includes all of the tools you need to build rich Internet applications
   using the Curl content language. The Curl Run Time Environment (RTE) is free to end users,
   and includes a browser plugin so that any user who installs
   the RTE can run applications on your web site simply by visiting
   the url where you have deployed the applet.
   You write applets in a powerful object oriented language using the Curl IDE.

   The Curl language combines the presentation features
   you get from a markup language like HTML with an object oriented
   programming language and library similar in power and
   scope to what you get from Java™. The combination makes
   it easier to write more powerful applications that take
   full advantage of client-side computing power.
}
Notice that all the options that apply only to paragraphs have names that begin with paragraph-. All of these options are local options. That is, if you nest a paragraph within another, or if you place paragraphs in a Graphic, any paragraph option that is set on the container does not pass through to the contained paragraph. This is necessary since paragraph options alter the alignment and indentation of contents in a paragraph. Since paragraphs are often embedded in other paragraphs, and indentation-related options specify relative values, having local paragraph options prevents the possibility of obtaining unanticipated results.

Block Quotes
A block quote is a section of text that is separated from the rest of the text. Block quotes usually appear indented from both sides of a Web page and are often used for displaying long quotations. Block quotes can be defined by specifying the right and left edges, or by using the predefined paragraph format blockquote.

Code:
{curl 6.0, 7.0 applet}
{curl-file-attributes character-encoding = "utf8"}

{applet  {compiler-directives careful? = true}}
{paragraph
   The Curl IDE includes all of the tools you need to build rich Internet applications.
   You write applets in the Curl language, a powerful object oriented language, using the Curl IDE.
   {blockquote
   The Curl Run Time Environment (RTE) is free to end users,
   and includes a browser plugin so that any user who installs
   the RTE can run applications on your web site simply by visiting
   the url where you have deployed the applet.
   }
}

Note that blockquote is a Curl pre-defined format in which {blockquote ...} is equivalent to:

Code:
{paragraph
   paragraph-left-indent=8em,
   paragraph-right-indent=8em,  
... }


For more information regarding paragraph formats, please refer to the following section in the Curl Documentation:Curl Developer's Guide > Text Formatting > Paragraph Formats and Options



Formatting Specific Text in a Paragraph
You can control the appearance of text in your document by specifying formatting on specific words or sentences, rather than the entire paragraph. In these cases, the text formatting will override any paragraph settings that are placed.

Each time we specify text formatting, we can use the {text ...} format. Each property/value combination must be delimited with a comma. Alternatively, we can specify predefined text formats such as bold or italic. Notice that predefined character formats can also be nested.

Code:
{curl 6.0, 7.0 applet}
{curl-file-attributes character-encoding = "utf8"}

{applet  {compiler-directives careful? = true}}

{paragraph
   color = "navy",
   font-size = 10pt,
   font-family = "Helvetica",
  
   The {text font-style = "italic", Curl IDE} includes all of the tools you need to build {italic rich} Internet applications
   using the Curl content language. The Curl Run Time Environment (RTE) is free to end users,
   and includes a browser plugin so that any user who installs
   the {bold{italic RTE}} can run applications on your web site simply by visiting
   the url where you have deployed the applet.  
   {br}
   {text
       font-weight = "bold",
       font-style = "italic",
       color = "red",
       You write applets in a powerful object oriented language using the Curl IDE.
   }
}
In the above example, we have also included a line break . This is an example of using a character format without content. Other formats like this include: bullet, copyright, degrees, em-dash, en-dash, registered-trademark, and trademark.

For more information regarding character formats, please refer to the following section in the Curl Documentation:Curl Developer's Guide > Text Formatting > Character Formats and Options


Creating Custom Text Formats
When you create multiple documents belonging to the same product, application, book, or company, you are likely to want a common template of formats to ensure a consistent appearance.

To define your own character or paragraph format, you can either build on one of the predefined formats, or you can define your own format. Both ways use define-text-format.


Code:
{curl 6.0, 7.0 applet}
{curl-file-attributes character-encoding = "utf8"}

{applet}

{define-text-format emphasis as text with
   font-style = "italic",
   font-family = "Courier"}

{define-text-format blue-highlighted as paragraph with
   color = "blue",
   font-style = "italic",
   font-weight = "bold"
}

{blue-highlighted Learning Curl is {emphasis fun!}}
Tip: Consider defining a new text format more closely suited to your purpose. For example, if you're writing a book on insects, you might want both the Latin names and the common names to be italicized, but if you use italic directly, then it would be difficult for you to later change the formatting of the common names.

For more information regarding paragraph formats, please refer to the following section in the Curl Documentation:Curl Developer's Guide > Getting Started with Text Formats > Organizing Text Formats