4 <title>⚡ Distribution Board Label Generator for DIN Rail Modules
</title>
6 /* DIN Rail Modules are
17.5mm wide, but mounted with
18mm pitch to accomodate differences */
9 table,h1 { font-family: sans-serif; font-weight: normal; font-size:
3.8mm; line-height:
5.2mm; }
10 small { font-size:
2.5mm; line-height:
2.5mm; }
11 small small { font-size:
2mm; line-height:
1.9mm; }
12 a { color: dark-grey; text-decoration: none; }
15 table { border-spacing:
0px; border-collapse: collapse; }
16 tr { margin-bottom:
10mm; }
17 td * { display: block; }
19 border:
1px solid black; width:
18mm; height:
16mm;
20 text-align: center; padding:
0; overflow: hidden;
21 display: flex-wrap; float: left; margin-bottom:
5mm; box-sizing: border-box;
22 justify-content: center; /* align-items: center; */
23 white-space: pre-line;
26 td:not(:last-child) { border-right:
0px solid red; }
29 td[
colspan=
"2"] { width: calc(
2 *
18mm); counter-increment: module_counter
2; }
30 td[
colspan=
"3"] { width: calc(
3 *
18mm); counter-increment: module_counter
3; }
31 td[
colspan=
"4"] { width: calc(
4 *
18mm); counter-increment: module_counter
4; }
32 td[
colspan=
"5"] { width: calc(
5 *
18mm); counter-increment: module_counter
5; }
33 td[
colspan=
"6"] { width: calc(
6 *
18mm); counter-increment: module_counter
6; }
34 td[
colspan=
"7"] { width: calc(
7 *
18mm); counter-increment: module_counter
7; }
35 td[
colspan=
"8"] { width: calc(
8 *
18mm); counter-increment: module_counter
8; }
36 td[
colspan=
"9"] { width: calc(
8 *
18mm); counter-increment: module_counter
9; }
37 td[
colspan=
"10"] { width: calc(
8 *
18mm); counter-increment: module_counter
10; }
38 td[
colspan=
"11"] { width: calc(
8 *
18mm); counter-increment: module_counter
11; }
39 td[
colspan=
"12"] { width: calc(
8 *
18mm); counter-increment: module_counter
12; }
40 td[
colspan=
"13"] { width: calc(
8 *
18mm); counter-increment: module_counter
13; }
41 td[
colspan=
"14"] { width: calc(
8 *
18mm); counter-increment: module_counter
14; }
42 td[
colspan=
"15"] { width: calc(
8 *
18mm); counter-increment: module_counter
15; }
43 td[
colspan=
"16"] { width: calc(
8 *
18mm); counter-increment: module_counter
16; }
46 tr { counter-reset: module_counter; }
47 td { counter-increment: module_counter
1; }
48 table.indexed * td::after {
49 content: counter(module_counter);
50 font-size:
1.8mm; line-height:
1.9mm;
55 padding:
0px
1px
2px
1px;
57 table.fancyindex * td::after {
58 background-color: black; color: white;
60 border-bottom-left-radius:
5px;
65 * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
66 .noprint, .noprint * { display: none; }
67 @page { size: landscape; }
73 <h1>Distribution Box Label Generator for DIN Rail Modules (
<a href=
"https://github.com/harvie">github.com/harvie
</a> )
</h1>
74 <div class=
"noprint">Copy-paste these icons:
</div>
75 📡 🌐 🔔 📺 📞 🔌 💧 🔥 ⚡ 💡 🔧 🛠️ 🔑 🔒 🌡️ ⚙️ 🕒 ⏰ 💨 🔋 📹 🔐 🤖 ☀️ 🌒 🌙 🔆 🌞 ⏳ 🛡️ ⚔️ ☠ ☠️ 🛗 🚗 ⭐ ✨ 💫 ❄️ ⚠ ⚠️ 🚨
78 <textarea id=
"labeltext" style=
"width:100%; height: 20em;" oninput=
"document.getElementById('labeltable').innerHTML=document.getElementById('labeltext').value;"></textarea>
79 Use CTRL+S to save whole tool including your changes to your computer. CTRL+P to print.
<br />
80 <button onclick=
"document.getElementById('labeltable').innerHTML=document.getElementById('labeltext').value;">Generate
</button>
81 <button onclick=
"window.print();return false;">Print
</button>
90 <td>🔌<br />Obývák
</td>
91 <td>🔌<br />Pokoje
</td>
92 <td>💧<br />Koupelna Pračka
</td>
94 <td>💧<br />Kuchyně Linka
</td>
95 <td>💧<br />Kuchyně Myčka
</td>
96 <td colspan=
3>🔥<br />Kuchyně Sporák
</td>
97 <td colspan=
3>⚡<br />Svodič přepětí
</td>
104 <td>🔌<br />Vchod
</td>
105 <td>🔌<br />Předsíň
</td>
106 <td>🛠️<br />Režie
</td>
107 <td>💡<br />Světla Kuchyně
</td>
108 <td>💡<br />Světla Koupelna
</td>
109 <td>💡<br />Světla Obývák
</td>
110 <td>💡<br />Světla Pokoje
</td>
111 <td>💡<br />Světla Předsíň
</td>
112 <td colspan=
3>💡<br />Světla Předsíň
<br />Bezdrátové Relé
</td>
120 <table class=
"indexed">
123 <td><small>Very long and tiny text that is really important to have on your breaker box!
</small></td>
124 <td>Warning!
<small><small>Very long and tiny text that is really important to have on your breaker box!
</small></small></td>
125 <td><b>Bold
</b> <i>Italic
</i> <u>Under
</u></td>
160 <table class=
"indexed fancyindex">
182 <script>document.getElementById('labeltext').value=document.getElementById('labeltable').innerHTML.replace(/<.?tbody
>/g,
"").trim();
</script>