Font and Text

Avin ~ παρυηzεΙ ~ Slay
	My Blogs: The If and the Switch Adding Emoticons to Your Wiki Chat Coding a Box Some Poetry and What Not to Relax Chatting on Chat Chat Chatter Help With Grief and Loss CSS Guides Font and Text Backgrounds Links
Other Users Helpful Blogs Jr Mime's Blogs: Jr Mime's: The Most Linky Depot Rofl's Blogs On Infoboxes: Rofl's guide to: Infoboxes old and new Rofl's guide to: Creating a new-style infobox Rofl's guide to: Customizing a new-style infobox Fubuki's Blogs Fubuki's guide to: Parser Functions

Okay guys... Time for another blog. This one should be helpful to users who want to change their font and text's looks! On a side note Rofl, a buddy of mine, pointed out that it would be a great idea to tell you guys that this is CSS styling. Not only is it CSS styling for wikia, it also works on other websites that allow you to code the font/text styling! Happy reading!

Font

The Weight

We're going to start with font: One thing that people want to do, is make their font darker or lighter. Well, using the property "font-weight:insert stuff in here;", we can change the weight of our font. Font's range from font-weight:normal;, font-weight:bold;, font-weight:bolder;, to font-weight:lighter;. Now these would be the stylings that you would probably see most often. Two other stylings that you might see in your travels around wikia, would be font-weight:inherit; and font-weight:initial;. Inherit makes the font take on the weight of the previous text, and Initial makes the text take on its predetermined weight.

A Variation?

So one of the next stylings we're able to do to font, is called font-variant: normal|small-caps|initial|inherit;. Normal looks like this, small caps looks like this. Initial and inherit act the same way as the initial/inherit do on font-weight, except they change the font-variant.

The New Way To Style

Next up in the customization of fonts we have font-style: normal|italic|oblique|initial|inherit;. Again, initial and inherit work the same way as the other initial and inherit options do. However, normal looks like this, italic looks like this, and oblique looks like this. Oblique and Italic look similar, and for most instances you'll want to use italic.

Get Me An Extra Small!

Wow, an extra small you say? Well it's helpful in some cases to have small font or to have biiig font So for font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit; we have a lot of options to choose from! Here they are in the same order: Medium, XX-Small, X-Small, Small, Large, X-Large, XX-Large, Smaller, Larger, and you also have the ability to use numbers followed by, %, pt or px, which will specify a size for the font as well.

Family??? Really???

Well, as surprising as it seems, you can have a font-family:name of the font here;. And that's about how that one works, you put the name of the font after font-family: and you put a ; after the exact name of the font.

Font's End

Guess what! You just completed a simple run through of all the options for font styling! Next up are text stylings. :D

Text

Alright, you made it through the font portion of the blog, so now let's get on with the text portion. With the CSS text "stuff" you can changes things like the indent, the spacing, the height or even add a shadow, among a few others.

Color

Color for text is pretty much the same as it is for the font value. color: color|initial|inherit;. This too will change the color of the font in the area inside of your coding's range.

White Space

White space is just that, the white space around the font, and how it looks can be specified with the following: white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;

This is normal, this is pre, this is pre-line, this is pre-wrap. Then, Initial and Inherit work the same way as they did for all the other styling options.

Vertical Align

For vertical align we have... "vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;"

This is normal text, this text is on the baseline, we're going to come back to length, this text has sub, this text has super, this text has top, this text has text-top, this text has middle, this text has bottom, this text has text-bottom. Length works like this: Raises or lower an element by the specified length. Negative values are allowed; the specified lengths can be % or px.

Unicode-Bidi

This one, I'm not really going to go over, because it has few practical uses. Yet, it is one of the text stylings and I feel obligated to let you know that it's out there to be used: "unicode-bidi: normal|embed|bidi-override|intitial|inherit;"

Transformers Text

Wait, the font... Its transforming!!! D: Sometimes this can be a great attribute to use when going for a specific look. text-transform: none|capitalize|uppercase|lowercase|initial|inherit;

This font is using "capitalize", this font is using "uppercase", THIS FONT IS ACTUALLY TYPED WITH CAPSLOCK ON, BUT USING "LOWERCASE" CAUSES IT TO SHOW UP AS LOWERCASE LETTERS.

Text From the Shadows

Well, Shadowing is important when it comes to drawing, so why not let it be important when it comes to text styling! c: Here's our code text-shadow: h-shadow v-shadow blur color|none|initial|inherit;

Now this one is pretty simple, we put either PX or %, with numbers that create the desired effect in place of h-shadow, v-shadow, blur, and we put a color name or a #hexcolor in place of color. H-shadow stands for the horizontal part of the shadow, and v-shadow stans for the vertical position of the shadow. Blur tells how blurry to make the font, and color is just color.

Text Indents

This font uses a wiki style indent. using a : before the text. However if you want to achieve this through CSS, then you can use the following: text-indent: length|initial|inherit;

I put text-indent:15px; and this is the result. you can also use % instead of PX.

Text Decoration

This is text decoration, and can be helpful for making links look just right. c: text-decoration: none|underline|overline|line-through|initial|inherit;

This text has "underline", this text has an overline, and since I skipped "none" I'll tell you about it here. None makes it so that the text doesn't have any decoration. Line-through allows me to put a line through my text, Initial and Inherit, work the same way as they do for all the other stylings.

Getting Aligned

We all have a favorite side, right? Well, maybe left, but what about the people who like the center, or have the ability to justify having it all. c:

The code we have for text alignment is simple: text-align: left|right|center|justify|initial|inherit;

This text uses "left" because it likes to hang out on the left side of the screen.

This text uses "right" because it likes to hang out on the right side of the screen.

This text uses "center" because it likes to hang out on the center of the screen.

This text uses "justify" because it likes to hang out through-out the whole screen.

Getting the Height In-Line

You may have guessed, this little section has to do with making sure that the text has the right line height. So without further ado here's our code: line-height: normal|number|length|initial|inherit;

This has a normal line height. This text uses the number portion of the code, to use it, simply put a numerical value in place of X in the following: style="line-height:X;". This text uses the length portion of the code, and we can use a numerical value with PX or % to get our desired looks.

Spacing Out Your Letters

So spacing out your letters might be helpful from time to time. So, using the following: "letter-spacing: normal|length|initial|inherit;" We can tell our text to give the other letters some elbow room!

This font has normal letter spacing, Wooohoo! This font has 5px font spacing.. To use this we can place a numerical value with PX or % in the place of the X in the following: letter-spacing:X;

Are You Headed In the Right Direction?

Okay so this is all about your text's direction, and it's pretty much the same as Bidicode for font. Anyways, here's our code: direction: ltr|rtl|initial|inherit; LTR stands for left to right. RTL stands for right to left, and seeing how that would be pretty explanatory, I'm not going to give an example. c:

Hope this helps you all with your Font/Text styling!