New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

word-wrap et hyphens #228

Closed
raphaelgoetter opened this Issue Nov 29, 2016 · 5 comments

Comments

Projects
None yet
2 participants
@raphaelgoetter
Member

raphaelgoetter commented Nov 29, 2016

Pour gérer les débordements de contenus, il est (était) recommandé d'utiliser la combinaison de deux déclarations : word-wrap: break-word et hyphens: auto (avec préfixes), la seconde étant moins bien supportée : http://caniuse.com/#search=hyphens

Mais ça c'était avant que word-wrap: break-word devienne systématiquement prioritaire sur hyphens: auto si les deux sont appliqués (quel que soit l’ordre et même avec un !important sur hyphens.

Du coup, la classe appliquée actuellement sur KNACSS est aujourd'hui complètement inutile :
https://github.com/alsacreations/KNACSS/blob/master/sass/library/_misc.scss#L26

@media (max-width: $tiny) {
  /* you shall not pass */
  div,
  textarea,
  table,
  td,
  th,
  code,
  pre,
  samp {
    word-wrap: break-word;
    hyphens: auto;
  }
}

:(

La méthode qui fonctionnerait (bien plus tordue) serait :

div {
  word-wrap: break-word;
}
@supports (-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto) {
  div {
    word-wrap: normal;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
  }
}

Test en ligne (CodePen) : http://codepen.io/raphaelgoetter/pen/aBLQeL?editors=1100

@raphaelgoetter raphaelgoetter self-assigned this Nov 29, 2016

@nico3333fr

This comment has been minimized.

Contributor

nico3333fr commented Nov 29, 2016

Yop, tu as testé avec quels navigateurs ?

Note qu'en plus, ta solution serait au poil... sauf que je ne suis même pas sûr que Chrome n'annonce pas supporter la propriété hyphens sans être incapable de la gérer, vu qu'il n'embarque pas de dictionnaire de césure. 👎

Je fais un test, et je te tiens au jus.

@nico3333fr

This comment has been minimized.

Contributor

nico3333fr commented Nov 29, 2016

Ouf, à priori, Chrome ne fait pas n'importe quoi (enfin, façon de parler ^^), il ne supporte pas du tout hyphens : http://codepen.io/nico3333fr/pen/JbrzPX

@raphaelgoetter

This comment has been minimized.

Member

raphaelgoetter commented Nov 29, 2016

En fait j'avais testé sur Chrome, Safari et Firefox sur Mac et tout était OK.
Là je viens de tester sur Chrome et Firefox Windows et le code ne fonctionne pas : le mot n'est pas coupé et pourtant @supports est bien reconnu :(

EDIT : là c'est le comble, je n'arrive plus du tout à faire fonctionner hyphens sur CodePen (même sans @ supports)
EDITEDIT : ah ben oui, il semble que ce soit un bug de Codepen. Sur un vrai document HTML le code fonctionne.

@nico3333fr

This comment has been minimized.

Contributor

nico3333fr commented Jul 10, 2017

Salut @raphaelgoetter ,

je me suis permis de reprendre cette idée pour Röcssti du coup, je viens de committer tout ça : nico3333fr/ROCSSTI#28 ;)

Au plaisir !

@raphaelgoetter

This comment has been minimized.

Member

raphaelgoetter commented Jul 10, 2017

\o/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment