Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Codesnippets auf Smartphone präsentieren

Sonntag, 27. März 2016

Die korrekte Darstellung von Codesnippets auf dem Desktop muss einigen Forderungen gerecht werden:

  • Zur besseren Lesbarkeit des Codes sollten Einrückungen wie im Editor dargestellt werden.
  • Der Code sollte zur Darstellung nicht umgebrochen werden.
  • Aus diesen beiden Forderungen ergibt sich häufig eine Breite, die über den verfügbaren Raum hinausläuft.
  • Mögliche Lösung: Eine Box, die unabhängig vom restlichen Seiteninhalt gescrollt werden kann.

Erstaunlicherweise funktioniert so eine Lösung sogar auf dem Smartphones, wie folgender Screencast vom iPhone zeigt:

Ab 0:20 wird gezeigt, wie der Kasten mit dem Code mit dem Finger gescrollt werden kann.

Der Code:

Das Codesnippet wird in ein <code> Tag gepackt.
Dazu folgendes CSS:

code {
white-space: pre;
overflow:auto;
display:block;
border:1px dashed;
}



Kommentare

Noch keine Beiträge.

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE