tools/css-units.html at main · jubilancy/tools · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>CSS Units | tools.eliana.lol</title>
  <link rel="stylesheet" href="../global.css" />
  <link rel="icon" type="image/x-icon" href="../favicon.svg" />
  <style>
    .tool-layout { display: flex; flex-direction: column; gap: 24px; }
    .action-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
    label { display: block; font-size: 0.7rem; text-transform: uppercase; font-weight: bold; color: var(--puny); margin-bottom: 5px; }
    .card { border: 1px solid var(--puny); padding: 14px; }
    .card h2 { font-size: 0.9rem; text-transform: uppercase; margin: 0 0 12px 0; padding-bottom: 6px; border-bottom: 1px solid var(--puny); }
    table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
    th { background: var(--highlight); border: 1px solid var(--puny); padding: 6px 10px; text-align: left; }
    td { border: 1px solid var(--puny); padding: 6px 10px; font-family: monospace; }
    tr:hover td { background: var(--hover); cursor: pointer; }
    .unit-val { font-weight: bold; color: var(--accent); }
    input[type=range] { accent-color: var(--accent); width: 180px; }
    .preview-box { border: 2px dashed var(--puny); padding: 20px; position: relative; }
    .preview-text { display: inline-block; background: var(--highlight); }
    select { background: var(--bg); color: var(--text); border: 1px solid var(--puny); font-family: monospace; padding: 4px 8px; }
    .controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
    .cg { display: flex; flex-direction: column; gap: 4px; }
    #copied { font-size: 0.75rem; color: var(--puny); min-height: 1.2rem; }
  </style>
