-
Notifications
You must be signed in to change notification settings - Fork 89
Markup
TODO: document markup here
To make comics using cmx.js and cmx.css you'll need to know a bit about html.
html exist of elements and attributes. To learn more about elements and attributes, take a look at w3schools.com
An element looks like this: <scene></scene>. You can put other elements in between the <scene> and the </scene>. And you can put elements in between those elements and so on.
An element can contain one or more attributes. An attribute is a piece of information about the element. For example <scene> can contain x and y attributes. That will look like this: `
These are the elements and attributes used in cmx:
Every comic starts with a <scene>, in the scene you can place your elements.
There are some attributes you can add to the <scene> for example id, height and width
Elements:
<label><drawing><actor>
You can add labels to a scene, this is basically just text in a frame.
Inside the <label> you can put an optional <tspan> element. You can find more about the tspan element somewhere below.
You can draw lines using <drawing>. Inside the drawing you have to put at least two <point> elements. You can add the attributes x and y to set the position of a point. There will drawn a line between the points you make.
An actor is a character in your commic. The actor can be positioned easily by using the editor . Just drag the points to move the character. There will be placed a new attribute pose automatically to your code. This attribute contains a whole lot of numbers for the position data.
The actor attribute can have another attribute: bubble. Every bubble has text and a line. If you want to use enters in your bubble, or more pieces of text but only one line. You'll have to use the tspan attribute. More about that below.
<tspan> is basically used for multiple lines of text, if have two tspan elemts next to each other, it will be displayed as just one line of text, but if you add the x and y attributes to a tspan element, it will be moved. The best way to make use of these attributes is by using em for example
<tspan x="0" y="0em">this is the first line</tspan> <tspan x="0" y="1em">this is the second line</tspan>
Will display:
this is the first line
this is the second line