<div class='pageNumber auto'></div>
<div class='footnote'> FORMATTING TIPS AND TRICKS </div>

# Formatting on the Homebrewery
<br>
Here are some things I use in my brews to give them a better design. The easiest way to understand  this guide is to copy the code and paste it on a new brew, so you can see the coding on the left and the result on the right. If you want to see the code of this brew, click on the source button or here: https://docs.google.com/document/d/1_cl1KhzIztSsFyja0WGq2snjTob_g4D8u08J_KR496Y/edit

## Spacing text

### Normal text
Text 1

Text 2

Text 3

Text 4

Text 5

### "___" (3 underlines)
Text 1 (underlines below this)
___
Text 2

Text 3

Text 4 (underlines below this)
___
Text 5

#### Uses
used in the spells description, just under the level and spell type line (see example below)

#### Your Amazing Spell Name
*7th-level illusion* (underlines below this)
___
- **Casting Time:** 1 action
- **Range:** 30 feet
- **Components:** M (a small doll)
- **Duration:** 1 hour

The magnificent description of your balanced spell. 

### "< br >" (without the spaces)
Text 1 (br under this line of text)
<br>
Text 2 (2 br under this line)
<br><br>
Text 3 (3 br under this line)
<br><br><br>
Text 4 (4 br under this line)
<br><br><br><br>
Text 5
___
This is also used to "force" spacing  (see the example using this and an image in the last page)

```
```

### Vertical Spacing
You can also create some spacing between texts using the vertical spacing found in the editor. To modify the spacing, change the margin-top pixels. For example: margin-top:40px
___
Text 1 (markdown below this line, margin-top at 40px)
<div style='margin-top:40px'></div>
Text 2

## Tabbing text
### "& nbsp ;" (without the spaces)
Text 1

Text 2

&nbsp; Text 3 (1 "&nbsp" before the text)

&nbsp;&nbsp; Text 4 (2 "&nbsp" before the text)

&nbsp;&nbsp;&nbsp; Text 5 (3 "&nbsp" before the text)

<div class='classTable'>
##### Also works on tables (used for listing ammunitions and the arcane focuses)
| Item | Cost | Weight |
|:---|---:|:---:|
| Abacus | 40 gp | 2 lb. |
| Acid (vial) | 20 gp | 1 lb. |
| Alchemist's fire (flask) | 50 gp | 1 lb. |
| *Ammunition* |  |  |
| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Arrows (20) | 1 gp | 1 lb. |
| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Blowgun needles (50)  | 1 gp | 1 lb. |
| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Crossbow bolts (20)  | 1 gp | 1½ lb. |
| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sling bullets (20)  | 4 cp | 1½ lb. |
| Antitoxin (vial) | 50 gp | ─ |
| *Arcane focus* |  |  |
| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Crystal | 10 gp | 1 lb. |
| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Orb | 20 gp | 3 lb. |
| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Rod | 10 gp | 2 lb. |
| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Staff | 5 gp | 4 lb. |
| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Wand | 10 gp |  1 lb. |
| Backpack | 10 gp | ─ |
</div>

\page
<div class='pageNumber auto'></div>
<div class='footnote'> FORMATTING TIPS AND TRICKS </div>

## Images
### Things to add to style
**Position: absolute;** This allows you to put the image on any part of the page. You control the position and size adding the following lines:
- For Y axis, use **top:Xpx;** or **bottom:Xpx;**. For example: **top:40px;**
- For X axis, use **left:Xpx;** or **right:Xpx;**. For example: **right:-220px;**
- For setting the image size, use **width:Xpx;**. For example: **width:510px;**

For the X and Y axis lines, you can use negative values too, and for the image size, you can use "%" instead "px".

For example, the image code using those markdowns would be something like this: style='position:absolute;top:-40px;right:20px;width:800px;'
___
**mix-blend-mode:X;** This allows to add any blending mode to an image. In most of the cases, if you use a image with a white background you can use the blend mode **multiply** to remove the white. This is not 100% accurate, but it works great if you don't know how to use photoshop or any other editing software. 

Here're a list of various blend modes that works with the images.

**multiply:** the element is multiplied by the background and replaces the background color. The resulting color is always as dark as the background.

**screen:** multiplies the background and the content then complements the result. This will result in content which is brighter than the background-color.

**overlay:** multiplies or screens the content depending on the background color. This is the inverse of the hard-light blend mode.

**darken:** the background is replaced with the content where the content is darker, otherwise it is left as it was.

**lighten:** the background is replaced with the content where the content is lighter.

**color-dodge:** this attribute brightens the background color to reflect the color of the content.

