epub et javascript

[zelda_pinwheel]

spéciale dédicace Spinxel, suite à son commentaire ci-dessous :

Originally Posted by Spinxel

Je préfèrerais le déclenchement de petits pop-up (type span en html) en cliquant sur les appels de notes dans le texte.

Savez-vous comment faire cela ?

Merci par avance !

Spinxel, tu vas être trop content. regarde donc ce que je viens de trouver :

http://blog.threepress.org/2010/06/2...ity-in-ibooks/

(article en anglais, et en javascript )

en gros, avec un peu de javascript, tu pourras faire exactement ce que tu as décrit (et sans doute autre chose encore).

attention, ces scripts ne sont pas forcément supportés par tous les moteurs de rendu et notamment ADE ne semble pas les gérer ; leur utilisation restera donc pour l'instant plutôt théorique. ça marche sur l'iPad (avec iBooks) et tu pourras le tester avec Ibis reader.

et avec l'évolution de moteurs de rendu les possibilités se démultiplieront.

merci threepress, merci liza !

[NicolasR]

Je suis très circonspect par rapport à toutes ces soit-disant innovations dans les ePub… Je pense qu’on est en train de revivre les batailles de navigateurs qui ont totalement fragmenté et handicapé le web dans les années 90 : chaque éditeur y va de ses balises et de ses améliorations personnelles, et finalement, on aura des epub qui seront plus compatibles avec certaines liseuses ou programmes.
Je pense que même si le standard ePub évolue lentement, il faut le respecter et s’y tenir, sinon ça va être très vite devenir problématique.
Écrire un livre qui ne marcherait que pour l’iPad serait une débilité sans nom.
ePub évolue lentement, OK. Mais je pense qu’il vaut mieux botter le cul de l’IPDF pour qu’il se réveille un peu, plutôt que de faire le jeu de marques qui ne souhaitent qu’une chose : nous enfermer.
Ne répétons pas les erreurs du web des années 90.

[zelda_pinwheel]

Originally Posted by NicolasR

Je suis très circonspect par rapport à toutes ces soit-disant innovations dans les ePub… Je pense qu’on est en train de revivre les batailles de navigateurs qui ont totalement fragmenté et handicapé le web dans les années 90 : chaque éditeur y va de ses balises et de ses améliorations personnelles, et finalement, on aura des epub qui seront plus compatibles avec certaines liseuses ou programmes.
Je pense que même si le standard ePub évolue lentement, il faut le respecter et s’y tenir, sinon ça va être très vite devenir problématique.
Écrire un livre qui ne marcherait que pour l’iPad serait une débilité sans nom.
ePub évolue lentement, OK. Mais je pense qu’il vaut mieux botter le cul de l’IPDF pour qu’il se réveille un peu, plutôt que de faire le jeu de marques qui ne souhaitent qu’une chose : nous enfermer.
Ne répétons pas les erreurs du web des années 90.

je suis d'accord avec toi à 100% en ce qui concerne le respect des standards et le rejet de balises "personnelles", et à 200% en ce qui concerne la création de livres epub uniquement compatibles avec l'ipad. et j'avoue aussi que j'ai tendance à croire que pour la grande majorité des cas, quasi tous les cas en fait, il vaut mieux tendre vers une simplification / épuration de son code, histoire qu'il soit compatible avec la plus large gamme de devices possibles (pas seulement des liseuses mais aussi des smartphones, par exemple).

d'un autre côté, je suis pour l'expérimentation avec le code dans une démarche d"'art pour l'art", et je suis intéressée de savoir jusqu'où on pourra pousser le format.

il faut savoir que Liza Daly, qui a écrit le code et l'article, fait partie de l'idpf et participe activement à la définition du standard ; du coup j'ai tendance à lui faire confiance pour ce qui est de le respecter aussi (et d'ailleurs elle précise que son epub est validé).

maintenant, c'est clair que ce genre de code ne marchera pas sur une liseuse e-ink, car le javascript n'est pas supporté. ça ne marche apparemment pas dans ADE sur pc non plus, mais franchement vu que ça marche dans Ibis Reader j'aurais tendance à mettre ça sur le compte d'une implémentation incomplète de la part d'Adobe (ça ne serait pas le premier exemple du genre...).

