aktuell gibt es im Layout von IP-Symcon zwei unterschiedliche Wege, Styling-Werte zu übergeben:
Farben werden bereits über Root-Variablen konfiguriert und damit dynamisch zur Verfügung gestellt.
Margin- und Font-Einstellungen (Schriftgröße und Abstände) werden hingegen direkt im body-CSS fest hinterlegt.
Vorschlag
Ich würde mir wünschen, dass auch Margin- und Font-Parameter als Root-Variablen bereitgestellt werden, analog zu den Farbwerten.
Begründung
Eine einheitliche Behandlung aller Layout-relevanten Parameter hätte mehrere Vorteile:
Konsistentes Konzept: Alle Styling-Optionen (Farben, Abstände, Schriftgröße) werden über dieselbe Mechanik konfiguriert bzw. bereitgestellt.
Bessere Transparenz: Es ist direkt ersichtlich, welches Font- und Layout-Setup aktiv ist.
Mehr Flexibilität: Anpassungen können dynamisch erfolgen, ohne fest im CSS verankert zu sein.
Vermeidung von Layout-Problemen: Insbesondere bei individuellen Anpassungen (z. B. bei meinem Börsen-Ticker oder kompakte Widgets) kann es sonst zu unharmonischen Darstellungen kommen, wenn feste Schriftgrößen mit individuell angepassten Abständen kombiniert werden.
ich möchte das Thema nochmal mehr Nachdruck verleihen.
Gerade auch im Zusammenspiel mit meiner VS Code Extension wäre das echt ein Traum, sonst ist die Simulation nicht immer 1 zu 1. Damit würde man es aber schaffen!
Besondersd wenn man skalierbare Inhalte darstellen will (Icons, Bilder) ist das echt ein Krampf mit Annahmen usw.
Bitte, bitte gebt wenigsten mal ein Statement ab - Danke!
Wie gerade hier veröffentlicht, habe ich ‚übergangsweise‘ für mich eine Lösung gefunden. Eigentlich macht sie nix anderes wie das HTML-SDK nur … anders
<script>
/* ── Init: Set Root/Syle Variables ───────────────────────────────── */
const p = new URLSearchParams(location.search);
const r = document.documentElement;
const m = {
margintop: ['--margin-top'],
marginside: ['--margin-side'],
marginbottom: ['--margin-bottom']
};
for (const k in m) {
const v = p.get(k);
if (!v) continue; m[k].forEach(c => r.style.setProperty(c, v));
}
/* ── Ab hier können weitere Anweidungen hinterlegt werden. ───────── */
</script>
Dieses kleine Script stellt die Margins als root-Vars bereit, also einfach im css via var(--margin-top) usw. nutzen!
Fände es trotzdem toll wenn man die Sache einmal in der Hand hat - gleich so übergeben zu bekommen!
