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(
9 *
18mm); counter-increment: module_counter
9; }
37 td[
colspan=
"10"] { width: calc(
10 *
18mm); counter-increment: module_counter
10; }
38 td[
colspan=
"11"] { width: calc(
11 *
18mm); counter-increment: module_counter
11; }
39 td[
colspan=
"12"] { width: calc(
12 *
18mm); counter-increment: module_counter
12; }
40 td[
colspan=
"13"] { width: calc(
13 *
18mm); counter-increment: module_counter
13; }
41 td[
colspan=
"14"] { width: calc(
14 *
18mm); counter-increment: module_counter
14; }
42 td[
colspan=
"15"] { width: calc(
15 *
18mm); counter-increment: module_counter
15; }
43 td[
colspan=
"16"] { width: calc(
16 *
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 Circuit Breaker Modules (
<a href=
"https://github.com/harvie">github.com/harvie
</a> )
</h1>
74 <div class=
"noprint">Copy-paste these icons:
</div>
75 <!-- Power --> 🔌 ⚡ 💡 🔋 🔥 💧
76 <!-- Telco --> 📡 🌐 📺 📞 🔔 📱 🔊 ☎️
77 <!-- Danger --> ⚠ ⚠️ 🚨 💀 ☠️ ☠ 🚫
78 <!-- Home --> 🍽️ 🍴 🛏️ 🛀 🚽 🏠 🚗
80 <!-- Work --> 🔧 🛠️ ⚙️ 🤖 🛗 🖥️ 🪛
81 <!-- Elements --> 🌡️ 🕒 ⏰ 💨 ☀️ 🌒 🌙 🔆 🌞 ⏳ ⭐ ✨ 💫 ❄️
82 <!-- Security --> 🔑 🔒 🔐 🛡️ ⚔️
83 <!-- Multimedia --> 📹 📽️ 🎥
84 <!-- Geometry --> ■ ▲ ● ◆
87 <textarea id=
"labeltext" style=
"width:100%; height: 20em;" oninput=
"document.getElementById('labeltable').innerHTML=document.getElementById('labeltext').value;"></textarea>
88 Use CTRL+S to save whole tool including your changes to your computer. CTRL+P to print.
<br />
89 <button onclick=
"document.getElementById('labeltable').innerHTML=document.getElementById('labeltext').value;">Generate
</button>
90 <button onclick=
"window.print();return false;">Print
</button>
99 <td>🔌<br />Living Room
</td>
100 <td>🔌<br />Bedroom
</td>
101 <td>💧<br />Washing Machine
</td>
102 <td>💡<br />Hall Lights
</td>
103 <td>💧<br />Kitchen Counter
</td>
104 <td>💧<br />Dish Washer
</td>
105 <td colspan=
3>🔥<br />Kitchen Oven
</td>
106 <td colspan=
3>⚡<br />Surge Protector
</td>
112 <td>🔌<br />Obývák
</td>
113 <td>🔌<br />Pokoje
</td>
114 <td>💧<br />Koupelna Pračka
</td>
116 <td>💧<br />Kuchyně Linka
</td>
117 <td>💧<br />Kuchyně Myčka
</td>
118 <td colspan=
3>🔥<br />Kuchyně Sporák
</td>
119 <td colspan=
3>⚡<br />Svodič přepětí
</td>
126 <td>🔌<br />Vchod
</td>
127 <td>🔌<br />Předsíň
</td>
128 <td>🛠️<br />Režie
</td>
129 <td>💡<br />Světla Kuchyně
</td>
130 <td>💡<br />Světla Koupelna
</td>
131 <td>💡<br />Světla Obývák
</td>
132 <td>💡<br />Světla Pokoje
</td>
133 <td>💡<br />Světla Předsíň
</td>
134 <td colspan=
3>💡<br />Světla Předsíň
<br />Bezdrátové Relé
</td>
142 <table class=
"indexed">
145 <td><small>Very long and tiny text that is really important to have on your breaker box!
</small></td>
146 <td>Warning!
<small><small>Very long and tiny text that is really important to have on your breaker box!
</small></small></td>
147 <td><b>Bold
</b> <i>Italic
</i> <u>Under
</u></td>
152 <td colspan=
"6">⚠️<br />Colspan is not breaking the numbering scheme
</td>
177 <table class=
"indexed fancyindex">
199 <script>document.getElementById('labeltext').value=document.getElementById('labeltable').innerHTML.replace(/<.?tbody
>/g,
"").trim();
</script>