WebComic

Petite application web qui permet de publier un webcomic dont les pages sont constituées par des images svgs, les fichiers svg servant essentiellement à la pagination et à combiner le dessin et le texte.

Présentation et principe

L'idée est venu de la manière dont David Revoy difffuse les planches de son webcomic Pepper & Carrot quand il s'agit de traduire les textes : des fichiers svg pour écrire le dit texte avec l'image png de la planche en fond. J'ai trouvé cela judicieux et j'ai essayé d'écrire une application web permettant de publier un webcomic organisé de cette manière.

  • Les numéros du webcomic sont placés dans des dossiers numérotés sauf dans le cas d'un numéro unique.
  • Les images png constituant le webcomic sont placées dans un dossier "shots" dans chaque numéro.
  • Les images svgs (les planches) constituant le webcomic sont placées dans un dossier "svgs" dans chaque numéro.

Organisation one-shot

Démonstration

  • Le webcomic est constitué d'un seul numéro.
  • Images (png) et pages (svg) sont placées dans des dossiers dédiés.
  • cover.png
  • thumb.png
  • index.html
  • index.json
Organisation des fichiers
{
    "title": "My webcomic",
    "size": 30
}
index.json
import { webcomic } from './js/WebComic.js';
webcomic().then((instance) => {
    // Do something when it is ready if you need
}).catch((err) => {
    console.warn(err); // display errors
});
Initialisation dans index.html.

Organisation par numéro

Démonstration

  • index.html
Organisation des fichiers
{
    "title": "My webcomic",
    "issues": [
        {
            "title": "Issue 1",
            "size": 20
        },{
            "title": "Issue 2",
            "size": 20
        }
    ]
}
index.json
import { webcomic } from './js/WebComic.js';
webcomic({
    basepath: './issues/'
}).then((instance) => {
    // Do something when it is ready
}).catch((err) => {
    console.warn(err);
});
Initialisation.

Organisation par histoires

  • index.html
Organisation des fichiers par histoires
{
    "title": "My webcomic",
    "stories": [
        {
            "title": "Story One",
            "issues": [
                {
                    "title": "Story One - Issue 1",
                    "size": 20
                },{
                    "title": "Story One - Issue 2",
                    "size": 20
                }                
            ]
        },{
            "title": "Story Two",
            "issues": [
                {
                    "title": "Story Two - Issue 1",
                    "size": 20
                },{
                    "title": "Story Two - Issue 2",
                    "size": 20
                }                
            ]
        }
    ]
}
index.json
import { webcomic } from './js/WebComic.js';
webcomic({
    basepath: './stories/'
}).then((instance) => {
    // Do something when it is ready
}).catch((err) => {
    console.warn(err);
});
Initialisation.

Configuration

A écrire...

Ressources et références

A écrire...

Historique

2019-03-02
  • fix Taille si hauteur insuffisante.
  • add Variables css pour les polices.
2019-02-23
  • fix Gestion des marges.
2019-02-16
  • fix Définition de l'image cornerbox.
  • fix Définition du dossier racine des bédés.
2018-12-20
  • upd première version publiable.
2016-08-31
  • add Première version plus ou moins fonctionnelle.