CCK Manual   v2.07 (May 2014)
menu ::
Strip
A strip frame consists of a white area holding the panels and optional elements above (header, preface) and below (epilogue, footer).
The header area, which can be given individual text- and background-colours, as well as a background image/pattern, includes title and subtitle. Both, title and subtitle, can have their individual font. In addition, the title's font variant small caps can be set (default: on).
The preface area is a textbox for introductory words.
The epilogue area is a textbox for closing words.
Both, preface and epilogue, will be set in the global panel font (concerns bubbles and narration).
The right-aligned footer line shows author (e.g. with copyright-mark: '©Buttcharge') and/or creation date (format 'dd mmm yyyy'). The button today presets the actual date.
The global font size applies to all elements (at which the title's size is bigger by the factor ×2, and the footer is smaller by roughly the factor ×0.75).

↑ index
menu ::
Panels
The usual boxes with a thin black border. Specific panel commands always refer to the currently selected panel (surrounded by a blue focus mark).
New panels, being appended at the end of the strip, can be created either by adding a blank one (empty with default size) or by spawning a clone, which will be an exact copy of the selected panel. The focus mark will automatically be set to the new panel.
To remove a panel, simply delete it. If there's only one panel in the strip, it cannot be deleted.
Its position can be changed by the buttons move back and move forw., shifting it to the left or the right.
The wrap-command makes the selected panel begin a new row. This is needed only in larger layouts where e.g. a 2×3 panel block is intended. For the usual small layouts (2×1 or 3×1) such a manual wrapping isn't necessary - on narrow screens/displays the panels visually perform line breaks automatically anyway. Once a panel has been wrapped, it can also be unwrapped again, to restore the original linear flow.
The size values can be directly changed by dragging the width/height numbers.
The clipping assigns whether contained elements - such as sprites, bubbles or narration boxes - either get clipped inside the panel or are allowed to overflow the border. Per default, clipping is activated.

↑ index
menu ::
Characters
Speech bubbles appear automatically as soon as the respective text area has been filled and approved (either by pressing ENTER, which refreshes the view, or by leaving, e.g. via TAB-key). Approving an empty text area makes the bubble disappear. Any whitespace chars at the beginning or end of the text get trimmed.
The bubble position can be adjusted by directly dragging it in the panel.

As for input styling see styling text.

A bubble can be set to an individual font, thus overriding the global panel font. This comes handy in case a certain character needs to have a different style categorically.

The tail of a bubble can be changed by a mouse-down on the tail symbol (below text area) and selecting the desired tail type. Its (horizontal) position can be adjusted by directly dragging it in the panel.

Sprites are selected from a predefined list. The number of available characters will probably increase over time, as new sprites are added.
Their position inside the panel can be directly adjusted by dragging.
The corner button fits the sprite (back) into its home corner.

↑ index
menu ::
Objects
Just like characters, objects can be selected from a predefined list and added to the scene.
Used objects are shown in a list. The currently active object, whose image is marked with a blue rectangle (and whose name is highlighted in the list), can also be deleted.
Their position inside the panel can be directly adjusted by dragging.
The size values can be directly changed by dragging the width/height numbers.
The ratio assigns whether the current aspect ratio should be preserved, which the default setting.
The original size can be restored by the orig button.

↑ index
menu ::
Narration
Narration boxes can be added to enrich the scene with descriptive text.
To select one, click on it in the panel, which makes it highlighted. Now it's editable (in the text area) and deleteable.
The position type defines their appearence. If it's free, it can be directly adjusted by dragging - use the reset button to reposition it in the upper left corner. If it's sticky, it will always stay in full width at the top (or at the bottom, respectively) of the panel.

As for input styling see styling text.

↑ index
menu ::
Ambience
The base tone (grey) can be adjusted via slider.
Optionally, a background image can be chosen, which will act as an automatically repeated pattern to fill the panel.

↑ index
menu ::
Import
To test local graphics, all types (
characters,
objects or
backgrounds) of images can be imported.
Immediately after being chosen via file select field, the graphic's label (initially its filename) can be changed optionally.
Thereafter, the type and label of the imported image is shown in a list. At the same time it's added (by its label) to the existing entries in its correspondent select-list(s) under the hood and is now available in the particular submenus.

Notes:
↑ index
menu ::
HTML
After pressing the button dump, the required HTML code is shown (refreshed) in a textarea, from which it can be copied and pasted into the target page.

↑ index
styling text
Since bubble/narration text is pure HTML code, all sorts of tags can be included and will be executed accordingly, which grants a maximum of layout control.
Common use cases:

Sometimes, when a text is rather long, we must manually insert line breaks to prevent the bubble/box from getting too wide:
This is a lot of text,<br>but my area is still<br>slim and doesn't occupy<br>much horizontal space.


Critical chars have to be encoded as HTML entities:
Besides, the whole range of entities can be used, e.g.:

Due to the internal organisation of fonts we can use classes to apply font families.
(As for available font families see specs :: fonts.)
Examples with explicit font styling:

It is possible to embed images; in our case we simply use object sprites, because they're available anyway.
Example of showing the 'cannabis leaf' (object ID 1):
<image src='cck1o.png'>


↑ index
tips & tricks

↑ index
specs :: graphics
All graphics, as well as the entire strip design, consist of greyscale tones. This makes it easier to approximate images from different sources visually and also reduces file size in general. (As an exception, some object sprites might be coloured nonetheless: if they need RGB hues by nature - e.g. country flags - or if it serves the psychological effect when embedded in bubbles.)

The target image format is PNG with 8-bit palette and alpha transparency - though after optimization the resulting palette is probably smaller (7-bit or less).

In most cases the source images are JPGs found on the webs.
Here's a description of how to make them suitable for CCK characters/objects/backgrounds:

Preparation steps:

Creating standard sprites (simple transparency):

Creating advanced sprites (alpha transparency):

Final optimization step:

↑ index
specs :: fonts
CCK offers the three standard fonts...
... plus alternatives:

While Arial, Times and Courier are common families, others need to be served as webfonts to make them available to clients. Each webfont packet consists of 4 files (*.ttf, *.eot, *.woff and *.svg), so the majority of browsers and operating systems are covered.
Currently we supply webfont packets for...

↑ index
specs :: files
All filenames associated with comic strips begin with 'cck':

↑ index