**color-burn:** this darkens the background to reflect the content’s natural color.

**hard-light:** depending on the color of the content this attribute will screen or multiply it.

**soft-light:** depending on the color of the content this will darken or lighten it.

**difference:** this subtracts the darker of the two colors from the lightest color.

**exclusion:** similar to difference but with lower contrast.

**hue:** creates a color with the hue of the content combined with the saturation and luminosity of the background.

**saturation:** creates a color with saturation of the content combined with the hue and luminosity of the background.

**color:** creates a color with the hue and saturation of the content and the luminosity of the background.

**luminosity:** creates a color with the luminosity of the content and the hue and saturation of the background. This is the inverse of the color attribute.
___
This information was found on the following page: https://css-tricks.com/almanac/properties/m/mix-blend-mode/

#### Example Using a Blending Mode:

Original: "Agail Enthess" by rhineville
<img 
  src='http://orig08.deviantart.net/9a3c/f/2012/287/5/6/agail_enthess_by_rhineville-d5hrur2.jpg' 
  style='position:absolute;top:130px;right:30px;width:350px'/>

<div style='margin-top:470px'></div>

With multiply as blending mode: (see the source code!)

<img 
  src='http://orig08.deviantart.net/9a3c/f/2012/287/5/6/agail_enthess_by_rhineville-d5hrur2.jpg' 
  style='position:absolute;bottom:10px;right:30px;width:350px;mix-blend-mode:multiply'/>

\page
<div class='pageNumber auto'></div>
<div class='footnote'> FORMATTING TIPS AND TRICKS </div>

#### Example using < br > and an image
## Weapons
Your class grants proficiency in certain weapons, reflecting both the class’s focus and the tools you are most likely to use. Whether you favor a longsword or a longbow, your weapon and your ability to wield it effectively can mean the difference between life and death while adventuring.

The Weapons table shows the most common <br> weapons used in the fantasy gaming worlds, their price <br> and weight, the damage they deal when they hit, and <br> any special properties they possess. Every weapon <br> is classified as either melee or ranged. A melee <br> weapon is used to attack a target within 5 <br> feet of you, whereas a ranged weapon is <br> used to attack a target at a distance.

### Weapon Proficiency
Your race, class, and feats can <br> grant you proficiency with certain <br> weapons or categories of weapons. <br> The two categories are simple <br> and martial. Most people can use <br> simple weapons with proficiency. <br> These weapons include clubs, <br> maces, and other weapons often <br> found in the hands of commoners. <br> Martial weapons, including swords, <br> axes, and polearms, require more <br> specialized training to use effectively. <br> Most warriors use martial weapons <br> because these weapons put their fighting <br> style and training to best use.

Proficiency with a weapon allows you to add <br> your proficiency bonus to the attack roll for <br> any attack you make with that <br> weapon. If you make an attack roll <br> using a weapon with which you <br> lack proficiency, you do not add <br> your proficiency bonus to the attack <br> roll.

<br><br><br><br><br><br><br><br><br><br>

> Using the "BRs" I've wrapped the text arround the image borders. It might be a bit tedious to do on the code, but the result is amazing. 
> 
> **Image used:** "Dark Elf Warlord (1st iteration)" by Tanorax


<img 
  src='http://i.imgur.com/7sQOktb.png' 
  style='position:absolute;top:-40px;right:-220px;width:1000px'/>

\page
<div class='pageNumber auto'></div>
<div class='footnote'> FORMATTING TIPS AND TRICKS </div>

## Blending Images
While you can easily remove the white background for images using the blend modes, some other images can be blended with a bit more of work. This clever idea was created originally by /u/QalarValar, and you can see his amazing resource in the following link: https://www.reddit.com/r/UnearthedArcana/comments/5nw1ou/watercolor_your_own_images_in_homebrewery/

### How It Works
I'll be using the QalarValar image resources (There you can find a lot of stains images): http://imgur.com/a/TW79K and the amazing piece of art called "Adventurers", created by Sandara (Deviantart).

The process is pretty simple: you need to put the image you want to blend and then you just put the stains images at top of it.

Here's the original image
<img 
  src='http://orig14.deviantart.net/0522/f/2015/166/7/d/adventurers_by_sandara-d8xgvqg.jpg' 
  style='position:absolute;top:340px;left:50px;width:500px' />

<div style='margin-top:300px'></div>

Here's the original image with some stains images on top of it (if you see the code, the stains images are below the original)
  
<img 
  src='http://orig14.deviantart.net/0522/f/2015/166/7/d/adventurers_by_sandara-d8xgvqg.jpg' 
  style='position:absolute;top:675px;left:50px;width:500px' />

	'The images below this text are the stains!'

