Comprehensive Coding Guide for the Updated Website (HTML)

#1
Author Note: This guide is almost finished. Visual Table Editor (100% complete), General Coding (90% complete), Table Coding (100% complete).

This guide will be updated and maintained as I, or others, discover new information.

Important! This does not currently work inside the forums. The forums still use the old BBcode and have not been updated to match any of the fiction-related HTML. I repeat, do not use this guide inside the forums.
****
Hey everyone! I finally got around to messing with the new HTML coding, and I realised that there wasn't any real tutorial on the changes in the new update. In this guide, I'm going to explain what changes have happened and how to use the new changes.

If you want to test out your coding, as an author you can start a draft chapter (located on the author dashboard) and test your code out there. Select 'preview' to see how your coding looks when it is published. You can keep the draft you've made to use for any coding in the future by selecting 'save draft', or simply close down the page and start up a new one in the future.

For non-authors who want to test out their code, feel free to piggy-back on my Author Information chapter. Just make a single post in there and use the edit function to try different kinds of code. Do not make more than one post, otherwise you will clog up space for others. Extra posts will be deleted.

Feel free to ask questions in the comments section. I'll answer them when I can. If you have a better coding solution for anything in here, let me know.

All the code in this guide has been verified. If something goes wrong it's possible I've made a mistake, but more then likely it is a problem on your end. Either way, feel free to post your problem in the comments section and I'll take a look at it.

So for starters, let's give you an overview of the changes:

1. HTML is now the standardised coding form. BBcode is still supported, but the support will be removed at a later date. You'll have to use HTML sooner or later, so it's better to tackle this problem now.

2. You can no longer directly code within the editing section. That functionality has been removed, and any code will only be considered text. Instead, you now have access to a visual table editor inside the editing section itself. This can be accessed in the 'Table' part of the tools section. More information is provided further down.

3. To code directly, you have to access the source code. The source code can be accessed on the far right of the tools provided in the editor, or in the 'Tools' part of the tools section. When the code you have made is placed inside the source code, it will act just the same as if you had created it using the visual table editor. More information will be provided further down.

4. This guide is separated into three major sections. Visual Table Editor, General Coding and Table Coding. Read the section(s) suited to your needs.

https://puu.sh/uxMTk/ab747f54ba.jpg
For casual use of tables, I'd recommend using the visual table editor. It is simple and efficient, and that's all you can ask. Coding directly is only recommended for more advanced users, who want to do more with their tables/novels.

This will be a guide on how to use the functions in the visual table editor. I'll start with the basics of the visual table editor, and move onto the simpler options before finishing with the more advanced options.

https://puu.sh/uENMM/47d856515e.jpg

To clarify, to use the visual table editor you need to first create the table. This is done by opening up the 'Table' menu inside the tools section (located at the top of the editor) and selecting the number of 'rows' and 'columns' you want to use, with each box (1x1) being a 'cell'.

Rows go vertical (down), while Columns go horizontal (right). Cells count as a literal box, and will be displayed as one square (with a border). You can use this square for as much or as little as you desire. There are many fictions that use one square for all of their tables, and it is perfectly fine. Remember that most of the effort put into tables are about how they are represented visually, and that is entirely subjective. Design your tables how you want them to be.

https://puu.sh/uENSH/410421d5f2.jpg

Once you have a table, and you have it selected (left click on the table), you are able to access the table options. These options appear right above the table itself. Hovering over each individual option will give you some info on what they do. You can also go back to the 'Tables' menu of the tools section and access the other options there as well (they were previously greyed out). These options do the following:

Table Properties: Contains the advanced options for tables, including a full range of RGB colors. I'll talk more in-depth on these properties later.

Delete Table: Completely deletes the created table.

Insert Row Before: Inserts a row before (above) the currently selected table row, indicated by the cell you have selected.

Insert Row After: Inserts a row after (below) the currently selected table row, indicated by the cell you have selected.

Delete Row: Deletes the currently selected table row, indicated by the cell you have selected.

Insert Column Before: Inserts a column before (left) the currently selected table row, indicated by the cell you have selected.

Insert Column After: Inserts a column after (right) the currently selected table row, indicated by the cell you have selected.

Delete Column: Deletes the currently selected table column, indicated by the cell you have selected.

Those are all of the options given to the visual table editor.

Tip: You are also able to use the in-built functionality already there in the tools section (such as bold, center etc.). There should be no limit to what you can use, so have a play with it if you like.

https://puu.sh/uENU9/80819fa9f4.jpg

Now onto the advanced options located in the Table Properties. Most of the advanced options are unable to be manipulated. I'll let you know if an option is unable to be manipulated.

Quick Note: The Table Properties uses pixels for measurements. 4 pixels is the size of 1.05 millimeters (with 1 pixel being the size of 0.26 millimeters).

Table Properties (General):

Width: The horizontal (left to right) size of the table. If left blank, it automatically defaults to filling up the fiction page. Important! Royal Road has an in-built width size. Because of this, changing the width does not currently work, and will automatically default back to the Royal Road width. Attempts to change the width will also (almost always) give you the error "Object reference not set to an instance of an object."

