Composing Tips and Tricks

Body

Hello! You've found yourself in my article, this will be a megalist of all the weird things I've found to make articles in TDX less ugly. 
If you have a tip you'd like to share, let me know and I'll get it added on here for you. 

Headers

There's lots of headers that TDX offers, but really only like 3 are usable:

This is heading 1

I don't like Heading 1, don't use it. The page will get Heading 1 at the top with the name of the article, and it's best for clarity to keep that as the only visible Heading 1 on the page.

This is heading 2 This is heading 2 bold edition

Now we're talking, use this for your top level stuff

This is heading 3 This is heading 3 bold edition

Smaller, but good for sub-headings

This is heading 4 This is heading 4 bold edition

Heading 4 is still a bit bigger than normal text, but I like to bold it to it can properly stand out against the rest of the text

This is heading 5 This is heading 5 bold edition

At this point it's useless to try to use any heading past 4. Try to not need it. For the good of all humanity, please.

Formatting Lists and Numberings

List Types

For some reason TDX only likes lists to be numbers, but that makes for ugly lists. Here's how you can change that. 

To start, the order of lists should always be Numbers, lowercase letters, lowercase roman numerals. If your list requires more than those 3 levels, you will need to simplify your documentation. 

You will need to start your list before you can edit how it is numbered, example:

  1. Numbers
    1. Lowercase Letters
      1. Lowercase Roman Numerals

Once the list is made, you will need to view the HTML of the article by clicking Source in the top-left. Look for your list, specifically the <ol> tag for each indent, here's what the above list looks like:

<ol>
    <li>Numbers
    <ol>
        <li>Lowercase Letters
        <ol>
            <li>Lowercase Roman Numerals</li>
        </ol>
        </li>
    </ol>
    </li>
</ol>

You will need to edit the <ol> tag, the usage is <ol type="1|a|A|i|I">, the types are as follows:

  • 1 - This is the default numbering (1, 2, 3, Etc.)
  • a - Lowercase alphabet (a, b, c, Etc.)
  • A - Uppercase alphabet (A, B, C, Etc.)
  • i - Lowecase roman numerals (i, ii, iii, Etc.)
  • I - (Uppercase i) Uppercase roman numerals (I, II, III, Etc.)

Following the rules above, the HTML will be updated to the following:

<ol>
    <li>Numbers
    <ol type="a">
        <li>Lowercase Letters
        <ol type="i">
            <li>Lowercase Roman Numerals</li>
        </ol>
        </li>
    </ol>
    </li>
</ol>

Once that has been updated, click Source again to see the new list:

  1. Numbers
    1. Lowercase Letters
      1. Lowercase Roman Numerals

Starting Lists at a specified Place

To start a list on a specific number, numeral, or letter, pop into the Source and look for your list, specifically the <ol> tag. To start at a specific place, add start="starting number/letter/numeral". Example below

  1. This is a list
  2. I need it to start on number 3

The code for this list is this currently:

<ol>
    <li>This is a list</li>
    <li>I need it to start on number 3</li>
</ol>

After adding the start tag, the source like this:

<ol start="3">
    <li>This is a list</li>
    <li>I need it to start on number 3</li>
</ol>

The final list now:

  1. This is a list
  2. I need it start on number 3

Pictures

Inserting Pictures

The best way (with the least amount of issues) is to import pictured directly. This requires that the picture be downloaded to your computer. They can be inserted by clicking the picture icon, choosing the upload tab, then Browse to select the file. Once selected, click Send it to the server. You can then resize it and click OK. You can always resize it and view it's propertied by double-clicking the picture.

If you do not want to download the pictures, and use links, feel free. Sometimes TDX will pull over some spaghetti code and it breaks the doc after your're done editing it. Usually adding a ton of spaces. You can resolve this by going into the source and deleting all the page breaks <br /> tags. ctrl+f is your friend here.

Try to keep your pictures to less than 900px wide. as TDX will not squish them automatically when viewing on a smaller screen or mobile page. 

Pictures in Lists

TDX has NO IDEA how to handle images, especially in lists seeing that it completely breaks all numbering sequences and formatting. Here's how to get an image in a list without breaking everything. 

First, you will need to make your list. Its best to have a line after where you would like your image to be to stop any formatting issues once the image is in place:

  1. Make sure you have this face
  2. ...
  3. Proft?

Obviously, that's ugly as sin, but TDX doesn't tell you that the image will appear under it, but you can fix that by pressing Shift+Enter. Then it will show as it would in the document. 

  1. Make sure you have this face
  2. ...
  3. Proft?

You can then resize as needed, and add text under the image. Don't try to put stuff next to it, TDX has no idea how that works, even other images will just show up under each other. 

Side by Side Images