<img 
  src='http://i.imgur.com/nzPYZyD.png' 
  style='position:absolute;top:870px;left:-110px;width:500px' /> 
  
<img 
  src='http://i.imgur.com/nzPYZyD.png' 
  style='position:absolute;top:870px;left:-110px;width:500px' />
  
<img 
  src='http://i.imgur.com/nzPYZyD.png' 
  style='position:absolute;top:870px;left:-110px;width:500px' />
  
<img 
  src='http://i.imgur.com/nzPYZyD.png' 
  style='position:absolute;top:870px;left:140px;width:500px' />
  
<img 
  src='http://i.imgur.com/nzPYZyD.png' 
  style='position:absolute;top:870px;left:140px;width:500px' />
  
<img 
  src='http://i.imgur.com/nzPYZyD.png' 
  style='position:absolute;top:870px;left:140px;width:500px' />
  
<img 
  src='http://i.imgur.com/nzPYZyD.png' 
  style='position:absolute;top:870px;left:140px;width:500px' />

\page
<div class='pageNumber auto'></div>
<div class='footnote'> FORMATTING TIPS AND TRICKS </div>

Here're another examples of using the same method of blending images. In this case I created some new brushes for this. You can found them here: http://imgur.com/a/SKmRN

<div style='margin-top:340px'></div>
## Random Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis erat vel quam pharetra condimentum. Phasellus sed dapibus lacus, vitae pulvinar nisl. Nullam nec erat eget nisi viverra semper rhoncus vel tortor. Nullam dictum tellus elementum, egestas mi sit amet, molestie neque. Vivamus vel blandit ligula, et placerat lorem. Aliquam consequat suscipit nisl, at gravida ante auctor mollis. Nulla quis sapien et neque luctus convallis. Cras feugiat dolor nibh, non vulputate arcu venenatis nec.

Morbi scelerisque suscipit ligula, id consectetur tortor scelerisque id. Cras imperdiet orci ac diam mollis, ac hendrerit velit cursus. Phasellus fermentum finibus blandit. Duis non dignissim mauris, quis rutrum odio. Suspendisse potenti. Donec aliquet in metus eget interdum. Pellentesque 

	'Top image'

<img 
  src='http://orig14.deviantart.net/0522/f/2015/166/7/d/adventurers_by_sandara-d8xgvqg.jpg' 
  style='position:absolute;top:0px;left:0px;width:816px' />

<img 
  src='http://i.imgur.com/FqtUgON.png' 
  style='position:absolute;top:-210px;left:-300px;width:800px' />  

<img 
  src='http://i.imgur.com/RJYXZQ5.png' 
  style='position:absolute;top:-110px;left:-350px;width:800px' /> 

<img 
  src='http://i.imgur.com/3AN7kPR.png' 
  style='position:absolute;top:290px;left:-150px;width:800px' /> 

<img 
  src='http://i.imgur.com/tQjcZ5n.png' 
  style='position:absolute;top:290px;left:150px;width:800px' /> 

	'Bottom image'
    
<img 
  src='http://orig14.deviantart.net/0522/f/2015/166/7/d/adventurers_by_sandara-d8xgvqg.jpg' 
  style='position:absolute;bottom:-100px;left:0px;width:816px' />
  
<img 
  src='http://i.imgur.com/FqtUgON.png' 
  style='position:absolute;bottom:280px;left:-40px;width:400px' />  

<img 
  src='http://i.imgur.com/RJYXZQ5.png' 
  style='position:absolute;bottom:320px;left:200px;width:400px' />  

<img 
  src='http://i.imgur.com/tQjcZ5n.png' 
  style='position:absolute;bottom:320px;left:500px;width:400px' />  

\page
<div class='pageNumber auto'></div>
<div class='footnote'> FORMATTING TIPS AND TRICKS </div>

### Blending: New Method
Here's another metod, more simple and <br> quicker, but its limited by the images you use. <br> In this case, I took the background image <br> used in the homebrewery and the Player's <br> Handbook and edited it, so the top right side of the <br> page is completely erased, allowing to show some image under it with better stains and a nicer look. **With this method, you need to make sure the edited backgrounds you use for blending are at least 816 pixels width, so it covers the whole background image.** 

I think this is the best way to have a nice blending look for images, and it's great for everyone who doesn't know how to use photoshop or any other editing software. The only "problem" of this metod is the limited flexibility for moving the image and adapting it.

