Dyslexie, mais avec du style...

Dans mes applis destinées aux élèves, je mets toujours un bouton permettant de passer à une fonte pour dyslexiques, la très célèbre opendyslexic et j'ai souvent de bons retours.

Toutefois, je me suis dit que ce serait bien d'améliorer un peu le truc et d'en faire une classe que je puisse réutiliser plus ou moins telle quelle.

En gros, je force la police en opendyslexic, j'augmente un peu l'espacement entre les lettres ainsi que celui entre les mots et la taille de la police.

@font-face {
  font-family: 'opendyslexic';
  font-style: normal;
  font-weight: 400;
  src: local('font/opendyslexic'), url('font/opendyslexic.woff') format('woff');
}
.dyslexic{
    font-family:"opendyslexic";
    line-height:1.8em;
    letter-spacing: 0.12em;
    word-spacing: 0.39em;
    font-size:1.5em;
}

ça sous entend que vous avez la police opendyslexic dans un dossier font, comme dans le zip que voici, prêt à l'usage : Dislexic_css.zip

En bonus,

Je vous file un petit (!) bookmarklet qui fait ce qu'il peut pour passer le site courant en version dys. (Vu que le chargement de fontes distantes est bloqué pour des raisons de sécurité, j'ai directement inclus la fonte en base64 dans le css)

Avec ce site, ça donne ça:

dys.jpg

Avec start page:

spdys.jpg

Vous le trouverez dans ma page de bookmarklets

Pour conclure

Comme toujours, ça peut sans aucun doute s'améliorer: j'ai fait ça entre les devoirs des enfants, les corrections de copies et le repas à préparer. Toutefois, ça fonctionne plutôt bien sur tous les sites que j'ai testés, même les sites de warez

Allez  bisou  .png

❝ 2 commentaires ❞

1  Jerry Wham le

C'est trop bien !!! Et le bookmarklets fonctionne bien.
Merci coupain !


 
2  poujol mathias rost le

C'est très bien tout cela.

 

Fil RSS des commentaires de cet article

✍ Écrire un commentaire

les commentaires relevant du SPAM seront filtrés et dégagés direct...

Quelle est le troisième caractère du mot st4mpi ?