concrètement, comme j'ai dit, je suis à fond pour pousser les limites du format juste pour voir ce qu'on peut faire, dans le cadre d'une expérimentation...

MAIS.

après, il faut tenir compte de son public aussi ; si l'on souhaite publier un livre commercial, il vaut mieux qu'il soit compatible avec le plus grand nombre de liseuses possibles, ce qui signifie d'une part un respect strict du standard, et d'autre part, si l'on souhaite tester des fonctionnalités plus spécifiques, de le faire en sorte qu'il y aura toujours une alternative qui sera accessible à tout le monde.

et enfin... ici en l'occurrence, je crois que ça serait plutôt les fesses d'Adobe qu'il faudrait botter, pour qu'ils nous sortent enfin un moteur de rendu un peu plus performant et complet.

[NicolasR]

Oui et non... je pense pas qu'on puisse dire que si ça marche dans Ibis Reader, c'est que ADE est en retard.
Ibis Reader, c'est pas un programme en tant que tel, c'est une page dans un navigateur web. A ce titre, on peut y mettre ce qu'on veut, ça marchera toujours, même du Java, des anim' Flash, des iframes, tout ce qu'on veut, ça marchera toujours... Le statut de Ibis Reader est donc un peu bâtard, et on peut pas, à mon avis, le prendre pour référence de ce qu'on peut faire ou pas.
Ou alors, on est dans le même cas qu'Apple : Liza qui cherche à pousser son service et à créer des livres qui marcheront chez elle et que chez elle.
Quitte à choisir un rendu de référence, je préfèrerai qu'on s'en tienne au Adobe Reader Mobile, celui qu'on trouve dans les liseuses, qui me semble plus répandu et plus agnostique.

[zelda_pinwheel]

tu soulèves des questions pertinentes, nicolas. c'est vrai que j'ai tendance à faire facilement confiance à Liza vu sa situation, mais elle peut aussi avoir des idées derrière la tête... à sa décharge, je pense qu'il est plus probable qu'elle cherche à faire avancer l'idpf sur les points précis qui lui tiennent à coeur, que de créer des bouquins qui ne marcheraient que chez elle.

tu as raison qu'au jour d'aujourd'hui, si l'on veut faire des ebooks à destination commerciale / publique, il vaut certes mieux s'en tenir au standard dans son implémentation la plus courante, à savoir celle d'Adobe. (mais quand même on peut pas nier qu'Adobe n'est pas toujours ultra-réactif, vu que par exemple ils ne supportaient même pas le texte justifié dans leur première implémentation... ).

[alexvallette]

Originally Posted by zelda_pinwheel

c'est clair que ce genre de code ne marchera pas sur une liseuse e-ink, car le javascript n'est pas supporté. ça ne marche apparemment pas dans ADE sur pc non plus, mais franchement vu que ça marche dans Ibis Reader j'aurais tendance à mettre ça sur le compte d'une implémentation incomplète de la part d'Adobe (ça ne serait pas le premier exemple du genre...).

Est ce que cela a encore un sens de se demander ce que cela va rendre sur des readers e-ink?

Je crois que non, je pense que l'arrivée de l'iPad préfigure ce que vont être les futurs readers => couleurs / connecté / interactif.

Comme toi Zelda, je suis très pro Liza, ce qu'elle imagine est vraiment très novateur et est révélateur de l'envie des lecteurs.

HTML5 est justement, je crois, le gage que les ePubs tels qu'elle les décrit seront transportables de reader en reader.

[NicolasR]

Je pense que pour la lecture, l'iPad est parfait pour les lecteurs... qui ne lisent pas.
L'avenir nous le dira, mais les lecteurs à encre électronique n'ont pas dit leur dernier mot, je pense.

[alexvallette]

A voir...

Je suis d'accord avec toi. Un roman, où aucun extra n'est réellement nécessaire, n'a aucun intérêt sur iPad.
Mais si on parle d'un essai avec des graphiques, d'un bouquin de cours, d'un livre pour enfants, je crois que l'iPad (ou autre tablette couleur) sera imbattable.

