Ambrose Liew

This is a placeholder text.

هذا نص عنصر نائب.

これはプレースホルダーテキストです。

Padding Block Start

LogicalProperties.tsx

LogicalProperties.module.css


import React from "react";
import styles from "./LogicalProperties.module.css";
export default function LogicalProperties() {
  const [padding, setPadding] = React.useState(0);
  return (
    <div>
      <div style={{ display: "flex" }}>
        <p
          lang="en"
          style={{ paddingBlockStart: `${padding * 10}px` }}
          className={styles.paragraph}
        >
          This is a placeholder text.
        </p>
        <p
          lang="ar"
          // use this instead of CSS's direction: rtl
          dir="rtl"
          style={{ paddingBlockStart: `${padding * 10}px` }}
          className={styles.paragraph}
        >
          هذا نص عنصر نائب.
        </p>
        <p
          lang="ja"
          style={{
            // There is no HTML dir for vertical-rl atm
            writingMode: "vertical-rl",
            paddingBlockStart: `${padding * 10}px`,
          }}
          className={styles.paragraph}
        >
          これはプレースホルダーテキストです。
        </p>
      </div>
      <label>
        Padding Block Start
        <input
          type="range"
          min={0}
          max={10}
          value={padding}
          onChange={(e) => setPadding(Number(e.target.value))}
        />
      </label>
    </div>
  );
}