Hurricane Gustav has knocked over my satellite dish, limiting my Internet access for the next several days.

I've created a zen stylesheet called Jukka Pro, based on Ascorbic's Jukka Emulation. There used to be a screenshot above of Carbonated but now it's the outdoor outlet I found that was shorted out for not being properly sealed against the rain. Carbonated has advanced features, you're not ready for it. The purpose of Jukka Pro is twofold.

1. Use margins, headers, and whitespace more effectively to improve readability. Paragraphs have a 10px margin from the left side of the page, and headers are less margin so they stand out from the sections they head better.

2. Make invalid HTML, such as improper use of blockquote and lack of a p tag in the first paragraph, obvious and ugly. This is to demonstrate the importance of proper markup and the difference between semantic markup and layout.

Missing p tags will display in a sans-serif font, unlike the normal p tags which will display paragraphs in a serif font which is easier to read for large blocks of text. Blockquotes used as margin tools will now look very silly because of the grey vertical line next to and dashed lines above and below the entire writeup. Small tag abuse is now impossible, as small tags no longer stack. Big tags still stack though, so go nuts.

Besides the margins, other nice features are the serif font used for paragraphs (headers and most site content are still sans-serif), visited links only change color in softlinks and New Writeups, and the automatic small-ification of SUP and SUB characters (this does not interfere with any small tags already there). List items now have extra space, which is important for short list items and long list items that lack p tags.

Otherwise it's pretty much Jukka.

Before I begin, I'd like to mention that E2 is not a dry encyclopedia. It's good to have fun with your work here, because something fun to write is easy and enjoyable to read, and approachable by the average person. However, there are a few very simple things that you can do to give your work a nice formatting style without interfering with your own personal writing style. These are all of course optional, but they can make a big difference.

10 Simple Ways to Make Your E2 Writeup Look More Professional

As E2 grows and is indexed by Google, it becomes more and more accessible to the public as an easy-to-understand, plain English knowledge database free of complex, nonstandard formatting or reliance on pictures. However, to be really useful, Everything2 must be taken seriously as a user-written encyclopedia. This means of course careful fact checking, avoidance of hearsay and urban legends, and source citations when necessary. But it also means that it must look professional.

First impressions are important, and your article's first impression will be based on how it looks. The second impression is the grammar and spelling. After you've passed those tests, then the reader will evaluate its content. If you can't be trusted to proofread, how can you be trusted to fact check? If you haven't so much as run a spell checker across your work, where else did you take shortcuts? Appearance counts.

Most of the articles on E2 are formatted with little more than <p> tags marking paragraphs, plus of course the hard links. This is perfectly acceptable and does a fine job of organizing your content. But HTML contains a complex and rich formatting system capable of so much more. This is blessing and a curse, since it can be difficult to sift through them all to pick out the few really useful ones from the enormous list including many with highly specialized and limited application. Although E2 doesn't support all HTML tags, if you really want your work to shine, there are a few tags that come in very handy. These 10 will cover just about anything you need to make a professional looking node.

__________
____________________
_______________

Use Proper Markup

E2's default layout isn't very good. Headers don't stand out as much as they should, the margins aren't as wide as they could be, there isn't enough whitespace, and there's no good way to indent the first line of your paragraphs. But it is not your job to worry about this! Your responsibilities are to provide content and semantically mark up your work, using the HTML tags as they were intended. They should be used to mark paragraphs, lists, quotes, and emphasis, not to try to force the browser to display things the way you think they should.

The truth is, the administration knows that E2's default layout is crap. That's why they created the Zen theme, which is E2's first attempt to modernize the way our articles are laid out, using stylesheets for layout and HTML for markup. Zen may become E2's future default layout, or perhaps the basis for it. Any attempt to fix the layout by abusing HTML tags will (will) cause additional problems later on when the layout is fixed. Without correct markup, your pseudo-layout hacks will make what looks lovely in Jukka incompatible with any future design changes. Proper use of markup will ensure compatibility with all future layout changes.

Frequently abused tags include &nbsp;, <blockquote>, and <ul>. Use these tags as they were intended. I have also reversed my previously pro stance on <p align=justify> — this is another layout issue and should be left up to the stylesheet, not the HTML. And don't forget to close your tags when you're done with them.