Height: The vertical (top to bottom) size of the table. If left blank, it automatically defaults to [unknown size]. Best estimate is 15 centimeters. Important! Royal Road has an in-built width size. Because of this, changing the width does not currently work, and will automatically default back to the Royal Road height.

Cell Spacing: Determines the spacing between each cell (how close or far apart cell's are to each other). If left blank, it automatically defaults to 2 pixels. Important! Royal Road has an in-built cell spacing size. Because of this, changing the cell spacing does not currently work, and will automatically default back to the Royal Road cell spacing.

Cell Padding: Specifies the spacing between the contents of a cell and its border (how close or far apart the content inside of a cell is to its edge). If left blank, it automatically defaults to 1 pixel. Important! Royal Road has an in-built cell padding size. Because of this, changing the cell padding does not currently work, and will automatically default back to the Royal Road cell padding.

Border: Specifies the border size. If left blank, it automatically defaults to no border. Important! Royal Road has an in-built border. Because of this, borders currently do not work in the visual table editor, and will automatically default back to the Royal Road border.

Caption: Specifies a table's header. Always sits at the top of the table. You can write anything inside. If un-ticked, automatically defaults to no caption. Important! Although captions are possible, they aren't integrated into the default table system Royal Road provides. Because of this, they look terrible and are a huge contrast to the table itself. I don't recommend using the caption feature. 

Alignment: Specifies alignment of table to Left, Right or Center. If left to 'None', keeps default (Left if not otherwise specified using an external source).
        
        Tip: You can select individual cells, or even individual pieces of content inside cells, and align them individually using this. I recommend using the tool section to do so instead of the Table Properties.

Table Properties (Advanced):

Style: Shows the currently coded 'style' of the table. This style includes almost everything within the table properties (such as background and border colors, cell padding/spacing, width and height etc.).

You can also use this to code different parts of the table manually. I'd recommend never using this unless you really know what you're doing, and at that point you should just be directly coding. An example, however, would be:

background-color: #f1f1c1

Copy that directly into the style section, and it'll change the background to match that color. Again, highly recommend not using it.

Border Color: Determines the color of the 'border' using the full range of RGB. If left blank, defaults to a Black/Grey hue. For a full range of colors, navigate Color-Hex Important! Royal Road has an in-built border color. Because of this, border colors currently do not work in the visual table editor, and will automatically default back to the Royal Road border color.

Background Color: Determines the color of the 'background' using the full range of RGB. If left blank, defaults to a dark blue hue. For a full range of colors, navigate Color-Hex

To use, manually type in the color code (#number), or click on the small box to the right to use the RGB visual chart. Inside you can also manually type in the color code(either #number, or using the RGB variants). Otherwise use the large square to adjust the hues of a certain color, and the slider to adjust the colors themselves.

That is everything for the visual table editor! As you would have noticed, some of the features just aren't accessible even if they appear to be. I do not believe they will become accessible any time soon, if ever.

In my opinion, they are put there to ensure that writers follow a certain consistency with tables, which helps readers immediately recognise the tables and read them easily. I believe this is a good feature, and not a detriment.

https://puu.sh/uxN1S/9e1fcb9de9.jpg
Just to note quickly, the code I am going to present to you is the code used inside the source code for Royal Road. It is possible to use other types of HTML code, but to make sure there isn't any disparity I have used the code that Royal Road converts to.

This will be a general coding guide. You can use this coding outside of tables, say in your summary or in your chapters. I'll start with the basics of how to use code, and move onto simple examples and finish with more complicated examples.

https://puu.sh/uENMM/47d856515e.jpg

BBcode used the [] tags to indicate a singular piece of enclosed code. For example: Hello would make the text 'Hello' inside those two tags bold.

HTML, on the other hand, uses these <> tags to enclose code. They function the same as BBCode, you're simply replacing the style. So remember, HTML uses the <> tags to enclose code. A HTML example would be: <strong>Hello</strong> would make the text 'Hello' inside those two tags bold. So how does this work? Let's break down the example.

<> encloses a singular piece of code. This is generally known as the opening tag. The < indicates the start of the code, where as the > indicates the end of the code. Anything after the > is seen only as text until the next < has been started.

<> together represents the opening tag. This is where the majority of the coding will happen. After the opening tag comes the text itself. Whatever you type will come out as text on the other side. So if you type 'Hello', it will display 'Hello' when it is published.

Then you have the closing tag, which is represented by </>. After the / you add the same code from the opening tag. For example, if you had <strong> as a piece of code, to close it you would do </strong>. The / indicates that you want this piece of code to finish. If you don't indicate this, the code will continue to run indefinitely, which will cause problems for the rest of your code/text. Always, I repeat always use a closing tag.

Now the word strong indicates the type of code that is being requested. In this case, strong means bold. You are requesting that any text inside the opening and closing tag will be bold. So at the end of <strong>Hello</strong>, you get Hello.

Tip: Not all code requires text. For example, using code to upload images or videos will have no text inside them. It still functions the same. Don't over-think it.

Double Tip: When using the source code, ignore the rest of the code. Start your own code on a blank space. Remember, don't over-complicate things. That other code is irrelevant, just don't let it mingle with your own.

https://puu.sh/uENZ9/554aaf8070.jpg

Before we begin, let me quickly mention that <p></p> indicates a single line. So if you put <p>Hello</p> and <p>Welcome</p> side by side, they would be on two different lines, one after the other.

Now onto coding examples. This code will be stand-alone code. Let's start:

Bold: <strong></strong>
Italics: <em></em>

I know, not much there. Those two are your basics though, and can be used anywhere.

https://puu.sh/uEO0e/2e1af543dd.jpg

Style indicates how a text will be displayed, the 'style' of the text. There are many different ways to manipulate style, but I will provide you with a basic list. If you want to know more styles, google 'HTML styles'.

Style will sit inside a number of coded tags. Style never changes between each tag. The only thing that changes is how much of your work is affected. There are ‘higher’ and ‘lower’ levels the style can sit in:

Line: style can sometimes sit inside the <p></p> tags when you are changing something that requires all of the text to be changed (such as changing the text's alignment).

Span: <span></span> is used to change the style on specific text. You can use this to encompass all the text on one line, or just part of it as you desire (such as changing the color of a certain piece of text). 'Span' is placed inside the <p></p> tags.

Div: <div></div> is used to encompass a block of text. It can be used for creating a drop-down spoiler option, among many other things. It cannot be used to individually affect a piece of text. 'Div' is placed inside the <p></p> tags.

Those are the different tags where you can place style code, so now here are some basic types of style coding you place them in. Remember, you can use this style code for any of the tags shown above:

Underline: <span style="text-decoration: underline;"></span>

Strikethrough: <span style="text-decoration: line-through;"></span>

Color: <span style="color: #number;"></span>

Alignment: <p style="text-align: left/center/right/justify;"></p>

For a full range of colors, navigate Color-Hex

Tip: to do multiple styles in a single <span> all you have to do is continue after ';'. Only use the closing " when you are finished your coding.

Example: <span style="color:#ff6600; text-decoration: underline;"></span>

https://puu.sh/uEO31/c01c57d8c4.jpg

This will be the final bits of code. They don't fall into one category, but they are the most complicated, and take the most work. I'll go through each one individually.

Text Size:

There are two different ways to do text size. <span style="font-size: 1.5em;"></span> OR <span style="font-size: small/medium/large"></span>

1.5em is the standard text size. Smaller or larger numbers change the size to smaller or larger consequently.

Small is the standard text size. To make the text larger then 'large' or smaller than 'small', place 'x-' or 'xx-' in front of 'small' or 'large. Example: <span style="font-size: xx-small"></span>

Text Format:

Text format is basically just the font style. Here is the code: <span style="font-family: verdana;"></span>

Just replace 'verdana' with any type of font you desire, as long as it is accessible in Royal Road. Some basic fonts to get you started can be found here(https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows)

Unordered List:

<ul></ul> indicates that anything you write inside is part of the unordered list. Unordered list simply means that it doesn't follow a numerical ascension. For each line, you must encase the text inside of <li></li>. They indicate a single line on the unordered list. Example: <ul><li>Hi</li><li>Welcome</li></ul>

Unordered List Styles:

You can change the style of unordered lists (for example, the circle might be changed to a square). To do this for unordered lists, add in <ul style="list-style-type: disc;"></ul>

Unordered list styles: disc (default), circle, square, none

Ordered List:

<ol></ol> indicates that anything you write inside is part of the ordered list. Ordered list simply means that it follows a numerical ascension. For each line, you must encase the text inside of <li></li>. They indicate a single line on the ordered list. Example: <ol><li>Hi</li><li>Welcome</li></ol>

Ordered List Styles:

You can change the style of ordered lists (for example, the circle might be changed to a square). To do this for ordered lists, add in <ol type="A"></ol>

Ordered list styles: 1 (default), A, a, I, I

Quote:

This will explain how to quote a person with their actual name. This was a finicky process, and it was the best I can do (which I think is fairly good).<blockquote><p>Hello, I am Wing, your resident overlord.</p><cite>— Wing</cite></blockquote>

Place the quote inside of the <blockquote></blockquote> tags. The <p></p> tag ensures that the text and the cited name (Wing) are on separate lines.

The <cite></cite> tags italicizes the words and ensures that the text inside acts as the cited source for the quote. This is where you put the name of who you are quoting, such as 'Wing' provided in the example.

Note: The "— " is applied manually in front of the quoted name. If you wish to skip this, simply add <footer></footer> tags outside of the <cite></cite> tags. It will make the words a touch smaller and faded, and automatically place a dash. So it would be: <blockquote><p>Hello, I am Wing, your resident overlord.</p><footer><cite>— Wing</cite></footer></blockquote>

Video, Link, Image and Spoiler coding will be explained here at a later date.

https://puu.sh/uxN2W/eeca37f90f.jpg
Note: Read through the General Coding guide before you tackle this. It provides the basic framework for the table coding.

Table coding follows the same rules as normal coding, but with some additional necessities. I'll start with the basics of what you need to know to create tables, then I'll move on to simpler examples of manipulating tables, and finish with the more convoluted and hard examples. I'll also explain quality of life information to help you manage your table coding better.

Just to re-clarify, you need to use the source code to write any sort of code and have it function. Simply writing code in the editor will no longer work. To access the source code, go to the far right of the tools provided in the editor, or in the 'Tools' part of the tools section. Once the code is placed in the source code, as long as it is done properly, it will act just the same as if you had created it using the visual table editor.

Tip: If you want to learn to code directly, check the source code constantly and use it as a guide when you make changes. It'll help you a lot when you try and figure out problems you might have, or how to code certain things.

https://puu.sh/uENMM/47d856515e.jpg

Now for HTML tables, there are always a number of pieces of code that must be placed inside. They are as follows:

<table></table> - This encompasses the entire code for the table. It is always at the start and end of your tables code.

<thead></thead> - This indicates that the code inside of this is for the head of the table (it is an abbreviation of Table Head). All text will automatically be bold and centered. I recommend not using this, and coding manually if you want to center and/or bold text. This piece of code comes immediately after <table>.

<tbody></tbody> - this indicates that the code inside of this is for the body (it is an abbreviation of Table Body). Text will not be manipulated in any way unless you direct it to be. I recommend using this for all of the coding in your tables as it allows you to fully control how you want your tables to appear. This piece of code comes immediately after <table> (and <thead> if applicable).

<tr></tr> - This indicates a row for your table (it is an abbreviation of Table Row). All coding and text you wish to place inside this row must be enclosed within these tags. The first <tr> will be the first row, subsequent <tr> will be subsequent rows. This piece of code is always placed inside of <tbody>. 

<td></td> - This indicates the column inside of a row (it is an abbreviation of Table Data, which means a cell/column). Essentially, see <td> as a singular cell inside of the current row (<tr> tags) you are in. The first <td> will be the first column, subsequent <td> will be subsequent columns.

So a table should have: <table><tbody><tr><td>Hello</td></tr></tbody></table>

That would print the word 'Hello' in a single box. Remember to follow this formula always.

https://puu.sh/uENZ9/554aaf8070.jpg

Coding is very clear and simple once you understand the basics. Now that you have a grasp on how to create tables, you need to know what to put in them.

Tip: the <strong> and <em> tags function the same here as in the General Coding.

The first thing to understand is Style. The style tag works the same as when coding normal HTML, so refer to the General Coding section for types of styles. The style code itself never changes, but where you place it determines how much of your work is affected. It can sit in any level of the table:

<table> - Style code encompasses everything within the table

<thead> - Style code encompasses everything within <thead>

<tbody> - Style encompasses everything within <tbody>

<tr> - Style encompasses everything within <tr>

<td> - Style encompasses everything within <td>

So choosing the tag you want to use style in determines how much of the table is affected. If you want a single cell to be a different color, you would style the <td> tag. If you want an entire row to have larger text, you would encase the <tr> tag.

For example: <table style="text-align: center;"></table> would mean that everything inside of the table tags would now be centered. Because the <table> tag always encompasses the entirety of the code, it will center everything within the table.

https://puu.sh/uEO76/0e11fead9c.jpg

You don't always want a <td> tag in your table to only encompass a single cell. If your box only has one column, that is fine. But when it has two, or four or more? Sometimes you want a single cell to extend across more of the table. It is about how it looks, and being able to manipulate size works wonders on the aesthetic nature of your tables.

This is where you use the 'colspan' feature. Colspan allows you to define how many columns your cell (<td> tag) has. Your <td> tag will always default to one colspan automatically. But once you want to fill more than one column, you must dictate it yourself.

Example: <table><tbody><tr><td colspan="4">Hello!</td></tr><tr><td colspan="2"> Wow!</td><td colspan="2>Not so Wow!</td></tr></tbody></table>

I've asked the 'Hello' <td> tag to take up four columns. I then specified the other two <td> tags to take up two columns each. There are a couple of important things you need to understand about colspan.

Colspan determines the amount of columns your table holds.

This means that colspan will always be relative to its highest denotation. That is, the highest colspan will set how many columns your table holds. Because a table has limited spacing, each additional column decreases the overall width of the columns.

So when I first defined colspan as having four columns, I told each column to take up 25% (100% divided by 4) of the width of the table. So when I further ons stated that two <td> tags will have two columns each, they then take up two columns each, which is 50% of the width each.

So only use the number of columns that are necessary. Adding in more columns will not change what you're intending to do, and will only complicate things.

So remember: colspan will set how many columns your table possesses. This allows you to change the length of <td> tags for each <tr> tag, allowing you to create aesthetically pleasing tables. Because a table has limited spacing, the more columns you possess, the smaller each column's width will be. Don't use more columns then is necessary for what you wish to achieve.

Check out this chapter's tables to see this in action.

https://puu.sh/uEO88/818e36c730.jpg

If you've already had a crack at using colspan to change cell width, you'll notice that sometimes it fails to maintain consistent spacing for each cell. This is because we haven't actually defined how much space each column takes up, and so the table tries to organically adjust each cell to what it determines is the 'correct' width. So if one cell has a lot more in it then the others, that cell will take up more room. 

Of course, this makes your table look ugly. However there is an easy solution to get around this. We simply need to declare the correct sizes of each column for the table. We do this by replacing the colspan on a certain <tr> tag with 'width' instead.

Example: <table><tbody><tr><td colspan="4">Greetings!</td></tr><tr><td colspan="2">Hello!</td><td colspan="2>Goodbye!</td></tr><tr><td width="50%">Hello!</td><td width="50%">Goodbye!</td></tr></tbody></table>

The 'width' code tells the table exactly how much spacing you want the cell to take up. Now this is where it gets a little complicated, but this is important. Always define 'width' in the <tr> tag with the most <td> tags.

You are telling the table how much spacing you want your columns to have. So you must always determine the smallest colspans your table has, so that it can then use that size to determine the width of the bigger colspans. If you only define the bigger colspans, it will ruin the spacing for the rest of your table.

For example: If I have a title that takes up 4 columns, and then 4 variables that take up a column each, and finish with 2 variables that take up 2 columns each, then I must use the 4 variables to define the width. In this case, each <td> width would be 25%. This means that the 2 variables would each automatically take up 50% for their 2 columns. And the title would take up 100% for its 4 columns.

Refer to the same chapter as before to see this in action.

Tip: If your smallest size is three variables with three different columns, use the width sizes 33%, 34%, 33%. You won't notice the 1% difference in the middle column.

https://puu.sh/uEO9u/fe3661cfca.jpg

Now that you've learned how to code, you'll probably be finding that a new difficulty has approached you. The tedium of it! Putting in tables manually is a damn pain. You have to access the source code itself, find the area you want the table to be in and then copy and paste the code you've created for that table. For one or two tables that's fine. But for every table? It starts to wear on you.

So I found my own solution: Configure your writing to be able to be copy and pasted entirely into the source code. This allows you to create multiple tables in the same chapter with ease. But please note, this isn't a quick fix. This only simplifies the process and makes it a bit faster.

Here is an example chapter.

You can also use this chapter as a coding reference if you like. I'll break down what I do in this chapter to make it able to be copy and pasted to source code.

Note: I've bolded the tables in the chapter so that you can identify them easily.

Tables

The tables are the simple part. You simply place it in the spot where you want the table to show up. Have the code as its own paragraph so it doesn't mingle with any of the text (Royal Roadl handles how the table is spaced). Finish placing all your tables where you want them, and we'll move onto the main part you need to do.

<br /> tag

The <br /> tag is the trick to how I can copy my work to source code. You may be confused by this tag. What does it do? Well, it is quite simple. Each time the tag is used, it creates a line-break. So two <br /> tags will give you one clear line and start your next paragraph on a second clear line.

Note: My chapters have two lines separating each paragraph so that it looks clearer and is easier to read. Only two <br /> is necessary, but I use three for this purpose.

Because it is a singular function that doesn't require anything acting on it, or inside of it, you can combine both the opening and closing tags for it. Hence the <br /> tag. I recommend not doing this in other areas unless you know what you're doing. But it is safe to do here, and simplifies things. So, let me explain how many <br /> tags you need and where you need it:

Next paragraph: To create enough spacing for your next paragraph, you must place the <br /> tags at the end of the paragraph. You need at least two <br /> tags, but I find three makes your spacing far better.

Table To Paragraph:  Tables have their own spacing, so you don't need to manage it at all. The only thing you are managing is the spacing leading to the next paragraph. So when you are placing your table(s), place one <br /> tag (if you use two <br /> tags for your spacing) or two <br /> tags (if you use three <br /> tags for your spacing). Place these directly after the </table> which signifies the end of the table code. This helps maintain a consistent spacing.

Final Paragraph: The final paragraph doesn't require any <br /> tags because nothing comes after it. So don't use any <br /> tags for your final paragraph.

If you add these <br /> tags and the tables, you can now simply copy your entire chapter and paste it into the source code.

Tip: If you want certain text bolded or stylised in any way, you can add the code for it in your chapter as well. When it is put into the source code it will convert it all into what you want. Just remember that too much code does get in the way of reviewing or editing your chapters, so keep that in mind.

https://puu.sh/uEOaN/fa9793d6b7.jpg

You made it to the end! Now you can make aesthetically pleasing tables at your leisure, hopefully without too much effort. Remember, the more you practice the easier it'll be to work with the HTML code. This is a step in the right direction for Royal Roadl, it'll just take some time to get used to it.

I hope you enjoy coding some fantastic tables! :)

An extra tip about vertical align from Xian
by default you're stuck with a middle vertical align in your table cells.  In your code you have to manually add ` vertical-align: top;` to the style for each TD that you want to have top aligned.  I tried doing it w/ a class and style tags but it was stripped out :/  Naturally, this can be used to set ` vertical-align: bottom;` as well if that's desired.

RE: Comprehensive Coding Guide for the Updated Website (HTML)

#3
'Drovak' pid='823132' dateline='1491422781' Wrote: I should put the coolspan or strong first?

coslpan and strong have two different intentions. But to put it simply, colspan is always first. However, that would also be an incorrect statement. Let me explain them individually.

<strong> covers a block of text in order to bold it. So you would do <strong>whatever text you wanted</strong> in order to bold the specified text in your chapter. Example: <table><tbody><tr><td><strong>Hello!</strong></td></tr></tbody</table>

colspan, on the other hand, is used to determine how many columns a single cell has. It isn't related to the text, but the table itself. colspan always goes inside the <td> tag in order to tell the <td> tag how many columns it has (unless your <td> has only one column, which is the default option). For example: <table><tbody><tr><td colspan ="4">Hello!</td></tr></tbody</table>

So because the <strong> tag is related to text, and text is inside the <td> tag, technically colspan comes before <strong>. Like so: <table><tbody><tr><td colspan ="4"><strong>Hello!</strong></td></tr></tbody</table>

However if, for any reason, text was placed outside of the <td> tag, then the <strong> tag would come before the colspan. Colspan and <strong> have different intentions. Colspan is related to the table itself, specifically the <td> cell size. <strong> is related to the text in the finished property, bolding any text that is encased within the tags.

RE: Comprehensive Coding Guide for the Updated Website (HTML)

#4
Very niece. Probably really useful for authors. But I think you got a few things mixed up.

First P isn't used to create a new line but to mark a paragraph. True, it will give you a new line at the end of an paragraph, but in most cases it's overkill. Plus it can look weird if the css makes the margin/padding between paragraphs to big.
I think you might have gotten it mixed up with the tag <br>, or the xhtml version <br />. Br is what you really want to use every time you need a new line. P is used to group the text into rough parts.

You should also mention the b (bold) and i (italic) tags. They look the same as strong and em but are usually used in slightly different cases. Strong and em usually are used for structure while b and i for design. The line is a bit blurry but for us end-users it would be great if we could use the shorter ones. Would be great if a Dev could tell us which one exactly we should use and how their conversion tool on the server side treats them.

From a technical point of view another noteworthy tag would be div. Don't think that many authors will use it but you could do some pretty sweet things with it and some css. (Some sort of UI maybe?)

Oh, and what about the style tag? It would allow authors to choose their own fonts and colors for their chapters. Again, I don't have access to a PC right now, but could someone else's maybe test it?

At least that's what I would say from my own experience as a WebDev. RR might be blocking/replacing some of these tags and I didn't have time to test if they all work. Would be great if someone could test them.

RE: Comprehensive Coding Guide for the Updated Website (HTML)

#7
Is there a quick way to get a section to be single spaced? I've tried evey Unicode character I can think of for new line/break/carriage return/etc, and when they are pasted into RRL they are all interpreted as <p>/paragraphs. This of course means I can't have single spacing without returning to convert every <p></p> pair manually into breaks.

Is there anyway around doing this? Can you set the paragraph spacing anywhere besides CSS?

RE: Comprehensive Coding Guide for the Updated Website (HTML)

#8
'Volos' pid='830003' dateline='1510884925' Wrote: Is there a quick way to get a section to be single spaced? I've tried evey Unicode character I can think of for new line/break/carriage return/etc, and when they are pasted into RRL they are all interpreted as <p>/paragraphs. This of course means I can't have single spacing without returning to convert every <p></p> pair manually into breaks.  

Is there anyway around doing this? Can you set the paragraph spacing anywhere besides CSS?

<br /> at the end of a line will act as a 'break' moving the next statement onto a new line.

so two <br /> at the end of every paragraph will add a single line of blank space before starting the next line of text. That is how I do spacing, it's the quickest way I've found (you're just copying and pasting the same code at the end of every paragraph).

Does this help? Or is your problem something else?

Edit: I think I'm misunderstanding your question. If that didn't help, can you link me your code. it'd be easier to have a reference.

RE: Comprehensive Coding Guide for the Updated Website (HTML)

#10
'mrel' pid='831401' dateline='1514572030' Wrote: I tried using your examples, but the results do not look right.
The "Cell width" example gives me a table where the second row looks like 33% and 66% instead of half/half
The "Declaring cell spacing" example give me a table where the second row looks like 90 % and 10% instead of half/half and the third row looks like 45% and 45% lying below the first cell of the second row...

Hey, my writing may have been confusing. It was a lot to work with when I was picking up how to code the tables, and it was hard to transfer that knowledge into words.

Can you post your code here so I can have a look at it? If I fiddle around with it a bit I should figure out the problem.

Re: Comprehensive Coding Guide for the Updated Website (HTML)

#11
I'm sorry if it's inappropriate but.. it feels like some links to actual html resources are badly needed, so please see: w3schools

In short there seems to be some gross misunderstandings about some very basic html tags being parroted on this forum and it would be better i think if people knew actual resources to look up the actual markup they need rather than playing a game of telephone and pathologically misunderstanding their tools.


Take the <p> tag for instance: This is the paragraph tag, you dont need to emulate paragraphs since they are already built into HTML. using 2 <br> tags as suggested above is just silly and makes me cry.

<p>This is a paragraph</p>

HTML also has an associated styling language (CSS) which allows you very powerful control over the presentation of your content. You can for instance say that you want each paragraph to start with an indent, or apply special styling to the first character or change the amount of whitespace between paragraphs in actual pixels.
You can also share styling between paragraphs using css so you dont have to repeat long bits of markup for each table or paragraph.

Dont just use <strong> for larger text, use it if you actually want to stress something. use <h#> tags for section headers etc.

While my mindset about html is a bit biased towards developing actual websites i feel there is still something to be gained by understanding the tools at our disposal and using them appropriately.


Edit:
It would probably be helpful, especially for the tables to have well formated html that corresponds to the actual example table such that html doesn't come off as this mystifying thing that seems opaque or scare to some people. For really advanced tables it probably would help a bit to know at least a bit about the html that underlies the table and maybe be able to tweak it a bit.

Re: Comprehensive Coding Guide for the Updated Website (HTML)

#12
'Waffle(est)' Wrote: I'm sorry if it's inappropriate but.. it feels like some links to actual html resources are badly needed, so please see: w3schools

In short there seems to be some gross misunderstandings about some very basic html tags being parroted on this forum and it would be better i think if people knew actual resources to look up the actual markup they need rather than playing a game of telephone and pathologically misunderstanding their tools.


Take the <p> tag for instance: This is the paragraph tag, you dont need to emulate paragraphs since they are already built into HTML. using 2 <br> tags as suggested above is just silly and makes me cry.

<p>This is a paragraph</p>

HTML also has an associated styling language (CSS) which allows you very powerful control over the presentation of your content. You can for instance say that you want each paragraph to start with an indent, or apply special styling to the first character or change the amount of whitespace between paragraphs in actual pixels.
You can also share styling between paragraphs using css so you dont have to repeat long bits of markup for each table or paragraph.

Dont just use <strong> for larger text, use it if you actually want to stress something. use <h#> tags for section headers etc.

While my mindset about html is a bit biased towards developing actual websites i feel there is still something to be gained by understanding the tools at our disposal and using them appropriately.


Edit:
It would probably be helpful, especially for the tables to have well formated html that corresponds to the actual example table such that html doesn't come off as this mystifying thing that seems opaque or scare to some people. For really advanced tables it probably would help a bit to know at least a bit about the html that underlies the table and maybe be able to tweak it a bit.

I don't disagree with you. I built this guide because it's what I figured out by fumbling my way through. A lot of HTML didn't (back when I used it) work when coding for my fictions, or worked differently to how it should. A lot of the incorrect stuff is to force the code into the correct formatting. As far as I can recall not putting in <p> would mess with the entire text/boxes and make it impossible to format. I have no idea if there is a better way to do it, I just found a fix for problems and went with it. Figuring out how to get my tables and writing working, and make it look pretty, was mostly trial and error - which is why it's so flawed. I made the guide so that others wouldn't have to go through so much effort.

This guide's really only half-way completed. Because I've currently stopped writing on this site I haven't had any more practice and so can't fix the guide up. I'm more than happy for someone to make a much better tutorial, they can take whatever they want from this one if they want to. Until then, I'll keep it here in case it helps someone.

Re: Comprehensive Coding Guide for the Updated Website (HTML)

#13
'AndrewJVarela' Wrote: A lot of HTML didn't (back when I used it) work when coding for my fictions, or worked differently to how it should.

I wasn't around back then but I can confirm that even now, HTML on RoyalRoad is weird and limited. You can write proper HTML all you want, it won't be of any use when most of it will be automatically deleted from your Sourcecode or inherits oddities from sitewide CSS notations. It's a constant battle of figuring out why something W3C compliant and properly fomartted can result in complete illegible nonsense and code garbage, just from hitting save.

Re: Comprehensive Coding Guide for the Updated Website (HTML)

#16

kanadaj Wrote: This is intentional. style tags can be used to cause shenanigans to other parts of the website other than the fiction content, and attributes or css styles are whitelisted manually if they are deemed acceptable.
This makes sense. I was trying to do 
Code:
&lt;style>
.test {
color: black;
transition: color .5s ease-in-out;
}
.test:hover {
color: red;
}

&lt;/style>


Or do its attribute equivalent:
Code:
&lt;p style=&quot;color:black;transition:color .5s ease-in-out;&quot; onmouseover=&quot;this.style.display=&#39;red&#39;;&quot;>&lt;/p>

Do you think you could find a way to enable hover-style-changes?
Happy Reading!

-SireSwag
~J.C.

Re: Comprehensive Coding Guide for the Updated Website (HTML)

#17

SireSwag Wrote:
kanadaj Wrote: This is intentional. style tags can be used to cause shenanigans to other parts of the website other than the fiction content, and attributes or css styles are whitelisted manually if they are deemed acceptable.
This makes sense. I was trying to do 
Code:
&lt;style>
  .test {
    color: black;
    transition: color .5s ease-in-out;
  }
  .test:hover {
    color: red;
  }

&lt;/style>


Or do its attribute equivalent:
Code:
&lt;p style=&quot;color:black;transition:color .5s ease-in-out;&quot; onmouseover=&quot;this.style.display=&#39;red&#39;;&quot;>&lt;/p>

Do you think you could find a way to enable hover-style-changes?
Code:
onmouseover

On its own this already cannot function because it's onmousehover would allow arbitrary javascript which simply cannot be sanitized.


I don't believe there is a safe way for me to allow you to add hover effects in any way; it requires either allowing <style> tags to use the :hover pseudo-selector (not happening) or JavaScript (again, not happening).

Re: Comprehensive Coding Guide for the Updated Website (HTML)

#18

kanadaj Wrote:
SireSwag Wrote:
kanadaj Wrote: This is intentional. style tags can be used to cause shenanigans to other parts of the website other than the fiction content, and attributes or css styles are whitelisted manually if they are deemed acceptable.
This makes sense. I was trying to do 
Code:
&lt;style>
  .test {
    color: black;
    transition: color .5s ease-in-out;
  }
  .test:hover {
    color: red;
  }

&lt;/style>


Or do its attribute equivalent:
Code:
&lt;p style=&quot;color:black;transition:color .5s ease-in-out;&quot; onmouseover=&quot;this.style.display=&#39;red&#39;;&quot;>&lt;/p>

Do you think you could find a way to enable hover-style-changes?
Code:
onmouseover

On its own this already cannot function because it's onmousehover would allow arbitrary javascript which simply cannot be sanitized.


I don't believe there is a safe way for me to allow you to add hover effects in any way; it requires either allowing <style> tags to use the :hover pseudo-selector (not happening) or JavaScript (again, not happening).
Ah that's totally fair. Thanks anyways :P
Happy Reading!

-SireSwag
~J.C.

Re: Comprehensive Coding Guide for the Updated Website (HTML)

#19
One note regarding table use:
by default you're stuck with a middle vertical align in your table cells.  In your code you have to manually add ` vertical-align: top;` to the style for each TD that you want to have top aligned.  I tried doing it w/ a class and style tags but it was stripped out :/  Naturally, this can be used to set ` vertical-align: bottom;` as well if that's desired.

Great guide mate, thanks for putting it together.  I'm a professional Front End Developer, but it was nice to see that someone else had already done the leg work to figure out what works and what doesn't.

As an aside, since the forum is still using BBCode, this is my code for my signature if anyone wants to output their book covers as links w/ clickable title below and NOT trigger the vertical scroll (the second TD w/ a space provides the spacing between books, also note the image sizes):
Code:
[table][tr][td]
[url=https://www.royalroad.com/fiction/33577/i-was-reborn-into-a-fantasy-world-as-a-magic-robot][img=107x160]https://www.royalroadcdn.com/covers/i-was-reborn-into-a-fantasy-world-as-a-magic-robot-full.jpg?time=1592997288[/img][/url]
[b][url=https://www.royalroad.com/fiction/33577/i-was-reborn-into-a-fantasy-world-as-a-magic-robot]Automata Prime[/url][/b]
[/td]
[td]
 
[/td]
[td]
[url=https://www.royalroad.com/fiction/33827/automata-annex][img=107x160]https://www.royalroadcdn.com/covers/automata-annex-36176-full.jpg?time=1593758751?time=1592997288[/img][/url]
[b][url=https://www.royalroad.com/fiction/33827/automata-annex]Automata Annex[/url][/b]
[/td]
[/tr]
[/table]

Re: Comprehensive Coding Guide for the Updated Website (HTML)

#20
Xian Wrote: One note regarding table use:
by default you're stuck with a middle vertical align in your table cells.  In your code you have to manually add ` vertical-align: top;` to the style for each TD that you want to have top aligned.  I tried doing it w/ a class and style tags but it was stripped out :/  Naturally, this can be used to set ` vertical-align: bottom;` as well if that's desired.

Great guide mate, thanks for putting it together.  I'm a professional Front End Developer, but it was nice to see that someone else had already done the leg work to figure out what works and what doesn't.

As an aside, since the forum is still using BBCode, this is my code for my signature if anyone wants to output their book covers as links w/ clickable title below and NOT trigger the vertical scroll (the second TD w/ a space provides the spacing between books, also note the image sizes):

Hey thanks, I'm glad this is still helping people to this day. Almost makes me want to stop procrastinating my writing...

I should get to updating it at some point as I figured out how to do colouring of the boxes/text and a few other things most people don't realise you can do.

I'll put your note into the guide. If there's anything else feel free to post it here and I'll put it in when I see it. Thanks again!