1 message de forum 'taille police de caractères'

Bonjour Sur ton site, je vois un fichier /squelettes/styles/general.css qui
est une copie (...) |

**Escal V3**

Message posté par Jean Christophe Villeneuve
<jean-chris.villeneuve@ac-lyon.fr> à la suite de l’article
« Habillage ».
* * *

## taille police de caractères

Bonjour

Sur ton site, je vois un fichier /squelettes/styles/general.css qui est une
copie modifiée du fichier original.

Il faut jamais procéder ainsi !
En effet, ce fichier prend la main sur le fichier d’origine, ce qui a
pour conséquence que si je modifie ce fichier dans Escal, tu ne
bénéficies pas des modifications. De plus, si tu ne commentes pas
précisément les changements que tu fais, tu ne sais plus où tu en es.
Là, en l’occurrence, je vois qu’il manque

    1. html
        
        &#123;

    2. font-size

        :

        62.5%

        ;

        /* 1rem = 10px */

    3. &#125;

Télécharger
(http://escal.ac-lyon.fr/spip/local/cache-code/cd510ffaad7c80e6fba4d0b08fadcbce.txt)

d’où les problèmes de taille de caractères que tu rencontres.

Le seul fichier css à utiliser est squelettes/styles/perso.css, comme tu
l’as déjà fait pour changer les couleurs de ligne des tableaux.

Je ne saurais que trop te conseiller de renommer le fichier
/squelettes/styles/general.css en generalOLD.css par exemple pour retrouver
un affichage normal. Et si tu sais retrouver les modifications que tu avais
faites dans ce fichier, les reporter dans perso.css

* * *

### Modération

Ne répondez pas à ce mail mais sur le forum à l’adresse suivante :
http://escal.ac-lyon.fr/spip/spip.php?article169#forum6825

**Lien(s) contenu(s) dans le texte du message :**
local/cache-code/cd510ffaad7c80e6fba4d0b08fadcbce.txt

— Envoyé par Escal V3 (http://escal.ac-lyon.fr/spip/)

Bonjour,

Il y a les nettoyages printaniers, en ce moment ce sont les estivades avec Escal : je nettoie le nid avant son cinquième anniversaire sous Escal.
J’ai besoin de vos regards et suggestions, à force de tourner en rond dans les réglages CSS pour afficher correctement sur petits et grands écrans les pages ESCAL en augmentant la taille des caractères.

J’essaye de changer et adapter aux doigts et à l’œil la dimension des polices de caractères, dans « perso.css » en testant d’abord avec l’outil inspecteur - developpement web de firefox.

En test j’obtiens correctement l’affichage souhaité.
c’est à dire par exemple les titres en dimensions « 1.8rem » et et le début du descriptif un petit peu plus petit en « 1.5rem » affichés dans l’onglet « VISITER » de la une ou dans la** liste des articles en une****.**

.titre-articles-rubrique {
font-size: 1.8rem;
font-weight: 700;
}
et dans la réalité, même après vidage des caches, le titre s’affiche à « font-size: 1.2rem; » et le début du descriptif se met à font-size: 1.7rem; Voir copies écran plus bas.

Modifications avec le début du descriptif en « 1.5rem »

.introduction-articles-rubrique {
font-size: 1.5rem;
margin-top: 15px;
margin-bottom: 1px;
margin-left: 25 px;

}

Dans l’affichage produit avec « perso.css » , en fait le descriptif apparaît plus gros que le titre !
L’effet est inversé comme vu dans les images copies écran. comme si le fichier « perso.css » n’intervenait pas !
Une cascade qui se mélange les sources avec tous ces orages ?
A quel endroit aurais-je une erreur ?

Exemples des affichages erronés d’une liste d’articles en une sur un écran 360 x 640

lkonpcgaebicjlhb.png

Merci de vos idées et solutions .

Hello

Déjà, les commentaires en css c’est
/* commentaires */
et pas
/ commentaires /
ou encore moins

(ça c'est pour le html !)

ohnnbmkmhmgihdoi.png

lkonpcgaebicjlhb.png

hello

ce que je peu dire c’est que perso.css est appelé en dernier

tu n’a qu’n fichier css sur lequel tu porte tes modifs ?

car il faut savoir que

Si vous utilisez plusieurs feuilles de style, notez que l’ordre dans lequel celles-ci sont appelées dans l’entête de la page a une importance. Si vous appelez d’abord mes_styles.css et ensuite spip_style.css : ce sont les styles de cette dernière, plus proches, qui s’appliqueront prioritairement aux votres. Pensez donc à faire l’inverse :

<link rel="stylesheet" type="text/css" href="#CHEMIN{spip_style.css}">
<link rel="stylesheet" type="text/css" href="#CHEMIN{mes_styles.css}">

ensuite c’est plutôt F5 que le cache

La gestion du cache

Le fait que les styles soient définis dans un fichier séparé a une conséquence importante. En effet, ce fichier, au contraire de vos squelettes n’est pas géré par SPIP (il n’en a pas besoin !). Cela signifie que si vous modifiez une feuille de style, vous n’avez pas besoin de vider le cache de SPIP : il suffit de recharger la page dans votre navigateur. Cela rend le réglage de la mise en page encore plus aisé.

Rappelons tout de même que votre feuille de style doit être déclarée dans vos fichiers HTML, et que ceux-ci doivent être recalculés une première fois pour que cette déclaration soit prise en compte.

et pour info

La méthode         Daisy appliquée à SPIP

Tu pourrais enlever la compression des css que j’y voie plus clair ?

ohnnbmkmhmgihdoi.png

lkonpcgaebicjlhb.png

Ah ben tout de suite, ça va mieux non ?

ohnnbmkmhmgihdoi.png

lkonpcgaebicjlhb.png

Je commence à comprendre,

La compression CSS vient d’être enlevée.

ohnnbmkmhmgihdoi.png

lkonpcgaebicjlhb.png

Oui, c’est bien amélioré !
J’essaye de comprendre ce qui a été fait
Pour affiner d’autres endroits, et je vérifie sur smartphone.

ohnnbmkmhmgihdoi.png

lkonpcgaebicjlhb.png

Bonsoir,

Vision smartphone:
La bande de numéros pour naviguer entre les articles de rubriques dans l’onglet dépasse de sa zone, et de ce fait force un affichage rétréci.
Ceci est visible sur un écran réel de smartphone 480 x 854 , mais ne se vérifie pas sur les vues adaptatives des outils de firefox
@+

ohnnbmkmhmgihdoi.png

lkonpcgaebicjlhb.png

Ouch, ça va être plus chaud à régler ça !

20170711_185953_rmscr.jpg

ohnnbmkmhmgihdoi.png

lkonpcgaebicjlhb.png

Bon je viens de livrer des correctifs pour les paginations sur mobiles

Teste et dis-moi.

20170711_185953_rmscr.jpg

ohnnbmkmhmgihdoi.png

lkonpcgaebicjlhb.png

Cela semble un probleme réglé quand je met des onglets dans un article,
j’ai ajouté un réglage qui justifie les onglets sur la largeur du conteneur.
Je vais voir dans « ONGLETS SPIP »

20170711_185953_rmscr.jpg

ohnnbmkmhmgihdoi.png

lkonpcgaebicjlhb.png

Pour le plugin « https://contrib.spip.net/En-onglets-dans-le-texte-de-SPIP-ou-ailleurs »
Il y a un tableau CSS que j’ai ajouté pour rendre variable la ligne d’onglets : Il y a probablement à regarder pour s’en inspirer ?

20170711_185953_rmscr.jpg

ohnnbmkmhmgihdoi.png

lkonpcgaebicjlhb.png

Le problème apparaît encore, et maintenant il se produit avec l’affichage adaptatif sur firefox
Deux sortes de copies écran

La barre des chiffres dépasse toujours du containeur. ce qui fait que les 60, 70, 80, n’apparaissent pas.
Je dois peut-etre organiser différemment le rangement pour trouver tel ou tel article.
Car après 50, je doute que les visiteurs vont tout voir …

pghgkhfhnijhhaco.png

idfpdkihagcnnnbn.png

20170711_185953_rmscr.jpg

ohnnbmkmhmgihdoi.png

lkonpcgaebicjlhb.png

C’est la 3.87.20 qui apporte une modif
Tu es encore en 3.87.19
Patience !

pghgkhfhnijhhaco.png

idfpdkihagcnnnbn.png

20170711_185953_rmscr.jpg

ohnnbmkmhmgihdoi.png

lkonpcgaebicjlhb.png

Le 11/07/2017 à 15:39, JASEUR BOREAL a écrit :

Bonjour,

Bonjour,
As-tu été fouiner du coté des vw, ça dépanne pas mal en ces temps de web-responsivité :
J'ai piqué certaines idées du coté de créative juice

Bonne journée,
Yves

Super merci Yves pour l’info , on continue les améliorations sur « perso.css »

"Une taille de police en fonction de la largeur d’écran"C’est vrai que selon l’écran et sa taille, l’effet visuel d’une police varie énormément.

Le problème des titres contenant des mots relativement longs est très visuel , exemple avec « ethnographique » qui ne peut être tronqué ci dessous, du coup il fait disparaitre la fin de la phrase. Cela oblige à choisir des mots plus courts, des titres « mesurés »

La question se pose d’utiliser une police "condensée" pour écrans de smartphone et une police normale pour écrans plus large, tout en ayant besoin de caractères contrastés lisibles sur petits écrans.
Avec des dimensions de caracteres différentes selon le type d’affichage … Tout cela pour rendre VISIBLE & LISIBLE !

Dans leurs manière de faire, l l’exemple des médias nationaux qui ont créé des applications spécifiques (p**our smartphones android ou apple) est plein d’enseignements : http://www.liberation.fr/
L’appli android du Monde.fr http://www.lemonde.fr/ est excellente pour ses facilités de navigation avec le doigt sur un petit écran. Il y a plein d’idées à observer et récupérer concernant :

  • l’affichage des menus,
  • le choix des polices
  • la dimension des polices
  • les aplats contrastés de couleurs
  • la manière dont on glisse d’une rubrique à une autre
  • la manière dont on clique sur un article
  • etc …

Actuellement les mêmes réglages ESCAL donnent différents affichages adaptatifs selon les écrans :

naelgolfbanidaje.png