Understanding and using the source code, masks and textboxes

If you reached this page via Help, you have probably never edited a page before. In the normal editor, an extra purple CoTAN button appears after the page has been loaded to the end. The name stands for “Comic Translator by Applicated Notes” or “Comic Translator by Overlaid Stickers”. It is a handy additional editor for making and modifying stickers with the mouse, as the standard approach involves only setting the coordinates manually.

The source is a list of all the stickers (i.e. masks to block out original text and textboxes to draw new text) to apply to the comic. Each sticker has at least three lines, the first line starts with a @ and the last line consists of one ~. A piece of source code looks like this

@y-from-top,x-from-left,width,heigth-is-depth
#
~
@y-from-top,x-from-left,width,heigth-is-depth
This is a text sticker which contains the text you are reading just now and the one above is a white mask, because the second line starts with a # and no colour code after the #, so the colour defaults to white.
~

Stickers are rounded rectangles put above the original comics, in order to hide the original text or add new text. Each is defined in three line of source text, like the two examples above. Stickers with solid colours to hide the text below are called masks.

Stickers of the same type adhere to the priority of description between them - the one described below will overlap. The arrangement of masking stickers is always subject to text, irrespective of the order of description. However, it is more aesthetically pleasing to stick to coordinate connectivity - mask, text located on it, next mask, text located on it… This way is easier to follow between the different translation languages. This can be corrected manually after marking

CoTAN-the editor has 4 operating modes:

• “Original” - shows the original picture
  • Hiding all the work
• “Masks” - to cover the original text in the picture with the background colour
  • They contain only the background colour code, other text placed in them turns them into text
  • The colour selector's own functionality has not yet been implemented
  • But you can get the colour from a picture using a browser snippet plugin or even a tool built into the browser console
• “Texts” - for translation
  • You can read about text styling on previous page of the
  • When editing, all stickers are shown as if transparent so that the original text can be seen
• “Inspection” - to review the results of the work

Saving changes in the CoTAN-editor does not mean that they will also be autosaved in the basic editor! What if something else needs to be changed in the basic editor?

Example video, translating a new strip, using a strip from Freefall

If you don't want to deal with backgrounds, you can put in a more primitive AIMG markup. The old editor cannot work simultaneously with the new one, so the method of getting the markup through the CoTAN-editor is somewhat unconventional:

• Open the CoTAN-editor, purple button
• Маsks marking is useless, they do not exist separately in AIMG, and the text ones can be called mask+text ones
• Select "Texts" mode
• Mark the stickers not with the indents described in the above videos, but with the coverage of the entire cylinder
• Save edits, return to the base editor
• Manually change the opening and closing tags of cotan to aimg
• The following turns and roundings also work in AIMG
• Don't forget to save your edits in the basic editor!

The origin (0,0) is the top left corner of the picture and the pixel are count from there downwards (Y) and to the right (X), i.e. In the following examples we will use the example @37,25,419,112. This is useful to know for manually correcting an inaccurately placed sticker. The first and second digits are responsible for the position of the sticker on the picture and may extend beyond the edges, the ever-positive third and fourth digits are responsible for the dimensions of the sticker. Note that the first and fourth digits are related to the top-bottom relationship, and the second and third digits are related to the right-left relationship. The coordinates understand addition and subtraction operations (but only once) - this is also useful for debugging inaccuracies

Let's play with the height… * @37,25,419,112+10 – the sticker has widened downwards by 10 pixels

• @37-10,25,419,112+10 – upwards by 10 pixels
• @37-10,25,419,112+20 – both up and down

…and width

• @37,25,419+10,112 – to the right by 10 pixels
• @37,25-10,419+10,112 – 10 pixels to the left
• @37,25-10,419+20,112 – both left and right

For slope, add the angle of inclination in degrees, separated by commas

• @37,25,419,112,90 – and the sticker will go to the right side
• @37,25,419,112,-90 – or the same to the left
• @37,25,419,112,-270 – and again to the right, since -270 angle degrees = +90

