Posted on

Mengatasi Masalah Mobile Friendly Karena Element PRE HTML

wpJakarta – Mengatasi Masalah Mobile Friendly Karena Element PRE HTML. Element <pre> pada HTML merepresentasikan sebagai preformatted text. Bahasa sininya text yang sebelum diformat atau teks pra format, atau teks yang ditampilkan sebagaimana aslinya. Yah pokoknya maksudnya itulah. Jelasnya coba aja google preformatted text”.

Umumnya Tag <Pre> dipakai misalnya saat memberikan tutorial yang isinya kode-kode atau bahasa pemrograman komputer. Meskipun tujuannya tag <pre> pastinya lebih luas bukan sekedar buat nampilin kode-kode pada blog tutorial saja. Kalaupun mau nampilin skrip kode menggunakan tag <pre>, maka biasanya diikuti oleh tag <code>, Misalnya : <pre><code> skrip kode yang ingin ditampilkan </code></pre>. Maka seluruh skrip/kode yang di ketikan akan di tampilkan semuanya oleh browser seperti text biasa. Seperti contohnya pada kode di bawah maka simbol tag seperti < atau > p “style”, color, href, dan semua element HTML lainnya akan di tampilkan.

  /* Script atau kode yang ditulis di dalam tag <pre> */

  <p style="color: green;"><a href="https://wpjakarta.com/">wpJakarta.Com {</a></p>
  <p style="color: red;">URL: <code>https://wpjakarta.com/</code>;</p>
  <p style="color: brown;">} //a Text Based WP Site!</p>

Sedangkan jika tiga baris di atas di tulis bukan di dalam tag <pre>, maka hasilnya akan ditampilkan oleh browser sebagai berikut :

wpJakarta.Com {

URL: https://wpjakarta.com/;

} //a Text Based WP Site!

Hanya tiga baris berikut yang ditampilkan oleh browser :
wpJakarta.Com {

URL: https://wpjakarta.com/;

} //a Text Based WP Site!

Masalah yang muncul ketika menggunakan tag <pre>

Blog-blog tutorial yang memberikan kode akan menggunakan tag <pre> dan <code> untuk kode-kode yang ingin disharing. Secara default tanpa memberikan “style” pada tag <pre> maka masalah “mobile friendly” muncul pada artikel dimana tag <pre> di gunakan.

Pada gambar disamping, dimana artikel tentang skrip kode yang ditulis di dalam tag <pre> secara default. Hasilnya menimbulkan masalah “mobile freindly” karena baris kode yang terlalu panjang tetap di tampilkan memanjang hingga melebihi screen handphone atau tablet bahkan layar PC.

Untuk Mengatasi Masalah Element PRE HTML, maka dapat ditambahkan “stylesheet” css dengan selector “pre”. Yaitu dengan style overflow atau wrap-text, dengan masing masing fungsinya sebagai berikut.

Mengatasi masalah element pre HTML dengan “overflow”

Dengan overflow maka akan memunculkan “scrollbar” pada bagian bawah apabila sebuah teks diketikan terlalu panjang. Ketikan css berikut pada kustom css editor :

 pre {
     overflow: auto;
 }

Namun hal tersebut juga “kurang disukai” sebagian orang. Karena jika kodenya memang panjang maka orang harus sedikit mengeluarkan “usaha” untuk menggerakan mousenya untuk menscroll ke kanan. Dan saat di scroll ke kanan tentu saja menutupi atau menyembunyikan teks atau kode yang di tulis dibagian kiri. Artinya jika ada orang yang ingin memahami kode yang di buat, maka harus scroll ke kanan, kiri, balik lagi ke kanan atau kekiri lagi.

Mengatasi masalah element pre HTML dengan Wrap-text

Maka selain cara “overflow” diatas. Pre juga bisa ditambahkan style css “wrap-text”, dengan kode css sebagai berikut :

 pre {
     white-space: pre-wrap;
 }

Dengan begitu kode yang panjang ke kanan saat menyentuh batas akan otomatis pindah baris kebawah. Dan pengunjung tidak perlu menscroll ke kanan karena seluruh kode akan di tampilkan didepannya secara utuh.

 pre {
     white-space: pre-wrap;
 }
 
 <p style="color: red;">URL: <code>https://wpjakarta.com/</code>;</p> /* Kode ini 
 memiliki komentar yang begitu panjang, bahkan lebih panjang dari kodenya sendiri, tapi 
 dengan style "white-space: pre-wrap" maka kode yang panjang ini akan tetap didisplay 
 secara utuh dan tidak membuat google "marah" karena halaman yang tidak mobile friendly. 
 */  /* akhir dari komentar */

Menambahkan element stylesheet lainnya pada <pre> dan <code>

Karena tag HTML <pre> dapat ditambahkan element stylesheet, dan biasanya juga digunakan untuk sharing tutorial kode, maka element <pre> dapat di berikan element stylesheet lainnya agar skrip atau kode yang di sharing jadi tambah “ganteng”. Misalnya :

  pre {
      white-space: pre-wrap;
      background: #222;
      border: 1px solid #000;
      font-size: 12px;
  }
  code {
      color: orangered;
  }