FIXME This page is not complete yet. Please help to complete it.
(Remove this paragraph once the translation is finished)

Understanding and using the source code, masks and textboxes

Recommendation for Opera users (and maybe other browsers with this feature) - remove the page width conversion to 100% of the screen width, this affects the actual position of the stickers

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.

Overview

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

Interface

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?

Video Demonstrating The Editing

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

AIMG for the lazy

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!

Sticker coordinates

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

Rotation

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.

Masks

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>
~

Rounding

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

Textboxes

Use [mirx] or [miry] to mirror the text and [_number of pixels] to insert as much pixels of whitespace as needed. [xFactor] widens or compresses the text horizontally according to Factor and [yFactor] does the same vertically.

Examples from Freefall

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

Gradients

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.

Text Shadows

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.

Meta

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.

This website uses cookies. By using the website, you agree with storing cookies on your computer. Also you acknowledge that you have read and understand our Privacy Policy. If you do not agree leave the website.More information about cookies