One Piece Encyclopedia


Customizing HTML Text

Hey, so this is going to be a quick side blog for another blog I'm planning to post later about tips for translating.

So as you may or may not know, Wikia uses HTML code for editing. And as you may or may not know, there are ways to manipulate/customize your text using HTML code. Here, I present to you a complete guide of useful tricks to know on how to alter your text on Wikia. Let's do this.

Text Size

The Easiest Way

There are several ways to alter the size of your text. The easiest way to do this is to add:

<small>Text</small> for smaller text, and

<big>Text</big> for bigger text. Easy enough to remember, right?

You can also repeat these tags. For example, if you want text worth 3 font sizes bigger than normal, you can just type out <big><big><big>Text</big></big></big>.

The Next Easiest Way

However, typing out all of that can start to become a real hassle (plus it doesn't really look that neat, either) so that's when knowing this method can help you out. This is also relatively easy to memorize with practice. The code for this method is:

<font size="#">Text</font>

Numbers you can insert inside the quotations for this code range from 1-7, with <font size="1">Text</font> being the smallest and <font size="7">Text</font> being the largest.

Other Methods

You can also alter the size of your text using px, pt, %, em, words like "x-small", and other complicated code terminology to break through the walls of "largest and smallest font sizes available". Out of all of these choices, I personally find the use of % the easiest, because it's the easiest to visualize before even checking in preview mode to see if you got what you wanted.

The code for this is <span style="font-size:50%;">Text</span>, which makes the text half (50%) its usual size. Using this technique, you can get your text to look smaller than a grain of sand like so: Hey guys! or big enough to not fit your desktop screen (obviously I won't demonstrate that here). To increase the size of your text this way, you simply go over 100% and enter any number you'd like (250%, 500%, 1000%, etc).

As a side note, you can use the <sub></sub> and <sup></sup> tags to create [Text]subscripts and [Text]superscripts.

You can repeat these tags just like the <big></big> and <small></small> tags to createaneffectlikethis!, or create an wavering effect using a combination of subscripts and superscripts like so:

Medaka Mermaid Quintuplets: Luffy is a pirate.Luffy is a pirate!Luffy is not a pirate.Luffy might be a pirate.So what if Luffy's a pirate?

Text Color

You can alter the color of your text using color names (red), hex numbers (#ff0000), or rgb code (rgb(255,0,0)).

Names are probably your easiest choice, but if you want specific shades, I'd suggest you go to to find the hexadecimal number of your choice. The code for changing text color is as follows:

<font color=red>Text</font> for Red.

You can also use <span style="color:red;">Text</span> to get the same results, but that's more of a hassle to type out.

You can also do cool things like making your text fade away by making each letter of your words a slightly lighter shade than the previous. Here's the code for that trick for C+P purposes to make life easier:

f<font color=#333333>a</font><font color=#4C4C4C>d</font><font color=#666666>e </font><font color=#808080>a</font><font color=#999999>w</font><font color=#B2B2B2>a</font><font color=#CCCCCC>y</font>

Text Font

As far as I know, you can alter the font of your text using the following 3 methods:

<font FACE="Times new roman">Text</font>


<p style="font-family:Times new roman;">Text</p>


<span style="font-family:Times new roman;">Text</span>

Though there are tons of fonts you can choose from, my personal favorite would be Mistral, because it looks like really crappy handwriting (lol). Some other cool fonts include braggadocio, courier, desdemona, and modern.

To find the type of font you're looking for, either just insert a font name you know in the code, or google the type of font you're looking for. Take note that some fonts don't work on HTML.

Other Tricks

Though these tricks don't manipulate the text itself, you can also highlight, border, strike, or underline your text. I'll just brush through these, but you can probably find more information online. For those of you who don't ever use Visual Mode, the tag for striking text is <s></s>, and the tag for underlining text is <u></u>.

You can highlight text using the code <span style="background-color:yellow;">Text</span> and you can give your text a border using the code using the code <span style="border:2px solid black;">Text</span>. The thickness of the border depends on the px number, and any color name, hex number, or rgb code works for either of these. Border variations include:

  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
  • Ridge
  • Inset
  • Outset

Comment below (or make your own blog!) if you have any other useful HTML tips and tricks. Hope these were helpful!

Also on Fandom

Random Wiki