====== Sekilas tentang komponen Wrap ======

===== Sintaks dasar =====

**%%<WRAP>%%** huruf besar (atau alternatifnya **%%<block>%%** atau **%%<div>%%**) membuat **''div''** dan harus digunakan untuk kontainer **"besar"**, **mengelilingi** paragraf, daftar, tabel, dll.

  <WRAP classes width :language>
  konten "besar"
  </WRAP>
  
  atau
  <block classes width :language>
  konten "besar"
  </block>
  
  atau
  <div classes width :language>
  konten "besar"
  </div>

Huruf kecil **%%<wrap>%%** (atau alternatifnya **%%<inline>%%** atau **%%<span>%%**) membuat **''span''** dan harus digunakan untuk kontainer **"kecil"**, **di dalam** paragraf, daftar, tabel, dll.

  <wrap classes width :language>"small" content</wrap>
  
  atau
  <inline classes width :language>"small" content</inline>
  
  atau
  <span classes width :language>"small" content</span>
   
:!: Harap dicatat, beberapa hal **tidak akan berfungsi dengan span huruf kecil**:
  * **perataan** (termasuk perataan yang dihasilkan dengan mengubah arah teks)
  * **multi-kolom**
  * dan **lebar**
jika wrap yang sesuai juga tidak di-float.


===== Pengkelasan dan Pemodelan=====


==== Kolom dan Float ====


Kamu dapat dengan mudah membuat kolom dengan menambahkan kelas ''column'' dengan lebar tertentu, misalnya:
  <WRAP column 30%>...content...</WRAP>

<WRAP column 30%>
//**__Emulasi Headline Besar__**//

Kamu dapat membuat emulasi headline besar dengan teks miring, tebal, dan bergaris bawah, misalnya:

  <code>//**__Judul Besar yang Ditiru__**//</code>

//**Emulasi Headline Kecil**//

Judul yang lebih kecil tidak menggunakan garis bawah, misalnya:

  <code>//**Emulasi Headline Kecil**//</code>

Jika Kamu membutuhkan teks yang tebal dan miring, cukup gunakan sebaliknya:
  <code>**//Tanpa Judul//**</code>
</WRAP>

<WRAP column 30%>
//**__Opsi Floating yang Berbeda__**//

