kerning, leading, and justified text?

I have a question in an assignment for my course and it's about kerning, leading and jusified text.

7) Demonstrate, kerning, leading, and justified text

Tried to find some examples of kerning and leading but I couldn't find how to do it.

Could someone please write how I do this for me?

Never heard of the first 2 tbh

Kerning is adjusting the space between letter pairs individually. This can be done manually by specifying letter spacing with <span>s, but for all practical purposes it's impossible on the web (as are ligatures).

Leading is controlled in CSS by { line-height: 1em }. 1em is the default leading (no space between lines); 1.5em is generally good.

Justified text is just about alignment: { text-align: left } (default), center, or right.

Thanks a lot, I'm also have major problems trying to give examples of superscripting text using CSS, how the hell do you do it? I've done it in HTML before and can't find anything on how to do it with CSS.

Could you give me an example of how you do that aswell? Just something simple like making the '2' in 'A2' suprtscripted? Thanks.

Just use HTML. There's no reason to use CSS here: superscript and subscript are meaningful, and should not be removed to a presentation layer.

Code: Select all

E = mc<sup>2</sup>

Water is H<sub>2</sub>O

You could always use CSS to reduce the font-size and offset it with {position: relative }, but why? Use meaningful HTML elements instead.

Here's what the question says, my teacher is rubbish and has also messed up the answers sheet with the basics of ID and CLASS.

As I said, the HTML <sup> and <sub> will produce superscript and subscript.

Relative positioning: the element is shifted from its position by the specified amount, but it still leaves behind the space it formerly occupied.

Absolute positioning: the element is removed from the visual formatting flow and positioned relative to the top-left corner of its nearest positioned ancestor. If there is no such ancestor, then it is positioned relative to the top-left corner of the viewport.

Combine these two by setting a parent container to { position: relative } and a child element to { position: absolute }. The child will then be positioned relative to the parent. This is far more powerful than the old-fashioned textbottom nonsense.

If you really wanted to, however, you could replicate <sup> with the following CSS:

Code: Select all

span.sup {
vertical-align: text-top;
font-size: 60%;
}

Or you could do this:

Code: Select all

span.sup {
position: relative;
top: -0.5em;
}

Thanks so much that worked perfectly.

So for the justify is it just deciding on a text alignment and that's it?

Ooooh actually, I believe you can also set { text-align: justify } if you want. That creates a block of text with "straight edges" on both sides -- but usually ugly spacing between words. Try it.