Konverter Properti Logis CSS
Konversi properti CSS fisik (margin-left, width, top, text-align: left) ke properti logis yang setara (margin-inline-start, inline-size, inset-block-start, text-align: start), atau sebaliknya.
Input
Output
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-logical-properties-converter \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"inputCss": ".box {\n margin-left: 10px;\n margin-right: 20px…",
"direction": "physical-to-logical"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-logical-properties-converter` tool (CSS Logical Properties Converter) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/css-logical-properties-converter/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Konverter Properti Logis CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Apa itu properti logis CSS?
Properti box-model CSS biasa — margin-left, padding-right, width, top — menggambarkan tata letak dalam arah fisik yang tetap. Itu berfungsi selama setiap halaman dibaca dari kiri ke kanan, atas ke bawah. Tetapi ini gagal saat situs Anda mendukung bahasa kanan ke kiri (Arab, Ibrani, Persia, Urdu) atau mode penulisan vertikal: margin-left: 16px yang dimaksudkan untuk berada sebelum judul berakhir setelah ketika tata letak berubah, karena "kiri" tidak pernah bergerak meskipun "sebelum" berubah.
Properti logis menggambarkan tata letak relatif terhadap aliran konten, bukan tepi layar: inline-start/inline-end menggantikan left/right, dan block-start/block-end menggantikan top/bottom. Dalam mode penulisan LTR horizontal default — mayoritas web — inline-start ditampilkan sebagai kiri, jadi tidak ada yang berubah secara visual. Beralih ke RTL atau mode penulisan vertikal, namun properti logis secara otomatis mengarahkan ulang dengan konten sementara properti fisik tetap terpaku di sisi yang salah.
Ini penting bahkan tanpa rencana RTL hari ini: properti logis menggambarkan maksud ("ruang sebelum elemen ini dalam urutan pembacaan"), dan browser, sistem desain, serta kerangka kerja (utilitas ms-/me- Tailwind termasuk) konvergen ke arahnya.
Cara menggunakan alat ini
- Tempel blok CSS ke dalam kotak input — pemilih, komentar, dan pemformatan apa pun tidak masalah.
- Pilih arah: Fisik ke Logis mengkonversi
margin-left,width,top,text-align: left, dan properti serupa ke padanan logis mereka; Logis ke Fisik mengkonversi cara lain, berguna ketika Anda memerlukan fallback fisik untuk alat yang lebih lama. - CSS yang dikonversi muncul secara instan. Salin atau unduh sebagai file
.css.
Hanya properti dalam tabel di bawah yang disentuh — pemilih, kurung kurawal, komentar, deklarasi yang tidak dikenali, dan indentasi melewati dengan tepat seperti yang ditulis.
Tabel pemetaan (LTR — asumsi standar)
| Fisik | Logis |
|---|---|
margin-left / -right / -top / -bottom |
margin-inline-start / -inline-end / -block-start / -block-end |
padding-left / -right / -top / -bottom |
padding-inline-start / -inline-end / -block-start / -block-end |
border-left / -right / -top / -bottom (dan -width/-color/-style) |
border-inline-start / -inline-end / -block-start / -block-end (dan varian) |
width / height |
inline-size / block-size |
min-/max-width/height |
min-/max-inline-size / block-size |
top / bottom / left / right |
inset-block-start / -block-end / -inline-start / -inline-end |
text-align: left / right |
text-align: start / end |
Alat ini mengasumsikan mode penulisan LTR horizontal standar, jadi inline-start = kiri dan inline-end = kanan — penyederhanaan yang digunakan di seluruh dokumentasi properti logis yang hampir semua, karena membaliknya hanya penting setelah elemen benar-benar menetapkan direction: rtl atau writing-mode vertikal.
Pertanyaan Umum
Apakah ini akan menangkap setiap properti fisik di stylesheet saya?
Ini mencakup pasangan box-model standar, sizing, inset, dan text-align di atas. Properti di luar rangkaian itu (background-position, transform, sudut border-radius) dibiarkan tidak tersentuh daripada ditebak.
Apakah ini menangani beberapa deklarasi pada satu baris?
Tidak — itu membaca satu deklarasi property: value; per baris. Format CSS minified terlebih dahulu sehingga setiap deklarasi memiliki barisnya sendiri.
Mengapa text-align tetap namanya tetapi mengubah nilainya?
text-align selalu menerima kata kunci logis (start/end) bersama yang fisik — tidak ada nama properti logis yang terpisah. Hanya nilainya yang berubah.
Privasi
Alat ini berjalan sepenuhnya di browser Anda. CSS Anda tidak pernah diunggah ke server.