<p>Proper markup of your paragraphs means putting a <p> at the beginning of each paragraph and a </p> at the end, like this example. It is important to note that this means "the enclosed text is a paragraph" — it does not mean "put a double space here"! Do not mark off paragraphs with <br><br> — this does not mark the text as a paragraph and will not be recognized as such by stylesheets.</p>

<pre>

Although it looks similar to <tt> in that it puts the text in a monospaced font, the <pre> tag is used for a different purpose. <tt> is used on individual words or short phrases. <pre> is used when there are several lines of text which need to be lined up neatly. This is often used in ASCII art and also to organize text into a table format because it overrides the way HTML ignores whitespace, instead maintaining the spaces and carriage returns. Do not use the TAB key with the <pre> tag, because the way the text lines up will vary depending on the specific font the reader's browser uses to display monospace. Regular spaces will always display correctly. Be aware that some formatting tags such as <sub> or <small> will change the font size and disturb the way the text lines up.

 Column 1 | Column 2 
----------+----------
 Item A   |  53.26   
 Item B   |   2.687  
 Item C   | 156.2    

<em> (or <i>)

Italics adds emphasis. It says this is the key word in the sentence that holds the most importance to its meaning. You should never use ALL CAPS or *asterisks* for emphasis, as this implies that you do not have access to the appropriate formatting tools. When italicizing a word followed by punctuation, it is often more clear and readable to include the punctuation in the italics, especially in the case of the colon, semicolon, apostrophes and double quotes. Italics can also be used to identify foreign words in a sentence, giving your work a certain je ne sais quoi.

<strong> (or <b>)

Boldfacing a word or short phrase draws attention to it. This is useful for minor headers and key vocabulary words. Bold text makes it easy to skim a long article for the part you are looking for. In mathematics, it also denotes that the variable is a vector rather than a scalar value. This tag should not be used to add emphasis to a word. That's what italics are for. Boldface should also not be used in conjunction with <big> to make headers. The <h2> and <h3> tags will take care of that.

<h2> and <h3>

Headers for sections of an article should be marked off by <h2> or <h3>. These tags display text as large and bold and separated from the rest of the text (there is no need to use <p> or <br>). 3 makes the text stand out as slightly larger, and 2 makes the text much larger, in fact distractingly so, so in general use 3 unless your work is organized such that it needs additional heading styles. The heading at the top of this writeup is in <h3> tags and the sub-headings are <h5>. Although the full range is 1–6, supposedly listed in decreasing size, 1 is not displayed as larger than 2 in E2's default layout (this will likely be fixed in the future). Boldfaced text should only be used to mark minor points inside of paragraphs, not to mark sections.

&mdash;

The em dash is longer than a hyphen or an en dash and is used when a comma or even a semicolon just won't suffice to drive home just how separated a thought is from the rest of the sentence in which it appears. It is also used in dialogue to denote that someone has been cut off in the middle of what he was saying. Do not confuse this usage with the ellipsis, which denotes that a thought has simply trailed off without being finished. Use the em dash where you would otherwise have used two hyphens:  --
Swap says "I also use &mdash; for dialogue in several non-English languages."

• Interjected thought
  He couldn't stop thinking of Rhonda — her eyes were the most beautiful sky blue — no matter what he tried to occupy his mind with.
• Cut off in the middle of talking
  "But I thought—"
  "I don't pay you to think!"
• Trailed off in the middle of a thought
  "You know what they say, birds of a feather..."

&ndash;

The en dash is halfway between a hyphen and an em dash and is generally used for displaying a range, such as June 27–July 1. Hyphens are acceptable in this case but the en dash is more strictly correct.

<tt>, <var>, <kbd>, and <code>

Teletype style puts a selection in a fixed width, or monospaced, font, usually to differentiate it from the rest of the text. This is often handy for making variable names or an example line of programming code stand out in a line of text. It is also commonly used to denote a command to be typed into a computer, since this clearly marks the beginning and end of what needs to be typed without confusing brackets or quotes which may or may not be part of the text to be typed. For example:
Go to http://www.google.com and search for "computer jargon".
is more confusing than
Go to http://www.google.com and search for computer jargon.
because it is unclear if you are supposed to type the quotes, which searches for a phrase, or not, which simply searches for all the words.
Strictly, variable names should use the <var> tag, things to be typed should use the <kbd> tag, and lines of programming code should use the <code> tag, but the difference is usually not important unless you are formatting for something other than a human reader.