Usually rotations are used for text labels (and AIMG's mask+text labels), but there are cases when it is necessary for masking labels as well.

The centre of rotation is the centre of the sticker. So if you increase or decrease the size, after you applied a rotation, the placement of the sticker changes and you may have to be correct it manually.

Let's look at the second line of the sticker:

@37,25,419,112
#
~

The # sign at the beginning of the line denotes the relationship of this label to masking labels. Consequently, the contents of a text label cannot start directly with this character - the standard %%wiki methods%% or just an initial space. The # character may be followed by 3 or 6 characters corresponding to a three- or six-character RGB code for the background colour, regardless of the character's REGISTER. The white background is the most common so to simplify things it is the default, so instead of #ffffffff, you can use #fff or even just # without anything after it, as in the example above.

White rectangles on larger black rectangles can be used to construct speech balloons as shown in Freefall 3227

@17,232,106,95;20
#000000
~
@19,234,102,91;20
#
~

This flexibility of setting combined with the translation colour control allows you to make, for example, grey text on a black background (#000) (see pictogram group ):

@37,25,419,112
#000
~
@37,25,419,112
<fc #808080>Grey text</fc>
~

By default stickers have a corner rounding of 5px, and this can be adjusted with another group of four values, separated from the first one for location and size by a semicolon. These Numbers need to have units and all CSS units are supported - px, ex, absolute 1in = 6pc = 72pt = 2.54cm = 25.4mm, em and %

• @37,25,419,112 – auto rounding of all corners at 5px
• @37,25,419,112;5px 5px 5px 5px – exactly the same as above for each corner
• @37,25,419,112;35px – auto rounding of all corners at 35px
• @37,25,419,112;35px 20px 5px 5px top lft corner rounded with 35px, top right corner with 20px – The corners are bypassed according to the scheme ↖,↗,↘,↙. For more information see the https://www.w3schools.com/CSSref/css3_pr_border-radius.asp.
• @37,25,419,112;35px / 5px is a elliptic rounding
• @37,25,419,112;35px 20px 10px 5px / 4px 8px 12px 16px this also can be done seperately for any corner

Use [mirx] or [miry] to mirror the text, both to rotate it 180°
[=2.8][!2.2] normal: EU
[­mirx]: EU[/]
[­miry]: EU[/]
[­mirx][­miry]: EU[/][/] [/][/]
[xFactor] widens or compresses the text horizontally according to Factor and [yFactor] does the same vertically.
[­x2]: [x2]Two times the regular width[/]

But these tags widens text in all sides, so use [_number of pixels] to insert as much pixels of whitespace as needed.
[­x2][­_60]: [x2][_60]Two times the regular width[/][/]

I inserted the perspective with a special external tag [pers], it is only suitable for that particular issue.

• Freefall 0007
• Freefall 0110

You can use gradients as described here.

Also see this example

@13,361,188,74,20;188px 17px 188px 6px / 30px 6px 36px 51px
#%to bottom,
#5a0095 40%,
#7300a5 40%, #7300a5 60%,
#8400cf 60%, #8400cf 80%,
#9400e8 80%
~

here. Or for a simpler example here.

Syntax of Typography Plugin for text properties manipulation

This source

[­!4.8][­flo]<typo ts: 3px 2px 0 #ca1305; fc: #ff8b56>**SNAP!**</typo>

produces

[!4.8]SNAP!

See Freefall 1696 for this example. Be aware that you have to use the preview-Button to check for this, because CoTAN ignores this tag.

You can use HTML comments in the source code, for example
   <!-- just a comment in the source without any effect on the output -->

If you want to add source code examples to this or any other page, you can escape tags by putting -. into them like this
   [-.!1.8]
to show [­!1.8] without actually influencing the size, or put double percentage signs %% before and after them like this
   %%verbatime text like [­!1.8] goes here%%
or use the tags <nowiki> and </nowiki> like this
   <nowiki>verbatime text like [­!1.8] goes here</nowiki>
You can also use the tags <code> and </code> or indentation at the start of a new paragraph with two spaces or a (tab).
For further information see dokuwiki.org.