Kako zadržati code blokove čitljivima na mobilnim uredajima

Tehnički članci često pucaju na mobitelu iz jednostavnog razloga: code linije su duže od ekrana. Ako layout to ne obuzda, cijela stranica može postati šira od viewporta.

Rješenje nije skracivati kod dok ne postane beskoristan. Rješenje je dopustiti code bloku da se sam scrolla.

Neka se blok scrolla, ne stranica

Važno je da overflow ostane unutar <pre> elementa.

article {
  min-width: 0;
}

pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}

pre code {
  display: block;
  min-width: max-content;
}

Ta kombinacija cuva duge linije netaknutima, a citatelju dopusta horizontalni scroll unutar bloka.

Neka roditeljski layout bude fleksibilan

Ako se code blok nalazi unutar grid ili flex layouta, i parent mora moći dovoljno skupiti. Bez toga child može prisiliti cijeli article da bude širi od viewporta.

U praksi to obično znači dodati min-width: 0 wrapperu koji drži prose content.

<article class="min-w-0">
  <div class="prose min-w-0">
    <!-- content -->
  </div>
</article>

To je mala promjena, ali rješava velik broj mobilnih overflow problema.

Zadržite kod koristan

Ne wrapajte kod ručno samo da stane na ekran. To često čini primjer težim za citanje i može pokvariti copy/paste.

Umjesto toga, zadržite originalno formatiranje i pustite blok da sam upravlja scrollanjem. To je bolje za čitatelje i bolje za dugorocnu održivost članka.

Isto pravilo vrijedi za tablice i šire embedove. Ako je sadržaj inherentno širi od telefonskog ekrana, obuzdajte overflow umjesto da pustite da se sama stranica širi.

Testirajte na stvarnoj sirini telefona

Većinu problema možete uhvatiti testiranjem uskog viewporta u browser dev toolsima, ali i dalje vrijedi provjeriti na stvarnom uređaju ako članak sadrži puno koda.

Ako stranica ne tjera horizontalni scroll i ako se kod može čitati bez pucanja layouta, članak je spreman.

To je standard koji danas koristim za tehničke blog postove: čitljiv na desktopu, obuzdan na mobitelu i i dalje jednostavan za kopiranje.