J'ai converti des milliers d'ouvrages de PDF vers ePub et le résultat de la seconde catégorie est quand même assez pauvre sur un Kindle ou sur un Sony.

[jmaster]

MMHH not understood anything, can someone use english pleeeaaaaaaseeee.....

[TheGreatGig]

Bonjour,

J'ai essayé de trouver une solution au « problème » des notes de bas de page en m'inspirant du billet de Liza.

Le script fonctionne ainsi :

• Un clic sur un appel de note crée un clone de la note sous forme de popup centrée sur la page
• Le popup est effacé par un double clic
• La liste des notes reste affichée de manière repliée à la fin de la page
• Si Javascript ou la fonction Translate n'est pas prise en charge, l'appel de note renvoie vers la note en fin de page

Le tout se décompose comme ça :

• Le lien d'appel à la note, de classe "anchor", avec un href pointant vers la note, et avec un id spécifique.
  Ex: <a class="anchor" href="#ftn2" id="bodyftn2">2</a>
• La note/popup est comprise dans un div de classe "endnote", avec le même id que l'appel de note auquel est rajouté "-popup"
  Ex: <div class="endnote" id="bodyftn2-popup">insérez note ici</div>
• À l'intérieur de ce div, un lien href pointant vers l'appel de note, avec pour id celui appelé par l'appel, permet de remonter à l'endroit de l'appel de note
  Ex: <a href="#bodyftn2" id="ftn2">2</a>
• Un lien de classe "switchbutton" juste avant les notes de bas de page pour les déplier/replier
  Ex: <a class="switchbutton">Notes</a>

Code Javascript :

function ftn_popup() {
	/* clone the footnote and append it to the document */
	var p = document.getElementById(this.id + '-popup').cloneNode(true);
	document.getElementById(this.id + '-popup').parentNode.appendChild(p);

	/* show the popup and change its style */
	p.style.display = 'block';
	p.className = 'popup';
	ftn_refresh ();

	// prevent displaying the popup more than once
	this.removeEventListener('click', ftn_popup, true);
	// connect the dismiss functionto the popup
	p.addEventListener('dblclick', ftn_dismiss, true); 
}

function ftn_dismiss() {
	// remove the cloned footnote (the popup)
	document.getElementById(this.id).parentNode.removeChild(this);
	ftn_refresh ();

	// reconnect the popup function ftn_to the footnote anchor
	var anchorid = this.id.replace("-popup", "");
	var a = document.getElementById(anchorid);
	a.addEventListener('click', ftn_popup, true);
}

/* Fold/unfold function */
function ftn_display(toggle) {
	var p = document.getElementsByClassName('endnote');
	for (var i=0; i < p.length; i++) {
		if (toggle == "show") {
			p[i].style.display = 'block'; // display the endnote
		}
		else if (toggle == "hide") {
			p[i].style.display = 'none'; //hide the endnote
		}
	}
	ftn_refresh ();
}

/* translate the popups to their correct place */
function ftn_refresh () {
	var p = document.getElementsByClassName('popup');
	for (var i=0; i < p.length; i++) {
		// to what anchor the popup is attached
		var anchorid = p[i].id.replace("-popup", "");
		var a = document.getElementById(anchorid);
		var top_of_anchor = a.offsetTop;

		// (x,y) translation)
		var new_x = (document.body.clientWidth - p[i].offsetWidth) / 2;
		var new_y = p[i].offsetTop - top_of_anchor + 40;
		var property = getTransformProperty(p[i]);
		p[i].style[property] = 'translateY(-' + new_y + 'px) translateX(+' + new_x + 'px)';
	}
}

/* check the current state of the endnotes */
function ftn_checking () {
	var p = document.getElementsByClassName('endnote');
	for (var i=0; i < p.length; i++) {
		if (p[i].style.display == 'block') {
			return "hide"; // endnotes are unfolded, hiding them
		}
	}
	return "show"; // endnotes are folded, showing them
}

