Coyote (coyotecult) wrote in write_away,
Coyote
coyotecult
write_away

Saturday References and Resources: Formatting for LJ and Webpages

Them's some nifty tricks. And such.

Formatting for LJ and the Web

The Basic Text Markup Tags

italics : <i>text</i>
bold : <b>text</b>
strikethrough : <s>text</s>
underline : <u>text</u>
smaller : <span style="font-size: smaller">text;</span>
larger : <span style="font-size: larger;">text</span>
colored : <span style="color: #xxxxxx;">text</span>
    ( Example: red : <span style="color: #FF0000;">text</span>
highlighted : <span style="background-color: #xxxxxx;">text</span> )
    ( Example: highlight : <span style="background-color: #FFFF00;">text</span>
colored/highlighted : <span style="color: #xxxxxx; background-color: #xxxxxx;">text</span> )
    ( Example: highlight : <span style="color: #FF0000; background-color: #FFFF00;">text</span> )

Preserving Whitespace

The <pre> tag is very useful for poetry more playful with spaces than normal. It preserves whitespace, but you can still use markup such as <i> and <b>. Here's an example of some text formatted with <pre>text</pre>:

Casabianca

Love's the boy stood on the burning deck
trying to recite "The boy stood on
the burning deck". Love's the son
       stood stammering elocution
       while the poor ship in flames went down.

Love's the obstinate boy, the ship,
even the swimming sailors, who
would like a schoolroom platform, too
       or an excuse to stay
       on deck. And love's the burning boy.

        -- Elizabeth Bishop


As you can see, <pre> will change the font to a fixed-width font. If you don't want this effect, you can use this tag instead:

<span style="white-space: pre;">text</span>

Which will instead give you:

Casabianca

Love's the boy stood on the burning deck
trying to recite "The boy stood on
the burning deck". Love's the son
stood stammering elocution
while the poor ship in flames went down.

Love's the obstinate boy, the ship,
even the swimming sailors, who
would like a schoolroom platform, too
or an excuse to stay
on deck. And love's the burning boy.

-- Elizabeth Bishop


Which should work on most modern browsers.

WARNING: Text within <pre> tags does not wrap on its own! It will continue the same line until met with a <br /> or line break. This makes it mostly unsuitable for, say, indenting prose.

Using &nbsp; to make multiple spaces

If you want to indent a line or otherwise make spaces that don't collapse to one space in browsers, you can use the "&nbsp;" code. It stands for "NonBreaking SPace", which is a good way to remember it. Here's five &nbsp; in a row: "     "

Character Codes -- Using >, <, and more exotic characters

&nbsp; isn't the only character code -- many other useful codes exist, for characters like ¢ and £ and § and ö. A quick list can be find here and a more comprehensive one is here. They're especially useful for < (&lt;) and > (&gt;), which might otherwise get mistaken for HTML markup! You can even make em dashes ( — ) with &mdash;!

The LJ Specific Tags -- <lj-cut>, <lj user>, <lj-raw>

The FAQs of the Matter

Paragraphs with Indents

If you don't want to use &nbsp;s to indent a paragraph, there's a much cleaner way. Surround all your paragraphs with the <p style="text-indent: 3em;">text</p> tag. 3em is a good value, but can be replaced by another valid CSS length. Indented paragraphs:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc enim. Nullam feugiat diam non lectus. Mauris tellus. Vivamus eu turpis a turpis dignissim placerat. Mauris tempus. Maecenas nec sapien et purus blandit feugiat. Quisque vel nibh et est rhoncus rhoncus. Quisque lacinia metus ut nisl.

Nulla nec arcu. Nunc interdum purus ac quam. Nullam imperdiet. Cras interdum justo sit amet felis. Etiam blandit auctor augue.


Blockquotes

Putting text between <blockquote>these</blockquote> will quote a piece of text like this:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc enim. Nullam feugiat diam non lectus. Mauris tellus. Vivamus eu turpis a turpis dignissim placerat. Mauris tempus. Maecenas nec sapien et purus blandit feugiat. Quisque vel nibh et est rhoncus rhoncus. Quisque lacinia metus ut nisl.

Nulla nec arcu. Nunc interdum purus ac quam. Nullam imperdiet. Cras interdum justo sit amet felis. Etiam blandit auctor augue.


