Texte essentiel affiché en plus ou moins gros caractères.
Commentaire secondaire affiché plus petit. Si le commentaire est trop long, celui-ci passe sur 2 lignes (difficiles à rapprocher l'une de l'autre).
L'essentiel
est inscrit dans
la première partie
de la diapo.
Un commentaire s'affiche en plus petit, surligné !
Là, on utilise une carte (w3-card-4)... avec une ombre portée autour de la carte ;-)
Ici, la carte est colorisée en utilisant les classes du thème chromatique w3.css.
court
= gros !
Texte long = petit corps = grosse carte ?
Cela semble être une combinaison de plusieurs paramètres...
La carte s'adapte au texte dont la taille s'adapte à longueur des phrases.
Bref, c'est un système adaptatif... et l'usage de cartes reste facultatif !
Voyons maintenant
la séparation en
2 ou 3 zones de saisie dans une même diapositive.
Il s'agit de tester le dispositif pour en saisir les limites...
J'utilise les systèmes Flexbox et CSS Grid implémentés dans big.css (avec quelques adaptations).
Je vais commencer par tester l'affichage de 2 zones...
Zone A (gauche) 3 lignes
Zone B (droite) texte avec class="medium" (font-size: 65%)
Zone A (gauche) avec class="flex-start"
Zone B (droite) texte avec class="medium" (font-size: 65%) ... Si le texte est trop long, il augmente la hauteur de la diapositive et il est nécessaire de scroller pour pouvoir lire tout le texte !
Zone A (gauche)
Zone B (droite) texte avec class="small thin" (font-size: 35%; font-weight: 100) ... Cette fois-ci le texte ne passe pas sous la zone de flotaison.
Cependant, le texte de la zone gauche est trop près du bord droit du cadre de présentation !
Zone A (gauche)
En attribuant une classe personnalisée "padding-right" au paragraphe de la zone de gauche, je règle le problème repéré plus haut.
C'est beaucoup mieux ainsi, n'est-ce-pas ?
Voyons maintenant comment afficher du texte dans 3 zones sur une diapositive.
Là aussi, je vous fais part de mes expérimentations au fur et à mesure...
J'ai modifié, en tête de la "div" de cette diapositive, les valeurs de la grille utilisée par Big
Je teste les valeurs 30% et 70% (et non plus les valeurs 50% et 50%)
En créant deux paragraphes dans la seconde zone, j'ai la surprise de les voir s'afficher côte à côte !
Voilà une fonctionnalité à exploiter !
Intitulé de diapositive (pas trop court !)
Un texte
trop court inséré à gauche modifie la mise en page !
La longueur du texte de la zone de droite détermine la largeur de la zone du milieu ! Ici, la classe “w3-small” de W3CSS a été utilisée pour déterminer le corps du texte. Ce texte pourrait être une note s’il n'était pas si petit ! Cette question de corps des notes devrait pouvoir se solutionner avec des CSS personnalisées...
Voici un intitulé de diapositive plus long.
Je suis contraint de limiter la longueur des textes de la diapo, sinon celle-ci s'allonge ! Cependant, en prenant quelques précautions, la hiérarchisation des infos présentées est très claire... Ceci est le paragraphe principal.
Ceci est une note marginale désormais lisible. Le padding droit de l'intitulé a été doté de la propriété "!important" (classe "padding-right") et cette note (zone de droite) bénéficie d'une classe personnalisée pour la taille de son texte.
Utilisation pratique de Big et de w3.css
Les tests précédents
ouvrent des perspectives
de présentation plutôt intéressantes.
Il va falloir cependant
faire très attention
à ne pas s'emmêler les pinceaux dans les classes utilisées !
Et si on inventoriait les classes w3.css utilisables ?
Finalement, Big et w3.css se combinent assez bien, si on admet le comportement adaptatif des textes stylisés par défaut.
La feuille de style w3.css dispose aussi de plusieurs instructions potentiellement utiles pour créer des “slidedocs” ou des présentation visuelles.
Expérimentez à votre tour ;-)
Réalisation : Yves Goguely