/* Fold/unfold button */
function ftn_switching () {
	toggle = ftn_checking();
	ftn_display(toggle);
}

/* browser frakkin compatibility */
function getTransformProperty (element) {
		var properties = [
			'transform',
			'WebkitTransform',
			'MozTransform',
			'OTransform'
		];
		var p;
		while (p = properties.shift()) {
				if (typeof element.style[p] != 'undefined') {
						return p;
				}
		}
		return false;
}

/* init */
function ftn_init () {
	var ftn_anchors = document.getElementsByClassName('anchor');
	// if no transform is available, just allow Endnotes folding/unfolding
	if (getTransformProperty(ftn_anchors[0]) != false) {

		/* Connect the anchors buttons */
		for (var i=0; i < ftn_anchors.length; i++) {
			ftn_anchors[i].removeAttribute("href"); // remove the original link to the endnote
			ftn_anchors[i].addEventListener('click', ftn_popup, true);
		}

		/* Hide endnotes on load */
		ftn_display('hide')
	}
}

// Connect the switchbutton to fold/unfold the endnotes
var ftn_switchbutton = document.getElementsByClassName('switchbutton');
for (var i=0; i < ftn_switchbutton.length; i++) {
	ftn_switchbutton[i].addEventListener('click', ftn_switching, true);
}

// init the script on document load
window.addEventListener("load", ftn_init, false);
window.addEventListener("resize", ftn_refresh, false);