## Test (Random text)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis erat vel quam pharetra condimentum. Phasellus sed dapibus lacus, vitae pulvinar nisl. Nullam nec erat eget nisi viverra semper rhoncus vel tortor. Nullam dictum tellus elementum, egestas mi sit amet, molestie neque. Vivamus vel blandit ligula, et placerat lorem. Aliquam consequat suscipit nisl, at gravida ante auctor mollis. Nulla quis sapien et neque luctus convallis. Cras feugiat dolor nibh, non vulputate arcu venenatis nec.

### Test text
Morbi scelerisque suscipit ligula, id consectetur tortor scelerisque id. Cras imperdiet orci ac diam mollis, ac hendrerit velit cursus. Phasellus fermentum finibus blandit. Duis non dignissim mauris, quis rutrum odio. Suspendisse potenti. Donec aliquet in metus eget interdum. Pellentesque convallis euismod risus sit amet semper. Aliquam convallis lacinia dui.

##### Cookie Tastiness
| Tastiness | Cookie Type |
|:----:|:-------------|
| -5  | Raisin |
| 8th  | Chocolate Chip |
| 11th | 2 or lower |
| 14th | 3 or lower |
| 17th | 4 or lower |

Nunc blandit consectetur lorem, vel fringilla nisl accumsan vel. Morbi tempor enim sed sodales rhoncus. Aliquam vel venenatis turpis. Sed felis turpis, dignissim id purus at, iaculis pulvinar metus. Ut consectetur lectus at lectus dictum scelerisque. Phasellus vitae egestas metus. Nunc consequat, metus lobortis egestas varius, nunc nisl facilisis lorem, a fringilla orci lorem a odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce egestas, nisl ac faucibus finibus, dui risus fermentum erat, hendrerit aliquet dolor diam eget est. Ut nec faucibus dui.

```
```

<div style='margin-top:260px'></div>
#### A Bit More of Randomness
Etiam ante lectus, dictum sit amet dui nec, <br> euismod pulvinar mi. Sed elementum justo <br> eget nisl condimentum, nec pulvinar ligula semper. Nullam vitae risus sit amet lectus consequat tincidunt vitae in lorem. Cras egestas justo sit amet purus molestie consectetur. Aliquam scelerisque nibh dolor, sed dapibus erat hendrerit et. Duis id lacus dui. In placerat tortor sed nisi mollis, eu congue quam aliquam. Ut elementum maximus dolor. Duis egestas lorem quis leo elementum, et hendrerit sapien imperdiet. Sed et erat quis turpis malesuada vehicula eget vel lorem.

Suspendisse efficitur lorem ac nulla pellentesque pellentesque in non enim. Sed egestas bibendum sodales. Morbi posuere augue purus, vel blandit lorem efficitur vitae. Curabitur at nisi vitae nulla ultrices finibus. Fusce ut dui eleifend, porta orci et, aliquet diam. Nunc at metus aliquam tellus facilisis fermentum. Vestibulum et ornare eros. Nunc eu pharetra urna.

#### Heal Bad Hygene
*5th-level transmutation*
___
- **Casting Time:** 1 action
- **Range:** 30 feet
- **Components:** S
- **Duration:** Concentration, up to 10 minutes

A flame, equivalent in brightness to a torch, springs from from an object that you touch. 
The effect look like a regular flame, but it creates no heat and doesn't use oxygen. 
A *continual flame* can be covered or hidden but not smothered or quenched.


> ##### Special Tip About this Method
> The backgrounds images I've created are in the same link you can find on the 5th page of this guide! If you missed it: http://imgur.com/a/SKmRN
> 
> Also, this images for blending are a bit bigger (1275x1650), so you can resize them from 816px to a bigger size, and then moving it to fit the images and text you're using.

<img 
  src='http://orig14.deviantart.net/0522/f/2015/166/7/d/adventurers_by_sandara-d8xgvqg.jpg' 
  style='position:absolute;top:-80px;left:0px;width:816px' />
  
	'Make sure the background image below is at 816 pixels width'
<img 
  src='https://i.imgur.com/VxJ8X1u.png' 
  style='position:absolute;top:0px;left:0px;width:816px' />

  \page
<div class='pageNumber auto'></div>
<div class='footnote'> EXTRAS </div>

## To-Do
- Table of contents
- Custom images
- Expading the Blending Images part

#### Created by Aeron Drake
**Reddit thread link:** https://www.reddit.com/r/UnearthedArcana/comments/656l98/formatting_tips_for_the_homebrewery/
<br><br>
You can see my other brews for inspiration (and looking the code of them) in the following link: http://homebrewery.naturalcrit.com/user/draco