Man, TDX is dumb with this one. The real answer I have is there is no answer. What I've devolved to is using something like Paint.net to paste the images next to eachother. Do note, TDX will resize images if they are too wide, so you'll want to keep them to a maximum of 900px wide. This is the point where TDX starts to squish them on my 24in 1080 monitor. Resizing is easy enough once the image is added, so don't be afraid of not getting it right on the first time around, just double-click the image and resize as needed. Keep the lock icon locked so it keeps the aspect of the image.

There's a lot of HTML that TDX can handle, but I have yet to explore everything. 

Tables

TDX tables work just like any HTML table will, but to actually get to the meat and potatoes of a table you will have to venture into the HTML code itself. Again, this can be found by clicking "source" at the top-left of the composing screen. 

You will first want to insert your table using the button at the top (it looks like a calendar). From this you can select your rows and columns, borders, compact style, and headers. All the information on the screen can be edited after the fact inside the HTML. Below is a breakdown of the features:

 

Catch Phrase! (This is the Caption)
This is the first cell And this is the second
Row 2, baby! 2x2, better than four
Working hard from the bottom Now we here
The above table was made with the following setup:
  • 2 columns, 3 rows
  • No borders selected
  • First Row Header
Wow this one has Stripes! Isn't that wild?
Looks like I'm bold too! Wait, what?
Yeah me too, look! You are all weirdos
The table above was made with the following setup:
  • 2 columns, 3 rows
  • Borders selected
  • Stripes Selected
  • First column headers

Editing tables is fairly simple. The content inside of them can be changed in the normal composing window. Things such as size, alignment, bold, etc. can be done as normal. If you need to add extra lines, pop into the source and look for your table. It will look something like this:



Adding new rows is as simple as copying/pasting the entire <tr> ... </tr> block, then leaving the source and then editing the cells to your liking.

If you've copied/pasted the ENTIRE table from Excel, Google Sheets, etc. Then the block will look a little bit different with some extra information, but the concept is still the same. 

Table of Contents/Linking to other parts of the document

Oooh boy, OOOH BOY strap in for this one. The ToC we're about to make is wicked ugly, but it works just fine. For a full example, check out my Examplify Troubleshooting Guide. Where I painstakingly figured out all this rigmarole to get it working. 

Essentially this will be made last, and you will need to decide a few things before you start. Tags are going to be added for each heading or place in the text you want to link to. We'll be using the depricated anchor tag since TDX does not like the new standard ID tag. 

Once the document is complete, decide where you would like to link to, and make a note of what you would like it's anchor name to be, you will need to know it for coding purposes, so keep them handy, a notepad is your best friend. 

Second, TDX is stupid in that is does not know that the top banner for the search and WesternU logo is covering part of the page, so when we add these tags, you will need to move it up about 8-10 lines, depending on if you have double-spaced, headers, or paragraph breaks. For reference, the anchor for Installation in the Examplify Troubleshooting guide is actually on the line Application service is unavailable under the Known Issues and Troubleshooting: Windows. Dumb, I know. 

Know you need to make your list, I don't reccomend using a numbered list unless you really want to, because we're going to be in the HTML of things, and it gets messy. And I mean messy. I digress, make your list, and tabbing won't work because again, TDX is dumb, so make good use of the Increase/Decrease Indent buttons in the toolbar Shift+Enter will also allow you to start a new line directly under the current instead of adding a double spaced line. You'll want something like this:

Tips and Tricks

Partytown USA
Hide the Body

Getaway Drivers

Ryan Gosling 
Jason Statham
William L. Petersen

Once there, you will need to add your anchors in the article, again, 8-10 lines above where they should be. This may take a lot of saving and testing before it looks good. 

Enter the HTML of the document and add this line to the text where you would like your anchor to be:

<a name="heading/anchor name"></a>

The name portion will be what the document links to, the users will see this if they hover the link or click it, so make sure it's not too long and appropriate. This will be used when actually linking the document around. Do not use spaces in the anchor name, underscored and hyphens will work.

Once added, you will see little flag icons: You can double-click these to see the name of the anchor for reference. You can even cut/paste and drag these to where you need them in the editor

Once you've added all your anchors you will want to link them to parts of the document. Highlight the portion to link, then click the hyperlink button in the toolbar. Under the Link Type dropdown, select Link to anchor in the text and find the anchor name in the dropdown for By anchor name. Save the link and voila! Links!

Follow those steps for all the anchors you made and thats it. You can use these steps outside of the ToC if you want to quick link to other parts of the document. You can even use the links to bring others to a specific place in other documents with anchors. 

Other HTML Stuffs

Oh, so you're a hotshot, eh? Wanna go do your own funky stuff in TDX? Well have fun. 

TDX only supports a handful of HTML tags and attributes, they've been helpful enough to provide a list of them, link below:

https://solutions.teamdynamix.com/TDClient/1965/Portal/KB/ArticleDet?ID=48230 

 

Details

Details

Article ID: 165351
Created
Thu 4/3/25 4:30 PM