<small>

The small tag can be used to mark off a section of text that doesn't really "belong" there, such as notes directly to the reader from the author. I've done this from time to time myself. It is also useful for visually marking off the footnotes or references cited as a separate entity from the rest of the article. Do not use other formatting such as boldface or italics in conjunction with the <small> tag as it becomes very difficult to read. Although the <small> tags can be nested to make the text smaller and smaller, two result in eye strain and three becomes completely unreadable. This does have one interesting use, however, in that it can be used to intentionally hide text, such as movie plot spoilers and answers to riddles. To read it, the reader will have to copy-paste the section into Notepad or some other program which strips off the formatting. If you keep the selection short, it can be pasted directly into the browser's location bar, which is most convenient.

<u>

Underlining has limited usefulness on the World Wide Web, since it can cause confusion with hyperlinks and does little that boldface or italics cannot accomplish. In general, underlining is only useful for citing certain types of sources in accordance with MLA guidelines. Unlike italics, when underlining a word that ends with punctuation, the underline often obscures commas, periods, and other low punctuation, so the underlining should be ended before the punctuation mark.

_______________
____________________
__________

After you get comfortable with these tags, you'll occasionally run across some new formatting used by another noder and wonder "Now how did he do that?" The best way to find out is to use your browser's view source menu or right click option to view the HTML source. Now an E2 page is very long and the part you want to see is in the middle, so you need an easy way to find the part you're looking for. You need a short and unique phrase which does not have additional formatting in it, which appears near the formatting you want to use. Use ctrl-f or apple-f to search for that phrase in the HTML source (if the phrase you picked has formatting in it, you won't find it because the code you are searching will have the formatting tags interrupting the phrase). Then it's a good idea to search E2 for that tag to see what your various options are and how to use it properly. Over a few weeks, you can really build up an impressive HTML vocabulary this way. Don't forget about E2's list of special symbols you can use either.

Bitriot informs me of an easier way to check a writeup's HTML formatting on E2. Take the URL and append &displaytype=xmltrue to the end of it. This will bring up the code E2 uses to display the writeup information only, without the standard formatting used in the rest of the site getting in the way (such as the nodelets). This makes it easier to find the formatting you are looking for in an E2 node. For example:
http://www.everything2.com/index.pl?node_id=1737448
http://www.everything2.com/index.pl?node_id=1737448&displaytype=xmltrue

One last note: Always close your tags in the reverse order that you opened them. Browsers that strictly follow the HTML standards will sometimes not display your formatting correctly if you don't. I see this happen most often with <blockquote> text and <ol> and <ul> lists, and it can sometimes lead to the entire bottom half of your writeup being displayed in italics or boldface.

&#9834;= ♪ &#9835;= ♫
&#9833;= ♩ &#9836;= ♬

&#399; Ə &#601; ə &#1241; ә &#1240; Ә
heavy metal schwa: &#1243; ӛ
captical schwa: &#8707; ∃
&#8467; = ℓ
&#294; &#295; &#8463; = Ħ ħ ℏ
&#188; – &#190; = ¼ ½ ¾
&#8531; – &#8542; = ⅓ ⅔ ⅕ ⅖ ⅗ ⅘ ⅙ ⅚ ⅛ ⅜ ⅝ ⅞
&#8730; – &#8734; = √ ∛ ∜ ∝ ∞
&#178; &#179; = ² ³
&#8304; &#8308; – &#8313; = ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹
&#128; &#162; &#163; &#164; &#165; = € ¢ £ ¤ ¥
&#153; &#169; &#174; = ™ © ®
&#134; &#135; &#167; &#182; &#8253; = † ‡ § ¶ ‽
&#913; – &#937; = Α – Ω
&#945; – &#969; = α – ω
&#1071; = Я
&#8592; – &#8682; = various arrows
&#9788; &#9789; &#9790; = ☼ ☽ ☾
&#9791; – &#9799; = ☿ ♀ ♁ ♂ ♃ ♄ ♅ ♆ ♇
&#9800; – &#9811; = ♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓
&#8629; &#8962; &#8677; &#8679; &#8981; &#8682; &#8984; &#8987; &#8997; &#9003; = ↵ ⌂ ⇥ ⇧ ⌕ ⇪ ⌘ ⌛ ⌥ ⌫

