SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 349 visiteurs en ce moment

Accueil > Rédaction > Affichage dans texte > OpenDyslexic > OpenDyslexic, police pour les dyslexiques

OpenDyslexic, police pour les dyslexiques

4 avril 2016 – par naga44

6 votes

Avoir un sélecteur de css pour un affichage avec une police de caractère faite pour les dyslexiques.

Introduction

Cette contribution utilise un switcher de css (http://alistapart.com/article/alternate) avec Open Dyslexic (http://opendyslexic.org/), une police open source conçue pour aider la lecture des personnes ayant une dyslexie.

Cette police n’étant pas forcement agréable à l’œil, on utilise un switcher pour ne l’afficher que pour les personnes qui le souhaitent.

Nous n’en avons pas fait un plugin [1], mais si il y a des motivés, ça serait bien ;)

Avant propos

Je fais plusieurs fois référence au dossier "squelettes" dans cette contribution pédagogique.

Il s’agit d’un dossier à créer permettant de faire des modifications sur le code tout en gardant le code d’origine.

Un exemple est décrit ci-dessous :

Pour afficher un contenu sur le sommaire, il faut modifier le fichier sommaire.html.

Celui affiché se trouve :

  • Soit dans le dossier du squelette installé lui-même dans le dossier plugin si on a installé un squelette (qui contient un visuel et des fonctionnalités, sauf pour Zpip et SPIPr-dist qui sépare les deux).
  • Soit dans le dossier squelettes-dist pour le Spip de base

Dans les deux cas, on copie celui-ci et on met la copie dans le dossier squelettes qu’il faut créer au même niveau que les dossier écrire, squelettes-dist, plugin-dist…si il n’y en a pas.

En modifiant ce fichier sommaire.html, il prend la priorité sur celui d’origine. Mettre les fichiers modifiés dans squelettes est le moyen propre de modifier le code. En effet, si on fait une mise à jour des plugins, les modifications ne sont pas à refaire.

Installation

Après avoir créé un dossier « squelettes », on insère les éléments suivants.

Dans inclure/head.html

1-On appelle le script du switcher
2-On appelle le CSS alternatif pour les personnes dyslexiques

Bref, on fait un copier/coller de ce qui suit :

  1. [(#REM) SWITCHER JS ]
  2. <script type="text/javascript" src="./squelettes/js/styleswitcher.js"></script>
  3. </script>
  4.  
  5. [(#REM) OPEN DYSLEXIC CSS ]
  6. [<link rel="alternate stylesheet" href="(#CHEMIN{css/dyslexic.css}|direction_css)" type="text/css" title="dyslexic"/>]

Télécharger

Squelettes

Après avoir dézippé l’archive ci-jointe, on dépose le dossier js dans le répertoire squelettes.

Zip - 915 octets

Après avoir dézippé l’archive ci-jointe, on dépose le dossier font dans le répertoire squelettes/css.

Zip - 341.1 ko

et la feuille de style dans squelettes/css

Cascading Style Sheet - 179 octets

Dans une page

Maintenant que tout est mis en place, on modifie une des pages du dossier « squelettes » pour insérer le code suivant et afficher la question .

Si on souhaite avoir la question le changement de police dans la page sommaire, on modifie alors sommaire.html.

Ou dans inclure/navsub.html si on souhaite le voir dans la colonne de droite (navsub est le nom pour un spip de base, ceci étant changeant pour chaque squelette utilisé)

  1. <!--switcher opendyslexic-->
  2. <div class ="dyslexia">Êtes-vous dyslexique ?</div>
  3. <div class ="dyslexia_answers">
  4. <a href="#" onclick="setActiveStyleSheet('dyslexic'); return false;">Oui</a>
  5. <a href="#" onclick="setActiveStyleSheet('themes'); return false;">Non</a>
  6. </div>
  7. <!--switcher opendyslexic-->

Télécharger

"Oui", utilise dyslexic.css pour aider à la lecture des personnes dyslexique, alors que "non" utilise themes.css (le css par défaut dans lequel se trouve body).

On peut changer setActiveStyleSheet(’themes’) ; par setActiveStyleSheet(’ma_feuille _de_style’) ; si on en utilise une autre.

Remarque

Dans ce cas, je me base sur un "spip de base" et les typo titres et autres sont les mêmes que le body. Du coup, ma feuille de style dyslexic.css est très courte.

  1. @font-face {
  2. font-family: 'OpenDyslexic-Regular';
  3. src: url('./font/OpenDyslexic-Regular.otf') format('truetype');
  4. }
  5.  
  6. body {
  7. font-family : "OpenDyslexic-Regular", sans-serif;
  8. }

Télécharger

Si on avait plusieurs polices, par exemple, h1 en Arial, pour faire que la modification touche aussi le h1, on l’ajoute dans la feuille de style au niveau de body comme ceci :

  1. @font-face {
  2. font-family: 'OpenDyslexic-Regular';
  3. src: url('./font/OpenDyslexic-Regular.otf') format('truetype');
  4. }
  5.  
  6. body, h1 {
  7. font-family : "OpenDyslexic-Regular", sans-serif;
  8. }

Télécharger

Notes

[1J’ai essayé, mais je n’ai pas le niveau et pas pu consacrer du temps à cet apprentissage...

Dernière modification de cette page le 4 avril 2016

Retour en haut de la page

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Métas +

    3 décembre – 12 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • Acces Restreint 3.0

    11 décembre 2008 – 785 commentaires

    Le plugin accès restreint permet de définir et de gérer des zones de l’espace public en accès restreint. Cette version du plugin a été redévelopée et optimisée tout spécialement pour SPIP 2.0. Il en découle une amélioration des performances sur les gros (...)

  • Compositions 2 et 3

    25 mars 2011 – 176 commentaires

    Ce plugin vous permet de définir plusieurs variantes de squelettes (nommées compositions) pour un même type d’objet SPIP. Dans l’espace privé, il est alors possible de choisir, dans un menu déroulant, la composition qu’on veut attribuer à chaque (...)

  • Configurer Sparkpost

    25 avril – 18 commentaires

    N’hésitez pas à relire le préambule de cette rubrique avant de créer un compte sur une plateforme tierce . Présentation Sparkpost est une société d’envoi de mailing https://www.sparkpost.com/ Sur les petits volumes ( <100.000 emails / mois), (...)

  • Mode portail Communiquant pour SoyezCréateurs

    29 septembre 2010 – 21 commentaires

    5e mode d’affichage de la page d’accueil, ce mode se distingue des autres par une animation proposant un fondu/enchaîné des logos des articles à la une. Zonage Configuration Zone d’entête Nom du site Slogan si plugin bandeau présent (...)

Ça spipe par là