---

Greased 1.5 Addendum

June 6th, 2015

Hey everyone,

As I was looking through Greased as it appears in my mailbox I noticed something strange; it's not a big deal but it's worth pointing out.

Over in the HTML Tips and Tricks section, the horizontal lines are being treated quite strangely, and it has occurred to me that they may not look the same in everyone's email program.  In fact, despite the exact same HTML/CSS copied and pasted directly from the email to the site, the web-version of Greased 1.5 ( http://nerdbacon.com/newsletter/vol-1-5 ) displays them slightly differently.  Weirdest of all, a couple of the examples actually appear differently depending on whether I'm viewing the email or writing the email.  Literally the line will look a certain way as I'm viewing it, and then when I click reply and it automatically quotes the email, it will look a different way - the way I intended it to when I drafted it.

There are a few reasons I can think of why this happens (though I can't fully explain the difference between reading and viewing emails...) but they aren't really important when it comes to understanding how to use this bit of HTML.  Though the issue is minor, I figured that it might be really confusing to those of you who may actually plan to use horizontal lines in your articles, so I thought I'd take a few moments to explain it a little more in-depth here, and at least try to offer up some more concrete examples without leaving anything to chance.  If you're not all that interested in making horizontal lines, feel free to skip the rest of this.  As I said, a basic <hr /> will be more than sufficient for most purposes; however, you may also wish to add lines of a particular color, which is one of the discrepancies encountered in the previous email.

The big difference I noticed was with how 2 examples in particular were handled.  The first was when I was illustrating how to add color to a line with "no thickness" (the default thickness is 1 pixel; if it was "0" it wouldn't be visible).  The markup for this line is <hr style="width: 80%; border-color: blue; margin-left: auto; margin-right: auto;" /> and in my email editor, this creates a blue line. However, since we haven't explicitly stated the other 2 potential border attributes, I guess some programs impose their own default styles.

What we want to do here is be 100% specific and unambiguous so that whatever is displaying the HTML knows exactly what we want to display.  Some of the hr attributes can be done purely with HTML, but I prefer to use inline CSS for consistency.

• We've already established that a simple horizontal line can be generated with <hr />. If you want to take this a step further, we need to add the style attribute, which is what allows us to add inline CSS to the HTML tag.
• So, if doing anything beyond a simple line, your tag will look like <hr style=" your stuff here " />.
• If you want to do the thinnest line possible, technically the line will have no height and what we will be seeing is the border; conversely one can also set the border to 0 and use 1 pixel for the height.
• There are 3 parts to the border, and I can only assume (through a little bit of trial and error) that by not defining all three values (technically they are "properties" since we're in CSS at this point) whatever program being used imposed their defaults. The three border properties are:
  • border-style - Defines the type of border around something, with values such as solid, groove, inset, outset, and ridge. When you want to go as simple as possible, use solid.
  • border-width - We already discussed this in the previous email; this defintes the thickness of the border.
  • border-color - Self-explanatory; defines the border's color. Can be expressed as an approved color name such as black or orange, hex values such as #15e62d, RGB values such as rgb(255,255,0), and even RGB/Alpha (opacity) values such as rgba(21,230,142,0.4) (note that alpha values may not work in all applications, though they should be interpreted safely by any web browser).
  • Individual sections of the border (top, bottom, left, and right can also be defined; not sure why you'd want to do this but if you have a grasp on everything else that's going on and want to know, let me know and I'll be glad to tell you how it's done.
• To make sure we get exactly what we want when it comes to these horizontal lines, we need to define all 3 border properties within our tag.
• My original example of a thin blue line - <hr style="width: 80%; border-color: blue; margin-left: auto; margin-right: auto;" /> - ought to include the 2 remaining border properties to give the desired result. It then becomes <hr style="width: 80%; Border-style: solid; border-width: 1px; border-color: blue; margin-left: auto; margin-right: auto;" /> .
• You can simplify all of this by simply using the border property by itself. Just remember that the attributes need to be listed in this order: style, width, color. Thus ...boder-width: 1px; border-color: blue; border-style: solid;... becomes an easy ...border: solid 1px blue;... .
• Although these small differences may look the same depending on where you use them, it's good practice to go ahead and define all 3 so that you know without a doubt that the line appears exactly as you want it to in all circumstances.
• Another example that didn't show up correctly in my mailbox was the orange line (which was supposed to have a purple border). The original markup was <hr style="width: 20%; height: 5px; border-color: purple; border-width: 4px; background: orange; margin-left: auto; margin-right: auto;" />, and it would seem that the simple act of not defining a border-style cause the purple border to disappear completely once the email reached my inbox. A simple addtion of border-style: solid; (or whatever style you choose) is all that is needed to make things right. Accordingly, it can all be simplified to border: solid 4px purple;.

If you've been paying attention, you might've come to the conclusion that even by setting the border at a single 1 pixel we're not getting the thinnest line possible. Since each piece of the border (top, bottom, left, and right) is 1 pixel wide, our line can't be any smaller than 2 pixels; even with no height, the top and bottom borders are still stacked on top of each other. While I think this line is perfectly thin for most uses, and I thoroughly recommend the above method for creating small, colored lines, but there is a way to get rid of the border altogether.

• The default height value for any <hr /> is zero, meaning if we don't explicity define a height, we will be only seeing the border by default. (However, someone out there could set their style sheet to automatically apply some degree of height to all <hr />tag - this is unlikely, but explicitly setting the height at 0 will counteract such things, and many applications may impart a default height of 1 pixel, so if it's a concern, again, set the value to zero.)
  • Here's a quick example of what happened in my email program: when I'm writing, the default height is apparently zero, but when it's in my inbox, it's set to 1. The difference is subtle, but it reminds us not to assume anything. If I assume a default value of 0 for the height, the following 2 lines (with a thickness of 2 pixels) will look the same (despite using different methods of achieving the result):

    ---

    ---

    In the second line, the thickness is the result of the height; in the first, it's the result of the borders (because the height is zero). But what if I assume the height will be zero (such as drafting an email) and the default value turns into 1 (such as when I read it)? It doesn't affect the second line (since we defined the height, but check out what happens to the top line (again, it's a sublte differences, but worth pointing out for exacting individuals).

    ---

    ---

• As it turns out, we can get rid of the border altogether and use the height properly, thus shifting the visibility of the horizontal line to the (usually nonexistent) height.
• The only real difference here is that the color of what's inside the borders (the part that's visible once height is set to something above zero) is defined by the property background whereas the border color was defined by either border-color or the simplified border.
• Therefore, to create the thinnest line possible (1 pixel), we need to knock out the borders, give the line 1 pixel of height, and set the background color appropriately. Here's an example of the differences with the corresponding markup:
  • This uses only the borders (all 3 properties defined) with no height: <hr style="width: 30%; border: solid 1px red; margin-left: auto; margin-right: auto;" />

    ---

  • This uses no borders and a 1 pixel height instead: <hr style="width: 30%; border: 0; height: 1px; background: red;" />

    ---

• Alternatively you could do things like only define the top edge of the border for a 1 pixel line, but this is a bit convoluted. You could play with it and end up with interesting results like this:

  ---

  ...But it's a bit unnecessary, beyond the scope of creating simple horizontal lines, and probably a tad (or more) on the useless side.

That's it guys and ghouls.  I know we got into a lot of territory there, but I think it's important to explain (or at least start to explain) the fundamentals behind what's happening so that you understand what piece of the markup is doing what rather than just copying or referring to some random snippet of characters that has absolutely no meaning to you.  I implore you: please don't go overboard creating little boxes and lines all over the place!  Just because something can be done doesn't mean it should be done, and the examples I've given are just that: examples where the concepts in question are clearly addressed.  Whenever you're playing with this stuff, remember to keep 3 very important things in mind:

1. SAVE your work first!
2. NEVER delete, alter, or modify the existing HTML (when in the Text Editor)!
3. ALWAYS click "Preview" to make sure your efforts are being displayed the way you intended; do not rely solely on the Visual Editor for an accurate representation of what the published product will look like.

If you get stuck with your lines, remember the following:

• "Width" refers to the horizontal measurement of the box, "height" refers to the vertical measurement. Some people find it counter-intuitive to think of the thickness as the height.
• Make sure to define all properties, even if you want them set to zero. The properties are:
  • height - If you're a real stickler for detail, you may want to make sure this value is set to zero (0), especially when creating lines out of borders only (my recommendation).
  • border- A value of zero (0) will negate all aspects of the border. Otherwise, values should be in the order of style, width, the color. All 3 border properties can be expressed at once in this manner, or you can define all 3 separately:
    • border-style - Values for different styles of borders. These only become widely apparent as the lines get thicker, and the style solid will be sufficient for small lines. Values include solid, groove, ridge, outset, and inset.
    • border-width - Defines how thick each side of the border will be, in pixels, such as a value of "1px" or "10px".
    • border-color - Color of the border, defined either by HTML color names, hex codes, or RGB values. To be 100% safe, stick to hex codes.
  • background - Only needed when height is greater than zero; defines color of the line between the borders.
  • margin - Serves a variety of uses, but you'll only really need them to center your lines in the form of margin-left: auto; and margin-right: auto;.

If everything checks out, you may have a syntax issue. Here are a few extra tips about formatting your HTML/CSS as well:

• HTML tags begin and end with arrowheads - < opens the tag and > closes it.
• The hr tags is what's known as a "self-closing tag," meaning it does not need a separate tag to close the effect. That's what the trailing backslash (/) is for. Many programs will not require this backslash to function properly, though it is good practice to add it, with a preceeding space.
• HTML tags have names, attributes, and values.  In the <hr style=" xxx " />example, "hr" is the name, "style" is the attribute, and everything within double quotes ("...") is the value.
  • Attributes must be separated from names and additional attributes by a space.
  • An attributes must be separated from its value by the equal sign (=).
  • Values must be encased in double quotes ("...").
  • For our purposes, inline CSS can only be used as a value to the style attribute.
• With inline CSS, you have a declaration, property, and value. In the example ...width: 80%;... , width is the property, 80% is the value, and the two together are a declaration.
  • Each declaration must conclude with a semi-colon (;).
  • A property must be separated from its value by a colon (:).

If everything above looks good and you still can't figure out what's going wrong, let me know and send me a screenshot if applicable and I'll do my best to help! Don't get too bogged down with these little tricks and if it gets to confusing then don't worry about it. However, if you've always been curious about how to enhance the presentation of your articles, stick with it; it's not too difficult to catch on to!

---

NerdBerry NerdBerry@NerdBacon.com

The Cubist TheCubist@NerdBacon.com