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 svgs constituant les pages du webcomic sont placées dans un dossier "pages" dans chaque numéro.
  • Les images png affcihées dans chaque page du webcomic sont placées dans un dossier "shots" dans chaque numéro.
  • Par défaut, les pages (svg) affichent l'image (png) portant le même numéro : pages/01.svg affiche l'image shots/01.png, pages/02.svg affiche l'image shots/02.png, etc.

Installation

Il faut copier le dossier webcomic auquel on va adjoindre deux fichiers : la page HTML pour afficher le webcomic (index.html) et un fichier de données (webcomic.json) :

  • index.html
  • webcomic.json

La page HTML est dés plus simple : elle a juste à charger le fichier CSS de WebComic et à lancer sa création.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Webcomic</title>
        <!-- Load webcomic styles -->
        <link rel="stylesheet" href="./webcomic/app/styles.css" type="text/css">
        <!-- Load javascript to make webcomic works on webkit browsers -->
        <script src="./webcomic/thirdparty/custom-elements-polyfill.js"></script>
    </head>
    <body tabindex="1">
        <script type="module">
            // javascript code
        </script>
    </body>
</html>
index.html

La création du WebComic fait appel à l'API de base :

// Importer la fonction de création d'un webcomic
import { comic } from './webcomic/app/webcomic.js';
// Lancer la création du webcomic
comic().then(comicElement => {
    // Quand l'élément html est créé, l'insérer dans le document.
    document.body.appendChild(comicElement);
}).catch(err => {
    // Sinon afficher les erreurs dans la console.
    console.warn(err);
});

Le fichier de données est ce qui portera toutes les informations concernant le webcomic. Pour le moment, nous renseignons uniquement sont titre :

{
    "config": {
        "title": "My Webcomic"
    }
}
Exemple de fichier webcomic.json.

Organisations du contenu

Le contenu d'un webcomic sera toujours organisé de la même manière :

  • Les images png dans un dossier « shots »
  • Les pages svg inlcuant les images dans un dossier « pages »
  • Deux images : cover.png pour servir de couverture au numéro et thumb.png pour servir de vignette. Le nom de ce dernier fichier pourra être configuré.
  • cover.png
  • thumb.png
Organisation d'un contenu

Webcomic essaye ensuite de gérér trois organisations de contenu :

  • Une histoire simple (one-shot)
  • Une série de numéros (issues)
  • Une série d'histoires contenant des numéros (stories)

Organisation one-shot

Démonstration

Le webcomic est constitué d'un seul numéro placé dans un dossier « one-shot » :

  • index.html
  • webcomic.json
Organisation des fichiers
{
    "config": {
        "title": "One-shot webcomic",
        "basepath": "one-shot",
        "size": 6
    }
}

webcomic.json

Organisation par numéro (issues)

Démonstration

  • index.html
  • webcomic.json
Organisation des fichiers
{
    "config": {
        "title": "Multiple issues Webcomic",
        "defaultSize": 6,
        "basepath": "./issues/"
    },
    "issues": [{
        "title": "Issue 1"
    }, {
        "title": "Issue 2"
    }]
}

webcomic.json

Quelques nouveautés ici :

  • Nous avons placer les ressources images dans un répertoire issues, renseignée grâce à la configuration basepath.
  • Les ressources de chaque numéro sont ensuite stockées dans un répértoire avec un nom à trois chiffres (001, 002, 003, etc.). Cette numérotation peut être personnalisée grâce à la configuration numFormat.

Organisation par histoires (stories)

Démonstration : Webcomic organisé par histoires

  • index.html
  • webcomic.json
Organisation des fichiers par histoires
{
    "config": {
        "title": "Webcomic with stories",
        "defaultSize": 6,
        "basepath": "./stories/"
    },
    "stories": [{
        "title": "Story 1",
        "issues": [{
            "title": "Story 1, Issue 1"
        }, {
            "title": "Story 1, Issue 2"
        }]
    }, {
        "title": "Story 2",
        "issues": [{
            "title": "Story 2, Issue 1"
        }, {
            "title": "Story 2, Issue 2"
        }]
    }]
}

webcomic.json

Fonctionnalités

Format des pages

A écrire...

Pile d'images dans un fichier svg

Un fichier svg correspond à une page de l'histoire, un moment de la narration. On souhaite parfois montrer plusieurs vues différentes d'une même scène sans pour autant rajouter des pages puisqu'il s'agit du même moment. Les piles d'images sont là pour permettre cela : empiler plusieurs vues (images) d'une même scène dans un seul fichier svg (page). La navigation entre ces images s'ajoutera à celle des pages.

demo

Ajouter des mots-clés

Vous avez la possibilité de définir une liste de types de mots-clés puis de marquer chaque numéro du webcomic. Les listes seront ensuite affichées dans la page d'accueil et le lecteur pourra filtrer les numéros par mot-clé. Il pourra aussi les classer par importance (occurence d'utilisation).

Dans l'exemple qui suit, nous définissons deux types de mots-clés, « characters » et « places », puis nous marquons chaque numéro en précisant les personnages présents et le lieux de l'action :

{
    "config": {
        "title": "Demo with keywords",
        "defaultSize": 6,
        "basepath": "./issues/",
        "keyword_names": ["characters", "places"]
    },
    "issues": [{
        "title": "Issue 1",
        "characters": ["Batman", "Superman"],
        "places": ["Gotham", "Metropolis"]
    }, {
        "title": "Issue 2",
        "characters": ["Superman", "Wonder Woman"],
        "places": ["Metropolis", "Themyscira"]
    }]
}

Utilisation des mots-clés dans la description d'un numéro.

Démonstration

Configuration

En cours...

