28172 sujets

CSS et mise en forme, CSS3

CSS ePub Flexbox iPad - marche pas

Bonjour et bonne année (en retard Smiley cligne )

Petite question, je suis en train de préparer un fichier ePub avec Sigil, tout est ok de mon côté, c'est à dire que j'ai utilisé les outils pour vérifier que tout était ok avec le fichier et le code.

J'ai une page où j'ai souhaité utiliser les Flexbox, ça s'affiche très bien avec Sigil mais si je passe ce même fichier sur mon iPad, les Flexbox ne sont pas prises en compte.

J'ai fouillé sur Google, je ne trouve rien si ce n'est d'utiliser Autoprefixer, ce que j'ai fait mais ça ne change rien au résultat.

Avez-vous des idées, pistes, solutions ou autre svp ?
Modérateur
Bonjour,
Les lecteurs epub sont disparates dans les fonctions qu'ils implémentent , (javascript, style,formulaire, ...), c omme nos vieux navigateurs ou nos boites mails.

Pour un soucis de compatibilité maximum il te faudra faire l'impasse sur certaines fonctionnalités et utiliser les alternatives classiques.

Désolé pour toi.

Cdt
Dans ce cas deux questions :

1. Existe-t'il un équivalent de Can I use pour lecteur de ePub ?
2. Comment je peux aligner verticalement des éléments sur une page ?

Merci.
Modérateur
MagicCarpet a écrit :
Dans ce cas deux questions :

1. Existe-t'il un équivalent de Can I use pour lecteur de ePub ?
2. Comment je peux aligner verticalement des éléments sur une page ?

Merci.


1. je n'en ai pas connaissance

2. display:inline-block; + vertical-align est probablement une alternative possible.

Sans exemple concret de ton soucis, difficile d'aller plus loin et de donner une réponse efficace Smiley cligne

cdt
Modérateur
parsimonhi a écrit :
Bonjour,
Il y a quoi dans ton fichier epub actuellement ?
Amicalement,


Nous sommes maintenant deux à te demander un exemple concret ...

A la vue de ton screen shot, inline-block n'est du coup pas adapter, mais il y a aussi display:table & compagnie qui fait partie d'une vielle version de CSS (2) que tu pourrait tester en alternative à flex:

exemple de base :
<?xml version="1.0" encoding="utf-8"?>
<!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">
<head>
  <title></title>
  <style>
html, body {
  height: 100%;
  margin:0;
}

body.table {
  display: table;
  text-align:center;
  width:100%;
}

.table > * {
  display: table-row;
}

.table > main {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
}
</style>
</head>

<body class="table">
  <header>
    <h1>title</h1>
    <p>sous titre</p>
  </header>

  <main>
    <p>Collection</p>
    <p>Version</p>
    <p>Id</p>
  </main>

  <footer>
    <p>Edition</p>
  </footer>
</body>
</html>


Mais , une fois de plus, sans connaitre /voir ton code, impossible de t'aider efficacement, on ne peut que faire des suppositions.

Cdt
Modifié par gcyrillus (19 Feb 2021 - 16:52)
Bonsoir,

Alors désolé de ne pas vous avoir montré mon code, j'ai oublié.

Par contre je ne l'ai plus, du coup je ne peux pas vous le montrer mais globalement j'avais fais quelque chose de simple, c'est à dire uniquement des balises <p> et juste une <div> pour regrouper la version, id et date.

Après le truc c'est que j'utilise Asciidoctor que je transforme en XML et ensuite via Pandoc en ePub. J'avais fais ma première version uniquement avec Sigil mais y'a quelques trucs qui n'allaient pas et l'avantage de cette méthode c'est que je sort un PDF et un ePub en même temps.

Bon, dans tous les cas cette page me pose problème. Après création du fichier ePub je suis passé sous Sigil à nouveau pour utiliser ton code et ton CSS mais ça ne fonctionne pas. Le texte est bien centré, ça c'est ok mais c'est aussi le plus simple.

Par contre ça ne prends pas toute la hauteur de la page et je n'ai donc pas un espace entre chaque "zone". Donc si les tableaux ne fonctionnent pas ni les FlexBox, je ne sais pas comment faire... Pourtant il me semble avoir vu ça sur d'autres fichiers.

Merci pour vos réponses, si vous avez d'autres idées...

EDIT : je ne pense pas que ça fasse une différence mais je suis en HTML5 (ePub 3 donc).

EDIT2 : j'avais laissé une <section> qui fait que le CSS n'était pas appliqué. Par contre là ton code fonctionne sous Sigil mais pas sous l'application Livre (donc iPad)...
Modifié par MagicCarpet (21 Feb 2021 - 20:34)
Modérateur
Je ne dispose pas d'un Ipad pour te conseiller plus loin, de mon coté les quelques lecteurs Epub testé (w10) fonctionnent bien avec le dernier exemple (génerer via Sigil pour coller au plus prés de ta descrption).

En te souhaitant que quelqu'un d'autre dispose de ce lecteur pour tester et vérifier ce qui fonctionne et ce qui ne fonctionne pas.

edit : dernières suggestions pour ta page cover : Utiliser un vrai tableau HTML avec hauteurs,largeurs et vertical-align ,sinon, une image en dernier recours avec une contre page pour les textes Smiley decu

Cdt
Modifié par gcyrillus (22 Feb 2021 - 15:00)
Modérateur
Bonjour/bonsoir.

si le sujet n'est pas mort Smiley smile ..

Tu n'as pas préciser dans quel format ePub tu sauvegarder celui-ci . ePub 2.0 ou ePub 3.0 ?

Cdt
Modérateur
js_html a écrit :
Si, "je suis en HTML5 (ePub 3 donc)."
Il y a déjà répondu, je crois.


ah oui, effectivement, reste a tester la même chose en tableau et format ePub2.0 :
Pour faire court, un fichier test d'une page : http://gcyrillus.free.fr/test.epub2.0.epub
Modifié par gcyrillus (05 Mar 2021 - 22:20)
Sujet clos
Aller à