Le CSS doit comporter les éléments suivants (à l'aspect modifiable) :

a.switchbutton {
	font-size: 145%;
	font-variant: small-caps;
	text-align: left;
	color: #075698;
	text-decoration: none;
    border-bottom: 1px dotted #075698;
}

a {
	color: #075698;
	text-decoration: none;
    border-bottom: 1px dotted #075698;
}

.endnote {
    display: block;
    color: inherit;
	background:transparent;
	border: 0px;
    -moz-border-radius: 0px;
	-webkit-border-radius:00px;
	border-radius: 0px;
	padding: 0px 15px 0px 15px;
	text-align: justified;
}

.popup {
	/* don't change display: */
	width: 85%;
	color: white;
	background: #075698; /* default background for browsers without gradient support */
	
	/* css3 */
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	/* NOTE: webkit gradient implementation is not as per spec */
	background:-webkit-gradient(linear, left top, left bottom, from(#2e88c4), to(#075698));
	background:-moz-linear-gradient(top, #2e88c4, #075698);
	background:-o-linear-gradient(top, #2e88c4, #075698);
	background:linear-gradient(top, #2e88c4, #075698);
	padding: 5px 15px 5px 15px;
	text-align: justified;
}

.popup a {
	color: white;
	text-decoration: none;
    border-bottom: 1px dotted white;

Un exemple de XHTML pour montrer où utiliser les classes et id :

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" xmlns:xml="http://www.w3.org/XML/1998/namespace">
<head>
  <link href="../Styles/style.css" media="all" rel="stylesheet" type="text/css" />

  <title>Mises - L’action humaine</title>
  <style type="text/css">
/*<![CDATA[*/
  #content h2:before {content: ""}
  /*]]>*/
  </style>
</head>

<body>
  <h2 id="toc0"><a id="ch00sec00"></a>Introduction</h2>

  <h3 id="toc1"><a id="ch00sec01"></a>Économie et praxéologie</h3>

  <p>Pendant longtemps, on ne s’est pas avisé du fait que le passage de la théorie classique de la valeur à la théorie subjectiviste de la valeur faisait bien davantage que de substituer une théorie plus satisfaisante de l’échange sur le marché, à une théorie qui était moins satisfaisante. La théorie générale du choix et de la préférence va loin au-delà de l’horizon qui cernait le champ des problèmes économiques, tel que l’avaient délimité les économistes depuis Cantillon, Hume et Adam Smith jusqu’à John Stuart Mill. C’est bien davantage qu’une simple théorie du «&nbsp;côté économique&nbsp;» des initiatives de l’homme, de ses efforts pour se procurer des choses utiles et accroître son bien-être matériel. C’est la science de tous les genres de l’agir humain. L’acte de choisir détermine toutes les décisions de l’homme. Et faisant son choix l’homme n’opte pas seulement pour les divers objets et services matériels. Toutes les valeurs humaines s’offrent à son option. Toutes les fins et tous les moyens, les considérations tant matérielles que morales, le sublime et le vulgaire, le noble et l’ignoble, sont rangés en une série unique et soumis à une décision qui prend telle chose et en écarte telle autre. Rien de ce que les hommes souhaitent obtenir ou éviter ne reste en dehors de cet arrangement en une seule gamme de gradation et de préférence. La théorie moderne de la valeur recule l’horizon scientifique et élargit le champ des études économiques. Ainsi émerge de l’économie politique de l’école classique une théorie générale de l’agir humain, la <em>praxéologie</em><a class="anchor" href="#ftn1" id="bodyftn1">1</a>. Les problèmes économiques ou catallactiques <a class="anchor" href="#ftn2" id="bodyftn2">2</a> sont enracinées dans une science plus générale et ne peuvent plus, désormais, être coupés de cette connexité. Nulle étude de problèmes proprement économiques ne peut se dispenser de partir d’actes de choix&nbsp;; l’économie devient une partie —&nbsp;encore la mieux élaborée jusqu’à présent&nbsp;— d’une science plus universelle, la praxéologie.</p>

  <h3 id="toc2"><a id="ch00sec02"></a>Le problème épistémologique d’une théorie de l’agir humain</h3>

  <p>Dans la nouvelle science, tout paraissait faire problème. C’était une étrangère dans le système traditionnel des connaissances&nbsp;; les gens étaient perplexes, ne sachant comment la classer et lui assigner son domaine propre. Mais d’autre part, ils étaient convaincus que l’introduction de l’économie dans le catalogue du savoir n’appelait pas un réarrangement ou un élargissement du schéma général. Ils considéraient leur catalogue systématique comme complet. Si l’économie ne s’y insérait pas commodément, la faute ne pouvait en être imputée qu’à un traitement inadéquat appliqué par les économistes à leurs problèmes.</p>  <h3 id="toc4"><a id="ch00sec04"></a>Résumé</h3>

  <p>Il fallait formuler ces remarques préliminaires afin d’expliquer pourquoi ce traité place les problèmes économiques à l’intérieur du cadre général d’une théorie générale de l’activité humaine. Au stade actuel, tant de la pensée économique que des discussions politiques concernant les problèmes fondamentaux d’organisation sociale, il n’est plus possible d’isoler l’étude des problèmes proprement catallactiques. Ces problèmes-là ne sont qu’un compartiment d’une science générale de l’agir humain, et doivent être traités comme tels.</p>

  <p><a class="switchbutton">Notes</a></p>

  <div class="endnote" id="bodyftn1-popup">
    <p class="Footnote"><a class="FootnoteSymbol" href="#bodyftn1" id="ftn1">1</a>Le terme <em>praxéologie</em> a été employé pour la première fois par Espinas en 1890. Voir son article «&nbsp;Les origines de la technologie&nbsp;», <em>Revue philosophique</em>, xv<sup>e</sup>&nbsp;année, xxx, 114–115, et son livre publié à Paris, en 1897, avec le même titre.</p>
  </div>

  <div class="endnote" id="bodyftn2-popup">
    <p class="Footnote"><a class="FootnoteSymbol" href="#bodyftn2" id="ftn2">2</a>Le terme <em>Catallactics or the Science of Exchanges</em> fut employé en premier lieu par Whately. Voir son livre <em>Introductory Lectures on Political Economy</em>, Londres, 1831, p.&nbsp;6.</p>
  </div><script src="../Misc/popup.js" type="text/javascript">
</script>
</body>
</html>

Théoriquement ça marche avec toutes les liseuses basées sur Webkit, Firefox3.5+ et Opera. J'ai testé dans la Visionneuse de Calibre. Avec FBReader on a un affichage de type "notes de fin".

(inb4 c'est aux liseuses de se débrouiller pour afficher les notes.)