&#768; – &#846;
768: à á
770: â ã ā a̅ ă ȧ ä ả å a̋
780: ǎ a̍ a̎ ȁ a̐ ȃ a̒ a̓ a̔ a̕
790: a̖ a̗ a̘ a̙ a̚ a̛ a̜ a̝ a̞ a̟
800: a̠ a̡ a̢ ạ a̤ ḁ a̦ a̧ ą a̩
810: a̪ a̫ a̬ a̭ a̮ a̯ a̰ a̱ a̲ a̳
820: a̴ a̵ a̶ a̷ a̸ a̹ a̺ a̻ a̼ a̽
830: a̾ a̿ à á a͂ a̓ ä́ aͅ a͆ a͇
840: a͈ a͉ a͊ a͋ a͌ a͍ a͎

• Science
  • Math
    1. Converting real numbers to binary
    2. Long division
    3. The disappearing area problem
    4. Avogadro's Number
    5. Parsec
    6. Surface area
    7. Similar triangles
    8. Triangulate
  • Nuclear Physics
    1. Betavoltaics
    2. Ballotechnic nuclear bomb
    3. Control rod
    4. Curve of binding energy
    5. Mass defect
    6. Elephant's foot
  • Biology
    1. Utahraptor
    2. Dromiceiomimus
    3. Titan arum
    4. Fairy ring
  • Other
    1. Squeezing toothpaste back into the tube
    2. Bottomless Pit
    3. Volt amp
    4. Electrical weapon
    5. Gyroscope
    6. Extracting sunbeams out of cucumbers
    7. Kinetic energy
    8. Energy density
    9. Variable cost
    10. Fixed cost
    11. Not labeled for individual retail sale
    12. Toilet splashback
    13. Hole flow
• Technology
  • Tools
    • Electrical
      1. Crimper
      2. Electrical tape
      3. Wire Stripper
      4. Mushroom
      5. Dumb end
      6. Adjustable wrench
    • Other
      1. Oyster tongs
      2. Box cutter
      3. Tools everyone should have
      4. Nut
      5. Lock washer
      6. Pickle fork
      7. Slip joint extension tube
      8. Elbow trap
  • Household
    • Electrical
      1. Remote control
      2. 12:00 Flasher
      3. Christmas lights
      4. British Residential Electric Wiring
      5. Electric Shock
      6. Stranded wire
      7. Atomic clock
      8. Armored cable
      9. 9 Volt battery
      10. Fish tape
      11. Electrical outlet
      12. Fused plug
      13. Ring main
      14. Residual current device
      15. Ground fault circuit interruptor
      16. Grounded conductor
      17. Grounding conductor
      18. Earth ground
      19. Wall voltage
      20. 220
      21. 110
    • Other
      1. Döbereiner's Lamp
      2. Ice rink
      3. Safety Glass
      4. Paper Shredder
      5. Furniture repair
      6. Hair Dryer
      7. My daily energy consumption
      8. Evaporated milk
      9. Float glass
      10. Pouf
      11. Mr. Coffee
  • Industrial
    • Trucks
      1. Forklift
      2. Road train
      3. Loading a truck
      4. Underride guard
      5. Pallet
      6. Outrigger
      7. What happens when a crane touches a power line
    • Electrical
      • Motors
        1. Conveyor belt
        2. Motor starter
        3. Overload
        4. Capacitor start motor
        5. Motor control center
        6. DC injection braking
        7. Braking resistor
        8. Variable frequency drive
        9. Synchronous speed
      • Sensors
        1. Sensor
        2. Capacitive proximity sensor
        3. Inductive proximity sensor
        4. Photoelectric sensor
      • Safety
        1. Confined space
        2. Accident no injury
        3. Fire extinguisher
        4. Group lock-out box
        5. Hard hat
        6. Redundant Safety Device
        7. Hot Work
        8. OSHA lock-out procedure
      • Other
        1. Center tapped transformer
        2. Ground tree
        3. Solid state
        4. Shading ring
        5. Junction box
        6. Electrical problems of great magnitude
        7. Knife switch
        8. Relay
        9. PLC
        10. Voltage divider
        11. Current source
        12. Voltage source
        13. Nuisance trip
        14. Third harmonic
        15. Ground resistance
        16. Circuit breaker
    • Other
      1. Whitewater
      2. Sheet metal
      3. Planetary gear
      4. Baghouse
      5. Slurry
      6. Hydropulper
  • Medical
    1. What happens when you wear your contact lenses for too long?
    2. Coronary artery bypass
    3. High Pressure Injection Injury
    4. Mr. Yuk
    5. Surgilube
    6. Woods lamp
    7. Human leukocyte antigen
  • Other
    1. Pylon turn
    2. Deep Ocean Assessment and Reporting of Tsunamis