Configuration générale

    /**
     * Base du chemin pour récupérer les ressources images. 
     * Répertoire courant par défaut.
     */
    basepath = '';
    
    /**
     * Display close button.
     */
    close_button = true;
    
    /**
     * Texte affiché sur la dernière page d'un numéro s'il n'est pas le dernier.
     */
    continue_label = 'To be continued';
    
    /**
     * Affichage d'une [corner box](https://www.cbr.com/comic-book-corner-box-marvel-dc/)
     * sur les couvertures des numéros. L'image ``cornerbox.png`` doit être placé à la 
     * racine (``basepath``)
     */
    cornerbox = true;

    /**
     * Liste de nom d'images png (sans l'extenion) pouvant servir de cornerBox. 
     * Toutes ces images doivent être placées à la racine (``basepath``).
     * 
     * @type {string[]}
     */
    cornerboxes = [];

    /**
     * Si le défilement entre les images servant dans le cornerbox doit 
     * s'effectuer de manière aléatoire. Si ce n'est pas le cas, le 
     * défilement se fait dans l'ordre de déclaration des images.
     */
    cornerboxes_randomize = false;
    
    /**
     * Nombre de pages par défaut d'un numéro
     */
    default_size = 10;
    
    /**
     * Texte affiché sur la dernière page du dernier numéro.
     */
    end_label = 'End';
    
    /**
     * Identifiant du WebComic. S'il n'est pas fournit; un identifiant 
     * automatique est assigné.
     *
     * @type {string}
     */
    id = null;

    /**
     * Liste des noms de données pouvant servir de mots-clés.
     * 
     * @type {string[]}
     */
    keyword_names = [];

    keywords_thumbnail = false;

    /**
     * Action de la navigation avec la molette de la souris
     */
    wheel_navigation = true;

    /**
     * Activation de la navigation au clavier
     */
    keyboard_navigation = true;

    /**
     * Format de la numérotation des numéros ou des histoires.
     * 
     * Par défaut; la numérotation se fait sur 3 chiffres: "001", "002", etc.
     */
    num_format = 3;

    /**
     * Format de la numérotation des numéros quand le contenu est organisé sous 
     * forme d'histoire.
     * 
     * Par défaut; cette numérotation se fait sur 2 chiffres: "01", "02", etc.
     */
    subnum_format = 2;

    /**
     * Élément HTML qui portera WebComic. Insérer dans le body du document par défaut.
     * 
     * Si la propriété est définit comme chaîne de caractère; ce doit être
     * l'identifiant d'un élément présent dans la page.
     * 
     * @type {string | HTMLElement}
     */
    parent = null;

    /**
     * Webcomic page ratio
     */
    ratio = 16/9;

    /**
     * Date du début de publication du WebComic.
     * 
     * La propriété est utile uniquement pour générer automatiquement des dates 
     * de publication pour chaque numéro;en association avec la propriété 'period'.
     * 
     * Si une chaîne de caractère est fournit; elle doit être au format ISO8601
     * (ex: "2021-05-29")
     * 
     * @type {string | Date}
     */
    start_date = null;

    /**
     * Rythme de publication des numéros.
     * 
     * La propriété n'est utile que si les numéros n'ont pas de date et que la
     * propriété 'start_date' est définie. Les valeurs possibles sont :
     * 'daily', 'weekly', 'biweekly', 'monthly', 'bimonthly'.
     */
    period = 'weekly';

    /**
     * Optional size (single issues)
     */
    size = 10;

    /**
     * Nom de l'image servant de miniature pour un numéro.
     */
    thumbname = 'thumb.png';

    /**
     * Titre du webcomic; affiché sur la couverture de chaque numéro.
     * 
     * Il est facultatif comme toutes les autres propriétés mais il serait 
     * évidemment maladroit de ne pas le définir.
     */
    title = 'Webcomic';

Configuration d'un numéro (issue)

id

  • Type : String
  • Identifiant du numéro.
  • S'il n'est pas fournit, le numéro est utilisé comme identifiant.

size = config.defaultSize

  • Type : String
  • Nombre de pages dans le numéro.
  • S'il n'est pas renseigné, la taille par défaut config.defaultSize est prise.

title

  • Type : String
  • Titre du numéro.

Configuration d'une histoire (Story)

A écrire...

Autres manières de charger les données

Le fichier de données webcomic.json est le fichier par défaut. Il est cependant possible de charger un fichier avec un autre nom si nécessaire :

import { comic } from './webcomic/app/webcomic.js';
comic('myWebComicDataFile.json').then(comicElement => {
    document.body.appendChild(comicElement);
}).catch(err => {
    console.warn(err);
});

De même, on peut charger directement les données sans avoir à passer par un fichier :

import { comic } from './webcomic/app/webcomic.js';
comic({
    config: {
        title: 'My WebComic'
    }
}).then(comicElement => {
    document.body.appendChild(comicElement);
}).catch(err => {
    console.warn(err);
});

Autres manières de déclarer numéros et histoires

A écrire...

HowTo

Créer un lien vers une page donnée

#<issue.id>_<page>

Ressources et références

A écrire...

Licence

WebComic

Copyright (C) 2021 Rui Nibau

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.

Historique

2022-06-01
  • upd: Changing navigation
  • upd: add rnb dependencies
2021-09-05
  • upd: gestion de la cornerbox (cornerBoxes, cornerBoxesRandomize)
  • upd: mots-clés sur la page de couverture.
  • add: localisation.
  • add: script pour lancer en tant qu'application GTK.
2021-05-30
  • upd: Passage en beta.
  • upd: Organisation générale.
  • add: Meilleure gestion des mots-clés.
2020-11-28
  • add: Possibilité de naviguer dans une pile d'images dans le fichier svg.
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.