Advanced Formatting Guide for TXTO
Hello, my chudlings. I’m Asta, your host for today and I will share some actually cool stuff you can do with HTML on TxTo.
Images and Position
Insert your image’s desired height and width using the HTML tag below.
<img src="..." width="xxx" height="xxx">
To make images move behavior (left/right) use align.
<img src="..." width="xxx" height="xxx" align="left">
To center images, you would use <caption> tage. Specify a reasonable table width between 400-800. Refer to this section for more info.
<table width="xxx"><caption><img src="..." height="xxx" width="xxx"></caption></table>
Result Left
text appears near instead of below the image. The text you see needs either to use <br> (empty space) to fill and behave normally. play around and find how it suits better.
Result Right
text appears near instead of below the image
Text Formatting
This part is self explanatory but here are some fun formatting for your text.
haha bold
<b>haha bold</b>
small text
<small>small text</small>
This is my small under text
<sub>my small under text</sub>
italic
<em>italic</em>
This text is above
<sup>above</sup>
mark text
<mark>mark text</mark>
strikethrough
<del>strikethrough</del>
underline
<ins>underline</ins>
quotations
<q>quotations</q>
dotted text
<abbr title="text appears when hovering">dotted text</abbr>
idk looks cool
<code>idk looks cool</code>
This big text
<ruby>This big text<rt>has a neighbour</rt></ruby>
Text Position
Centering text is possible using the <caption> tag.
<table width="XXX"> <caption> this text is centered, no border anywhere </caption> </table>
In reality, this text is gonna be centered in a container(table) with a fixed width specified. I would go around 500-700, so it stays friendly mobile. Remember, everything inside caption requires to use only HTML tags, so # and *bold* markdown won’t work. Use <img>, <hr>, <br> and <a>.
Check my directory for an example of multilayered centering
Dropdown Menu
You know those extended menus when you click on the arrow? We have these. Check it out!
Open me!
As you can see, the content inside can only be opened by extending the menu.
The code needed:
<details>
<summary>Open me!</summary>
As you can see, the content inside can only be opened by extending the menu.
</details>
Tables and Containers
Yes, we can have tables and they have some properties that enhance the current experience as a user. Check out my extensive to see what are you capable of doing with tables.
The best thing is you can use it for making big cards or containers.
| Names | Likes |
|---|---|
| Astaroth | Astronomy |
| Kian | Lemon Tea |
I won’t explain how basic HTML tables work, so just checkout the W3School Article and Colons and Rows Merging.
Now, I know making tables can be a bit confusing, merging rows and colons, so you can use this HTML Table Generator, whereas you can specify the number of rows and colons, merge, split them.
The cool thing about tables is we can change the rows and colon height and width and can manipulate this at our will. For example, we can create single-cell tables to look like cards (check my extensive). For this you can use the following:
<table width=“XXX” height=“XXX”><tr><td>
<–Your content goes here. Try to avoid using markdown and use HTML tags–>
</td></tr></table>
You can remove either width and height from the table. I find myself comfortable only using a 500-700 width <table width="500"> for a card but you can definitely reduce it. Remember the wider the table, the more wider it will reflect on mobile (it only makes viewing it harder.) For width, height, \% also works.
You can use tables inside tables. This is done through making a new table inside a cell.
In a similar fashion, width and height can be inserted inside <th> and <td> to modify their height and width:
| The entire rows under this th tag are 60px in width. | ||
|---|---|---|
The code:
<table width=“100%”>
<tr>
<th width=“60”>The entire rows under this th tag are 60px in width.</th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Now you can do a few other things with content inside the cells. 2 new attributes called align and valign can be used to define where the content is placed, yes centered included.
To achieve the perfect guru middle of the cell, I used this:
<table width="600"><tr><td align="center" valign="middle"> content goes here</td></tr></table>
It would look like this if used on a table:
| Likes | Dislikes |
|---|---|
| Cheese, another cheese, all kind of cheese, honestly | Uhhhh what shall go here, thy shall receive. |
align can wield the following properties: center, left, right;
valign can wield the following properties: top, middle, bottom, baseline;
Left would place the content to the left and valign at the top of the cell:
It would look like this if used on a table:
| Likes | Dislikes |
|---|---|
| Cheese, another cheese, all kind of cheese, honestly | Uhhhh what shall go here, thy shall receive. |
Pagedoll
You can have a pagedoll (like we have here at the bottom) either in the left or right of the page. Use this code:
<img src="..." align="right" width="100" height="100">
<img src="..." align="left" width="100" height="100">
Thanks for tagging along chudlings. My main is on here. I don’t know, bye!
txto