• Chemicals
  1. Propane
  2. Barium nitrate
  3. Difluoroethane
  4. Neat
  5. Magnesium carbonate
  6. Lauryl-23
  7. Triethanolamine
  8. Phenylalanine
  9. Stearic acid
  10. Magnesium hydroxide
  11. Simethicone
  12. Rockwool
• Culture
  • Literature
    1. The Big Lie
    2. The Zodiac
    3. Two-word Poem
    4. Dead as a Doornail
    5. Leaflet
    6. The Letter of Aristeas part 1 part 2 part 3
    7. Paycheck
    8. Shoggoth
    9. My name is legion, for we are many
  • 70s–90s
    • Star Wars
      1. Battle of Hoth
      2. Battle of Yavin
    • Star Trek
      1. Garak
      2. USS Enterprise-D
      3. Memory Alpha
      4. USS Enterprise-E
      5. Borg Queen
      6. Resistance is Futile
      7. Live Long and Prosper
      8. Bird of Prey
    • Cartoons & Comics
      • Teenage Mutant Ninja Turtles
        1. Casey Jones
        2. Teenage Mutant Ninja Turtles
        3. Mouser
        4. Rocksteady and Bebop
        5. Baxter Stockman
        6. Krang
      • Transformers
        1. Transformers
        2. Megatron
        3. Scramble City
        4. It's OVER, Prime!
        5. Energon cube
      • Other
        1. Tween
        2. Limited animation
        3. Cow Tools
        4. Pocket Protector
        5. The Super Mario Bros. Super Show
        6. Maximum Carnage
        7. The Tick
        8. My Little Pony The Movie
        9. He-Man and the Masters of the Universe
        10. C.O.P.S.
    • Intellivision
      1. Space Spartans
      2. B-17 Bomber
      3. Astrosmash
      4. Tron Deadly Discs
    • Movies
      1. Mr. Blandings Builds His Dream House
      2. Four Rooms
      3. Superman IV
      4. Smala Sussie
      5. Fritz the Cat
      6. First Blood
      7. The Best Little Whorehouse in Texas
      8. Bloodsport
    • Other
      1. Shmuzzle
      2. Peanut Butter M&M's
      3. Blading
      4. Long black leather trenchcoat
  • Modern
    • Cartoons
      1. A Leela of Her Own
    • Internet & Computers
      1. Force Refresh
      2. tinyMCE
      3. Neckbeard
      4. Minazo
      5. iPhone
      6. Screamer
      7. Pet python eats Cambodian boy
      8. One-pixel transparent GIF
      9. Transparent monitor
      10. May 18, 2006 (Enable CGI in MAC OS X Apache)
      11. The Ultimate Showdown of Ultimate Destiny
      12. Red Meat Construction Set
      13. Princess Leia the Yodel of Life
      14. Google Image Search
    • Video Games
      1. The Legend of Zelda: Phantom Hourglass
      2. Meat Shield
      3. Final Fantasy III
      4. Super Princess Peach
      5. Cerebrate (Starcraft)
      6. Deanimator
    • Other
      1. Red Delicious
      2. Why is it that the alien mortal enemies of humanity always have some fatal flaw?
      3. Missouri
      4. Vin Diesel
      5. La Grange Chicken Ranch
      6. Cloquet, Minnesota
      7. Feed the hog
• Everything2
  1. December 11, 2007 (Financial advice)
  2. December 3, 2007 (I like it! links)
  3. Noderissima 2006
  4. September 16, 2006 (What is E2?)
  5. Editor Log: September 2006 (Common new user mistakes)
  6. Editor Log: November 2005 (Top 10 most common edits)
  7. Editor Log: December 2004 (HTML comments as an editing tool)
• Original Fiction
  1. The Tanzanian Devil
  2. October 24, 2004 (Zombiequest entry)