write_away: Saturday References and Resources: Formatting for LJ and Webpages

Coyote (

coyotecult) wrote in

write_away,
@ 2005-07-10 03:02:00

Entry tags:

feature: saturday resources

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 : text
bold : text
~~strikethrough~~ : <s>text</s>
underline : text
smaller : text;
larger : text
colored : text
 ( Example: red : text
highlighted : text )
 ( Example: highlight : text
colored/highlighted : text )
 ( Example: highlight : text )

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 and . 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:

text

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 or line break. This makes it mostly unsuitable for, say, indenting prose.

Using   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 " " code. It stands for "NonBreaking SPace", which is a good way to remember it. Here's five   in a row: " "

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

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 < (<) and > (>), which might otherwise get mistaken for HTML markup! You can even make em dashes ( — ) with —!

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  s to indent a paragraph, there's a much cleaner way. Surround all your paragraphs with the text tag. 3em is a good value, but can be replaced by another valid CSS length. Indented paragraphs:

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:

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:

Center:

Right:

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.)

Customize

(Post a new comment)

(Screened Post)

	Dunno. dew_dropped 2005-07-10 01:08 pm UTC (link)
	I didn't know if I was being too personal in my comment? Exaggerated sense of propriety? Too off-topic? I'm not too sure, exactly why. I thought I was being modish and decided to hide it? That's a deeply philosophical question. I'll get back to you on that. ^_^ (Reply to this)(Parent)(Thread)

	Huh! coyotecult 2005-07-10 01:14 pm UTC (link)
	Just curious'n'all, since I wasn't finding a reason for it'n'all. (Reply to this)(Parent)(Thread)

huh noffin

dew_dropped
2005-07-10 01:23 pm UTC (link)

Don't ask me for reasons! I expected better from you Coyotl. Now you've gone and made me feel foolish, with your snarky rationality.

Oh, and did you know that although coyotl's do have a sense of fairness /meaning they know better/ they tend to /unlike wolves or dogs who are better behaved/ promise to play and take the opportunity to mate/and or harm their innocent opponent? Have I shamed you enough? or are you completely shameless?

(Reply to this)(Parent)(Thread)

	Shame! coyotecult 2005-07-10 01:28 pm UTC (link)
	What's that? You ought to come over to my house so we can have fun. I have candy. (Reply to this)(Parent)(Thread)

	Re: Shame! dew_dropped 2005-07-10 01:30 pm UTC (link)
	hahahahahahahaha I know your evil ways, I know better than that. Read all about you in a Time's article on animal morality, and found out you had none. (Reply to this)(Parent)(Thread)

	!!! coyotecult 2005-07-10 01:33 pm UTC (link)
	Baseless accusations. All of them. (Reply to this)(Parent)(Thread)

	Re: !!! dew_dropped 2005-07-10 01:35 pm UTC (link)
	O.K. I'll give you a chance to prove me wrong, and I'll come to your house for candy, but any wrong moves and I'll use my ruler on you. The spatula is next to my ruler of justice. (Reply to this)(Parent)(Thread)

	Well, damn. coyotecult 2005-07-10 01:43 pm UTC (link)
	I think I've just gained a phobia towards rulers! (Reply to this)(Parent)(Thread)

	Re: Well, damn. dew_dropped 2005-07-10 01:45 pm UTC (link)
	Hey, maybe you'll like it. (Reply to this)(Parent)(Thread)

	You sure know how coyotecult 2005-07-10 01:48 pm UTC (link)
	To sweet talk me! (Reply to this)(Parent)

	beethovenette87 2005-07-10 06:13 pm UTC (link)
	Hey, thank you for this post! It is going to help me out a ton! :) (Reply to this)(Thread)

	That's my job! coyotecult 2005-07-10 06:15 pm UTC (link)
	Glad to be of service! (Reply to this)(Parent)

	melange_fiesta 2005-07-31 01:38 pm UTC (link)
	Hey... for the <pre> tag, you can also do the following to make it a different font: <pre><font face="font"> And then at the end you would use </font> before you do </pre> (Reply to this)(Thread)

Heya, Slammer!

coyotecult
2005-07-31 01:48 pm UTC (link)

Very, very true. Although that's old style HTML, if you want the CSS way of doing it one could use the CSS properties of font or font-family in the pre's style such as:

<pre style="font-family: courier, serif;">

Fonts can be such a tricky business and the person would have to know the name of the font in order to do yours'n'my tags here, so the two ways up there will either do the default fixed width with the <pre> or the regular font of the given webpage using the , no knowledge of font names needed.

(Reply to this)(Parent)(Thread)

	Re: Heya, Slammer! melange_fiesta 2005-07-31 01:50 pm UTC (link)
	True. And I realize that your way is probably simpler (or at least I did realize it when it was all explained to me... heh). I just have a thing for old style HTML, since I learned to make webpages with old HTML, and still use it for most things. ^_^ (Reply to this)(Parent)(Thread)

	Re: Heya, Slammer! coyotecult 2005-07-31 02:36 pm UTC (link)
	Yeah, I admit to having a thing for CSS, since it's approximately the spiffiest way to style a webpage evar. ::geek squees:: But now if anybody wants to know the old style way, they'll have your thing as a reference too! More knowledge is good! (Reply to this)(Parent)

Username:		Create an Account Forgot your login? Login w/ OpenID
Password:
	Remember Me
	English • Español • Deutsch • Русский…

Formatting for LJ and the Web

The Basic Text Markup Tags

Preserving Whitespace

Using   to make multiple spaces

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

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

Paragraphs with Indents

Blockquotes

Text Alignment

Getting the Formatting from Word

Other References

Advertisement

About

Help

Get Involved

Legal

Store

LJ Labs

Formatting for LJ and the Web

The Basic Text Markup Tags

Preserving Whitespace

Using &nbsp; to make multiple spaces

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

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

Paragraphs with Indents

Blockquotes

Text Alignment

Getting the Formatting from Word

Other References

Advertisement

About

Help

Get Involved

Legal

Store

LJ Labs

Using to make multiple spaces