Chances are, you already know how to do this
Styling
Styling your composition is an art unto itself. BLUEPHRASE keeps this work separate from the work of writing, by delegating it to
Cascading Style Sheets (CSS).
Writers must concentrate on organizing their thoughts, choosing their words, and making their points clear, before spending any time on styling and decoration. This is what gives writers their best possible chance at successfully conveying ideas to readers. The art of styling can be applied to the author's words later, as emphasis and structure begin to gel.
With BLUEPHRASE, there are several ways to add CSS declarations to your document:
- By using inline declarations with styling shorthand notation
- By adding declarations within a style block
- By referencing external declarations with link semantax
And there are several ways to target CSS declarations to phrases:
- By using semantax
- By using classname shorthand notation
- By using identifier shorthand notation
Inline declarations
Any phrase, paragraph, or division of your document can be styled, using CSS, by inserting declarations at the beginning of the phrase, immediately after the semantax. This type of styling uses special shorthand notation that begins with a caret ^.
This method is not frequently used, because it tends to clutter up your composition, making it harder for you, the author, to read. Nevertheless, it serves a useful purpose in ad hoc situations.
Here is an example, showing: how to color a background, how to emphasize a phrase, and how to decorate and place an image.
First, here's how it looks when rendered by the browser:
The scene was so striking that I couldn't resist adding yet another photograph to the world's vast collection of sunset pics.
Here is the text with inline declarations:
p ^"background-color:black; min-height:3em; padding:1em;"
<<img ^"border:3px double white; float:right; height:3em; margin-left:1em;" `img/sunset.jpg`>>
The scene was <<i ^font-weight:bold so striking>> that I couldn't resist adding yet another photograph to the world's vast collection of sunset pics.
Style block
Inline declarations, like in the above example, obscure the author's words so badly that it's often desirable to resort to style blocks. This is accomplished by enclosing the CSS declarations within a style group delimited with opening and closing curly braces { ... }.
Here is the previous example styled that way:
style {
p {
background-color: black;
min-height: 3em;
padding: 1em;
}
img {
border: 3px double white;
float: right;
height: 3em;
margin-left: 1em;
}
i {
font-weight: bold
}
}
p <<img `img/sunset.jpg`>> The scene was <<i so striking>> that I couldn't resist adding yet another photograph to the world's vast collection of sunset pics.
External declarations
An alternative to style blocks is to place your declarations in an external file and include them using a link. This is a useful technique because you can reuse your declarations across all of your documents, creating consistency akin to branding.
Using an external file would turn the previous example into this:
link `example.css` *rel=stylesheet *type=text/css
p <<img `img/sunset.jpg`>> The scene was <<i so striking>> that I couldn't resist adding yet another photograph to the world's vast collection of sunset pics.
Targeting semantax
In each of the above examples, the targets of the CSS declarations are the generic semantax: p, img and i. This is a powerful way to create consistent styling across your entire document, and it's very appropriate for things such as typographic settings, color schemes, and whitespace (margins) around your text.
Nevertheless, it's not always what you need, sometimes you need to apply one type of styling to some phrases and a different type of styling to others.
Targeting classnames
You can target styling for just a few phrases using CSS classname declarations and BLUEPHRASE classname shorthand notation. Both of these make use of a period followed by an arbitrary class name. Here's an example where images are styled in two different ways: nature and people:
style {
.nature {
background-color: black;
border: 3px double white;
}
.people {
background-color: white;
border: 3px double black;
}
}
h1 Shutterspeed
p <<img .nature `sunset.jpg`>> Sunset over Lake P.
p <<img .nature `moonrise.jpg`>> Moonrise over Lake P.
p <<img .people `lovers.jpg`>> Holding hands
p <<img .people `cotton-candy.jpg`>> Cotton Candy
Targeting identifiers
You can also target your styling to just a single phrase at a time using CSS identifier declarations and BLUEPHRASE identifier shorthand notation. Both of these make use of a hashtag # followed by an arbitrary identifier. Here's an example where each image is styled differently:
style {
#pic1 {
background-color: rgb(128,77,77);
}
#pic2 {
background-color: rgb(192,128,77);
}
#pic3 {
background-color: rgb(0,128,255);
}
#pic4 {
background-color: rgb(77,128,192);
}
}
h1 Shutterspeed
p <<img #pic1 `sunset.jpg`>> Sunset over Lake P.
p <<img #pic2 `moonrise.jpg`>> Moonrise over Lake P.
p <<img #pic3 `lovers.jpg`>> Holding hands
p <<img #pic4 `cotton-candy.jpg`>> Cotton Candy
Combining techniques
All of the above techniques can be combined to provide both consistency and flexibility to your document's style. For example, these paragraphs will all have consistent typography, but the questions and answers will have different backgrounds, and the one identified as incorrect will have a strikethrough line.
style {
p { font-face: serif; }
.question { background-color: yellow; }
.answer { background-color: blue; }
#incorrect { text-decoration: line-through; }
}
p.question What’s the difference between Great Britain and the United Kingdom?
p.answer Great Britain is a geography term; United Kingdom is a political term.
p.question What's the difference between "America" and "The States"?
p.answer#incorrect They are synonymous: citizens say "America", and foreigners say "The States".
p.answer#correct America refers to the two continents of the New World. "USA" is synonymous with "The States".