Text Alignment

Want to have your text aligned to the center, right, or justified? Surround the portion with

<div style="text-align: ALIGN;">All your aligned text here</div>

ALIGN can be any of center, justify, left, or right.

Left: <p style="text-align: left;">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc enim. Nullam feugiat diam non lectus. Mauris tellus. Vivamus eu turpis a turpis dignissim placerat. Mauris tempus. Maecenas nec sapien et purus blandit feugiat. Quisque vel nibh et est rhoncus rhoncus. Quisque lacinia metus ut nisl. Nulla nec arcu. Nunc interdum purus ac quam. Nullam imperdiet. Cras interdum justo sit amet felis. Etiam blandit auctor augue.



Justify: <p style="text-align: justify;">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc enim. Nullam feugiat diam non lectus. Mauris tellus. Vivamus eu turpis a turpis dignissim placerat. Mauris tempus. Maecenas nec sapien et purus blandit feugiat. Quisque vel nibh et est rhoncus rhoncus. Quisque lacinia metus ut nisl. Nulla nec arcu. Nunc interdum purus ac quam. Nullam imperdiet. Cras interdum justo sit amet felis. Etiam blandit auctor augue.



Center: <p style="text-align: center;">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc enim. Nullam feugiat diam non lectus. Mauris tellus. Vivamus eu turpis a turpis dignissim placerat. Mauris tempus. Maecenas nec sapien et purus blandit feugiat. Quisque vel nibh et est rhoncus rhoncus. Quisque lacinia metus ut nisl. Nulla nec arcu. Nunc interdum purus ac quam. Nullam imperdiet. Cras interdum justo sit amet felis. Etiam blandit auctor augue.



Right: <p style="text-align: right;">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc enim. Nullam feugiat diam non lectus. Mauris tellus. Vivamus eu turpis a turpis dignissim placerat. Mauris tempus. Maecenas nec sapien et purus blandit feugiat. Quisque vel nibh et est rhoncus rhoncus. Quisque lacinia metus ut nisl. Nulla nec arcu. Nunc interdum purus ac quam. Nullam imperdiet. Cras interdum justo sit amet felis. Etiam blandit auctor augue.



Getting the Formatting from Word

This is my most unfavorite option to format things of all, but if you absolutely must, make sure that there isn't an XML schema tag in there! They look like this:

<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

This is a post that has one. Posts containing those cannot be tagged due to technical balking from LJ!

Word also isn't so good with poetry, due to features like the autocapitalization of lines. (Turning autocapitalization off.) Word's pretty good with prose, but for the masochistic there's always the LaTeX system. For the simplistic of either inclination, there's jEdit.

Other References

HTML Tutorials
CSS Tutorials

W3C Table Specifications
Table Sampler
Table Tutorial with Examples
Making Lists



Thanks to everyone who's responded to people's writing this week:
taliastar, beethovenette87, dollontherag, blue_lightning, copperbird,
attawba, slomosexual, 41922, auraesque, gardenwaltz, hide_lampshade, lifeisoverrated, lovelineny, mmmontserrat, quiet_lamb, ryam_baco, theclarewantslj, twisting_you

(If I missed you and you made a critique within the past week, link me and I'll add you right aways.)
Tags: feature: saturday resources
Subscribe

  • Zine Mail

    I wrote a zine and really, I just like to give it to people. It contains a drawing, some poems from the clouds series I did, and some material from…

  • Found Poetry

    Let's talk about found poetry! A few days ago, I submitted a piece to Rattle editor Tim Green's (timiathan's) Found Poetry Project. Here…

  • Rejection Slips

    I hope you have been saving your rejection slips. There is a journal that specializes in great works that have been rejected five times. There is…

  • Post a new comment

    Error

    Comments allowed for members only

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

  • 16 comments

  • Zine Mail

    I wrote a zine and really, I just like to give it to people. It contains a drawing, some poems from the clouds series I did, and some material from…

  • Found Poetry

    Let's talk about found poetry! A few days ago, I submitted a piece to Rattle editor Tim Green's (timiathan's) Found Poetry Project. Here…

  • Rejection Slips

    I hope you have been saving your rejection slips. There is a journal that specializes in great works that have been rejected five times. There is…