Biasanya Kamu hanya membutuhkan kelas ''column'', tetapi untuk penggunaan yang lebih canggih (tidak hanya untuk kolom, tetapi juga untuk kelas lain, seperti [[#box dan catatan]]) Kamu dapat memiliki beberapa jenis "floating":

  * **''column''** sama dengan ''left'' dalam bahasa LTR dan sama dengan ''right'' dalam bahasa RTL
  * **''left''** akan memungkinkan Kamu membuat float wrap di sebelah kiri
  * **''right''** akan memungkinkan float wrap ke kanan
  * **''center''** akan memposisikan wrap di tengah halaman secara horizontal

</WRAP>

<WRAP column 30%>
//**__Lebar__**//

Kamu dapat mengatur lebar yang valid (tetapi hanya pada div): ''%, px, em, ex, pt, pc, cm, mm, in'', tetapi biasanya mengggunakan salah satu dari berikut ini:

^type^e.g.^note^
^''%''|''30%''|cocok untuk layout liquid|
^''px''|''420px''|cocok jika tata letak Kamu memiliki lebar piksel tetap atau jika kontainer Kamu berisi gambar dengan lebar tertentu|
^''em''|''20em''|cocok jika Kamu ingin kontainer wrap Kamu membesar dan mengecil sesuai dengan ukuran font atau jika tata letak Kamu berbasis em|

Sebuah **tabel** di dalam kolom atau kotak akan selalu **lebar 100%**. Ini memungkinkan penempatan dan pengaturan ukuran tabel.

</WRAP>

<wrap em>Setelah menggunakan salah satu kelas float, Kamu mungkin menemukan sesuatu seperti ini, di mana teks berikut menonjol ke ruang yang seharusnya hanya ditempati oleh kontainer floating ...</wrap>

<WRAP clear></WRAP>

... untuk menghindari hal tersebut, Kamu cukup menambahkan
  <WRAP clear></WRAP>
setelah kolom terakhir Kamu.


Kamu **dapat** menggunakan opsi yang sama dengan span (karena setiap elemen yang mengambang secara otomatis menjadi elemen tingkat blok), tetapi mungkin tidak terlalu masuk akal. :!: Lebar pada span biasanya tidak berfungsi (sesuai desain), tetapi bisa masuk akal jika mengambang.

:!: Perhatian: Lebar dapat menyebabkan masalah dan seringkali terlihat berbeda dan rusak di beberapa browser. Jika Kamu bukan pengembang web, Kamu mungkin tidak memahami masalah apa pun terkait [[http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug|model kotak]]. Cobalah untuk menguji kolom Kamu di semua browser utama dan buat lebarnya lebih kecil dari yang Kamu kira seharusnya.

Semua opsi tersebut juga akan berfungsi di pembungkus [[#kotak dan catatan]] (lihat di bawah).

=== Multi-kolom ===

<WRAP col3>
Untuk browser modern (Firefox, Chrome, dan Safari) Kamu dapat menggunakan multi-kolom. Cukup gunakan **''%%col2%%''** untuk 2 kolom, **''%%col3%%''** untuk 3 kolom, **''%%col4%%''** untuk 4 kolom, dan **''%%col5%%''** untuk 5 kolom.

:!: Catatan: Multi-kolom tidak masuk akal untuk span.

</WRAP>

==== Perataan ====

Kamu dapat menggunakan berbagai perataan teks berikut:

  * ''leftalign''
  * ''rightalign''
  * ''centeralign''
  * ''justify''

<WRAP centeralign>
Teks rata tengah ...
</WRAP>

<WRAP rightalign>
... dan rata kanan.

</WRAP>

<code>
<WRAP centeralign>
Teks rata tengah ...
</WRAP>

<WRAP rightalign>
... dan rata kanan.

</WRAP>
</code>

:!: Kamu tidak dapat menambahkan perataan pada span.


==== Kotak dan Catatan ====

<WRAP round box 570px center>
//**__round box 570px center__**//

  * ''box'' membuat kotak di sekitar kontainer dan menggunakan warna dari ''style.ini'' template sebagai warna default (''%%__background_alt__%%'' dan ''%%__text__%%'')
  * Kelas apa pun ''info'', ''tip'', ''important'', ''alert'', ''help'', ''download'', ''todo'' akan menambahkan kontainer catatan khusus dengan ikon yang sesuai
  * Kelas ''danger'', ''warning'', ''caution'', ''notice'', ''safety'' menggunakan warna keamanan (dan tanpa ikon)
  * ''round'' dapat ditambahkan ke apa pun dengan warna latar belakang atau batas dan hanya akan berfungsi di browser modern (bukan Internet Explorer)
</WRAP>


<WRAP info 220px left>
//**Info**//
  <WRAP info></WRAP>
</WRAP>


<WRAP tip 220px left>
//**Tip**//
  <WRAP tip></WRAP>
</WRAP>


<WRAP important 220px left>
//**Important**//
  <WRAP important></WRAP>
</WRAP>


<WRAP alert 220px left>
//**Alert**//
  <WRAP alert></WRAP>
</WRAP>


<WRAP round help 220px left>
//**Help**//
  <WRAP round help></WRAP>
</WRAP>


<WRAP download 220px left>
//**Download**//
  <WRAP download></WRAP>
</WRAP>


<WRAP todo 220px left>
//**Todo**//
  <WRAP todo></WRAP>
</WRAP>


<WRAP clear></WRAP>


**Catatan Safety:**

<WRAP danger 27% left>
//**Danger**//
  <WRAP danger></WRAP>
</WRAP>

<WRAP warning 27% left>
//**Warning**//
  <WRAP warning></WRAP>
</WRAP>

<WRAP caution 27% left>
//**Caution**//
  <WRAP caution></WRAP>
</WRAP>

<WRAP round notice 27% left>
//**Notice**//
  <WRAP round notice></WRAP>
</WRAP>

<WRAP round safety 27% left>
//**Safety**//
  <WRAP round safety></WRAP>
</WRAP>

<WRAP clear></WRAP>


Kamu juga dapat menggunakan catatan dan kotak di dalam teks dengan tag span seperti ini:\\
<wrap info>info</wrap>, <wrap help>help</wrap>, <wrap alert>alert</wrap>, <wrap important>important</wrap>, <wrap tip>tip</wrap>, <wrap download>download</wrap>, <wrap todo>todo</wrap> and <wrap round box>round box</wrap> and <wrap danger>danger</wrap>, <wrap warning>warning</wrap>, <wrap caution>caution</wrap>, <wrap notice>notice</wrap>, <wrap safety>safety</wrap>.
  <wrap info>info</wrap>, <wrap help>help</wrap>, ...


==== Tanda ====

Kamu dapat menandai teks sebagai <wrap hi>disorot</wrap>, <wrap lo>kurang penting</wrap> dan <wrap em>sangat ditekankan</wrap>.

  Kamu dapat menandai teks sebagai <wrap hi>disorot</wrap>, <wrap lo>kurang penting</wrap> dan <wrap em>sangat ditekankan</wrap>.

:!: Ini mungkin terlihat kurang bagus di beberapa templat dan perlu disesuaikan.

==== Lain-lain ====

=== Indentasi ===

<wrap indent>Teks ini akan muncul dengan indentasi.</wrap>

  <wrap indent>Teks ini akan muncul dengan indentasi.</wrap>

=== Outdentasi ===

<wrap outdent>Teks ini akan muncul dengan outdentasi.</wrap>

  <wrap outdent>Teks ini akan muncul dengan outdentasi.</wrap>

=== Pra-pembungkus ===

<WRAP prewrap 250px>
<code>
Di dalam blok kode ini, kata-kata akan dibungkus ke baris baru meskipun semuanya berada dalam satu baris.
</code>
</WRAP>

  <WRAP prewrap 250px>
  <code>
  Di dalam blok kode ini, kata-kata akan dibungkus ke baris baru meskipun semuanya berada dalam satu baris.
  </code>
  </WRAP>

=== Spoiler ===

Berikut ini spoiler: <wrap spoiler>PLTU Suralaya mempunyai tujuh unit.</wrap>

  Berikut ini spoiler: <wrap spoiler>PLTU Suralaya mempunyai tujuh unit.</wrap>

Cukup pilih teks di kotak spoiler untuk dapat membaca isinya.

=== Sembunyikan ===

Teks berikut disembunyikan: <wrap hide>Budi, tolong revisi kalimat itu.</wrap>

  Teks berikut disembunyikan: <wrap hide>Budi, tolong revisi kalimat itu.</wrap>

:!: Peringatan: Teks ini masih akan muncul di kode sumber, di browser non-modern dan dapat dicari. Jangan sembunyikan rahasia yang berisiko keamanan dengannya!

=== Pagebreak ===

Berikut ini akan menambahkan pemisah halaman: <WRAP pagebreak></WRAP>

  Berikut ini akan menambahkan pemisah halaman: <WRAP pagebreak></WRAP>

Ini tidak berpengaruh pada layar browser. [[http://reference.sitepoint.com/css/page-break-after|pagebreak]] akan memaksa halaman baru pada hasil cetak.

=== Nopagebreak ===

Berikut ini akan mencoba menghindari pemisah halaman: <WRAP nopagebreak>banyak konten yang saling terkait (seperti tabel panjang)</WRAP>

  Berikut ini akan mencoba menghindari pemisah halaman: <WRAP nopagebreak>banyak konten yang saling terkait (seperti tabel panjang)</WRAP>

Ini juga tidak berpengaruh pada layar browser. Ini akan mencoba [[http://reference.sitepoint.com/css/page-break-inside|menghindari pemisah halaman]] pada hasil cetak.

=== Noprint ===

<wrap noprint>Teks ini muncul di layar, tetapi tidak tercetak.</wrap>

  <wrap noprint>Teks ini muncul di layar, tetapi tidak tercetak.</wrap>

=== Onlyprint ===

<wrap onlyprint>Teks ini tidak muncul di layar, tetapi hanya tercetak.</wrap>

  <wrap onlyprint>Teks ini tidak muncul di layar, tetapi hanya tercetak.</wrap>

==== Penggabungan dan Penestingan ====

Kamu dapat menggabungkan dan menyusun semua kelas dan tipe kotak, misalnya:

<WRAP box 350px right :en>
//**__Kotak luar mengambang ke kanan__**//

<WRAP 165px left>
Kotak bersarang bagian dalam mengambang ke kiri dan sebagian <wrap em hi>__pe__nekanan dan __hi__ghlighted yang terdapat <wrap notice>__notice__</wrap> di dalamnya</wrap>.
</WRAP>

Teks berada di dalam kotak kanan luar, tetapi di bawah kotak kiri dalam.

<WRAP clear></WRAP>

<WRAP round tip>
Round tip box di bagian bawah, setelah "clear"..
</WRAP>

</WRAP>


<code>
<WRAP box 350px right :en>
//**__Kotak luar mengambang ke kanan__**//

<WRAP 165px left>
Kotak bersarang bagian dalam mengambang ke kiri dan sebagian <wrap em hi>__pe__nekanan dan __hi__ghlighted yang terdapat <wrap notice>__notice__</wrap> di dalamnya</wrap>.
</WRAP>

Teks berada di dalam kotak kanan luar, tetapi di bawah kotak kiri dalam.

<WRAP clear></WRAP>

<WRAP round tip>
Round tip box di bagian bawah, setelah "clear"..
</WRAP>

</WRAP>
</code>


===== Bahasa dan Teks langsung =====

Kamu dapat mengubah bahasa dan arah baca kontainer wrap hanya dengan menambahkan titik dua diikuti kode bahasa, seperti ini:

<code>
<WRAP :he>
PLNは国営電力会社です. ((<wrap :en>Ini artinya "PLN adalah perusahaan listrik negara.", setidaknya menurut [[http://translate.google.com/|Google Translate]].</wrap>))
</WRAP>
</code>

<WRAP :he>
PLNは国営電力会社です. ((<wrap :en>Ini artinya "PLN adalah perusahaan listrik negara.", setidaknya menurut [[http://translate.google.com/|Google Translate]].</wrap>))
</WRAP>

Arah teks (''rtl'', kanan ke kiri atau ''ltr'', kiri ke kanan) akan disisipkan secara otomatis dan sepenuhnya bergantung pada bahasa. Daftar bahasa yang saat ini didukung diambil dari: http://meta.wikimedia.org/wiki/Template:List_of_language_names_ordered_by_code
(Jika Kamu menentukan bahasa yang tidak tercantum di sana, maka tidak akan terjadi apa pun.)