</head>
<body>
  <nav>
    <div class="left"><a href="../index.html">home</a> | <a href="../extra.html">extra</a> | <a href="../credits.html">credits</a> | <a href="../changelog.html">logs</a></div>
    <div class="right"><button id="theme-toggle">[theme]</button> | <a href="https://eliana.lol">site</a></div>
  </nav>
  <main>
    <h1>CSS Units</h1>
    <p class="puny">Convert between px, rem, em, pt, vw, vh, and %. Live preview of font sizes and box dimensions. Click any row to copy.</p>
    <div class="tool-layout">

      <div class="card">
        <h2>Context settings</h2>
        <div class="controls">
          <div class="cg"><label>Root font size (px)</label><input type="number" id="root-fs" value="16" min="8" max="32" oninput="updateAll()" style="width:80px" /></div>
          <div class="cg"><label>Parent font size (px)</label><input type="number" id="parent-fs" value="16" min="8" max="32" oninput="updateAll()" style="width:80px" /></div>
          <div class="cg"><label>Viewport width (px)</label><input type="number" id="vp-w" value="1440" oninput="updateAll()" style="width:90px" /></div>
          <div class="cg"><label>Viewport height (px)</label><input type="number" id="vp-h" value="900" oninput="updateAll()" style="width:90px" /></div>
        </div>
      </div>

      <div class="card">
        <h2>Convert from px</h2>
        <div style="display:flex;gap:8px;align-items:flex-end">
          <div><label>Pixels</label><input type="number" id="px-in" value="16" oninput="fromPx()" style="width:100px" /></div>
          <button onclick="fromPx()">Convert</button>
        </div>
        <table style="margin-top:12px">
          <thead><tr><th>Unit</th><th>Value</th><th>Expression</th></tr></thead>
          <tbody id="px-table"></tbody>
        </table>
        <div id="copied"></div>
      </div>

      <div class="card">
        <h2>Font size live preview</h2>
        <div class="controls">
          <div class="cg">
            <label>Value <span id="fs-val-label">16</span></label>
            <input type="range" id="fs-slider" min="8" max="120" value="16" oninput="updateFSPreview()" />
          </div>
          <div class="cg"><label>Unit</label>
            <select id="fs-unit" onchange="updateFSPreview()">
              <option>px</option><option>rem</option><option>em</option><option>pt</option><option value="vw">vw</option>
            </select>
          </div>
        </div>
        <div class="preview-box" style="margin-top:12px">
          <span class="preview-text" id="fs-preview-text">The quick brown fox jumps over the lazy dog</span>
        </div>
        <div id="fs-equivalent" style="font-size:0.8rem;color:var(--puny);margin-top:6px"></div>
      </div>

      <div class="card">
        <h2>Box size preview</h2>
        <div class="controls">
          <div class="cg"><label>Width <span id="bw-label">200px</span></label><input type="range" id="box-w" min="1" max="100" value="30" oninput="updateBoxPreview()" /></div>
          <div class="cg"><label>Unit</label><select id="box-unit" onchange="updateBoxPreview()"><option>px</option><option>%</option><option>vw</option><option>rem</option></select></div>
        </div>
        <div class="preview-box" style="margin-top:12px;height:80px">
          <div id="box-preview" style="background:var(--accent);height:40px;transition:width 0.2s"></div>
        </div>
      </div>

    </div>
  </main>
  <footer style="margin-top:4rem;text-align:center" class="puny">© 2026 eliana.lol • <a href="../credits.html">credits</a></footer>
  <script>
    const htmlEl = document.documentElement;
    const toggle = document.getElementById('theme-toggle');
    const saved = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
    htmlEl.setAttribute('data-theme', saved);
    if (toggle) toggle.innerText = saved === 'dark' ? '[light]' : '[dark]';
    if (toggle) toggle.onclick = () => { const now = htmlEl.getAttribute('data-theme'); const next = now==='dark'?'light':'dark'; htmlEl.setAttribute('data-theme',next); localStorage.setItem('theme',next); toggle.innerText=next==='dark'?'[light]':'[dark]'; };

    function ctx() {
      return {
        root: parseFloat(document.getElementById('root-fs').value)||16,
        parent: parseFloat(document.getElementById('parent-fs').value)||16,
        vpW: parseFloat(document.getElementById('vp-w').value)||1440,
        vpH: parseFloat(document.getElementById('vp-h').value)||900,
      };
    }

    function fromPx() {
      const px = parseFloat(document.getElementById('px-in').value)||0;
      const c = ctx();
      const rows = [
        ['px', px, `${px}px`],
        ['rem', +(px/c.root).toFixed(4), `${+(px/c.root).toFixed(4)}rem`],
        ['em', +(px/c.parent).toFixed(4), `${+(px/c.parent).toFixed(4)}em`],
        ['pt', +(px*0.75).toFixed(4), `${+(px*0.75).toFixed(4)}pt`],
        ['vw', +((px/c.vpW)*100).toFixed(4), `${+((px/c.vpW)*100).toFixed(4)}vw`],
        ['vh', +((px/c.vpH)*100).toFixed(4), `${+((px/c.vpH)*100).toFixed(4)}vh`],
        ['%', +((px/c.parent)*100).toFixed(4), `${+((px/c.parent)*100).toFixed(4)}% (of parent)`],
      ];
      document.getElementById('px-table').innerHTML = rows.map(([unit,val,expr]) =>
        `<tr onclick="copy('${expr}')"><td>${unit}</td><td class="unit-val">${val}</td><td>${expr}</td></tr>`
      ).join('');
    }

    function copy(text) {
      navigator.clipboard.writeText(text);
      document.getElementById('copied').textContent = `Copied: ${text}`;
      setTimeout(() => document.getElementById('copied').textContent='', 2000);
    }

    function updateFSPreview() {
      const val = document.getElementById('fs-slider').value;
      const unit = document.getElementById('fs-unit').value;
      document.getElementById('fs-val-label').textContent = val;
      const el = document.getElementById('fs-preview-text');
      el.style.fontSize = val+unit;
      const c = ctx();
      let px;
      if (unit==='px') px = val;
      else if (unit==='rem') px = val*c.root;
      else if (unit==='em') px = val*c.parent;
      else if (unit==='pt') px = val/0.75;
      else if (unit==='vw') px = (val/100)*c.vpW;
      document.getElementById('fs-equivalent').textContent = px ? `≈ ${px.toFixed(1)}px` : '';
    }

    function updateBoxPreview() {
      const val = document.getElementById('box-w').value;
      const unit = document.getElementById('box-unit').value;
      document.getElementById('bw-label').textContent = val+unit;
      document.getElementById('box-preview').style.width = val+unit;
    }

    function updateAll() { fromPx(); updateFSPreview(); updateBoxPreview(); }

    fromPx(); updateFSPreview(); updateBoxPreview();
  </script>
</body>
</html>