In Thunkable im Rich Text die Schrift dicker machen: Wir zeigen, wie es auch ohne HTML-Tags geht!

Willkommen, Thunkable-Entwickler! Sie arbeiten an Ihrer nächsten großartigen App und möchten bestimmte Textpassagen hervorheben, vielleicht einen wichtigen Hinweis fett drucken oder einen Titel deutlicher gestalten. Die Rich Text Komponente in Thunkable ist dafür ideal. Doch dann stoßen Sie auf eine scheinbare Hürde: Wie mache ich Text fett, ohne mühsam HTML-Tags wie <strong> oder <b> manuell eingeben zu müssen? Die gute Nachricht ist: Es gibt einen Weg! In diesem umfassenden Artikel zeigen wir Ihnen Schritt für Schritt, wie Sie die Schrift in Thunkable im Rich Text dicker machen können – und das auf eine Art, die sich anfühlt, als ob Sie ohne HTML-Tags arbeiten würden.

Die Rich Text Komponente in Thunkable verstehen

Bevor wir ins Detail gehen, lassen Sie uns kurz klären, was die Rich Text Komponente in Thunkable eigentlich ist. Im Gegensatz zu einer einfachen Label-Komponente, die nur reinen Text anzeigt, kann die Rich Text Komponente Inhalte interpretieren, die im HTML-Format vorliegen. Das bedeutet, sie kann Formatierungen wie Fett, Kursiv, Unterstrichen, verschiedene Schriftgrößen und -farben sowie Listen und Links darstellen, die in der HTML-Syntax definiert sind.

Diese Fähigkeit ist unglaublich mächtig, da sie Ihnen eine enorme Flexibilität bei der Gestaltung Ihrer Textinhalte bietet. Sie können dynamische Inhalte erstellen, die je nach Kontext unterschiedlich formatiert sind, ohne unzählige einzelne Label-Komponenten verwenden zu müssen. Die Kehrseite ist jedoch, dass Sie, um diese Formatierungen zu nutzen, den Text im HTML-Format bereitstellen müssen. Dies führt uns zu der Frage, wie man die gefürchteten HTML-Tags „vermeiden” kann.

Die „ohne HTML-Tags”-Herausforderung: Was bedeutet das wirklich?

Wenn Sie sagen, Sie möchten Text fett drucken „ohne HTML-Tags”, meinen Sie wahrscheinlich nicht, dass die Rich Text Komponente auf magische Weise weiß, welcher Teil des Textes fett sein soll, ohne dass eine entsprechende Anweisung vorliegt. Die Komponente ist nun mal darauf ausgelegt, HTML zu interpretieren. Was Sie wahrscheinlich meinen, ist:

1. Sie möchten nicht jedes Mal manuell <strong> oder <b> in einem Textfeld tippen müssen.
2. Sie suchen nach einer eleganteren oder „Thunkable-typischen” Lösung mit Blöcken, um den Fettdruck zu erreichen.
3. Sie möchten vielleicht dynamisch entscheiden, welcher Text fett sein soll, ohne statische HTML-Strings zu verwenden.

Das ist ein absolut berechtigtes Anliegen! Die gute Nachricht ist, dass Thunkable uns die Werkzeuge an die Hand gibt, um genau das zu tun. Wir werden die HTML-Tags zwar immer noch verwenden, aber wir werden sie auf eine Weise nutzen, die das manuelle Eintippen überflüssig macht und die Integration in Ihre Logik vereinfacht.

Der Schlüssel: Dynamische HTML-Generierung mit Thunkable-Blöcken

Die zentrale Lösung für unser Problem liegt in der dynamischen Erzeugung des HTML-Strings mithilfe von Thunkable-Blöcken. Anstatt einen festen HTML-String in einem Textblock zu definieren, bauen wir ihn Stück für Stück zusammen. Hier sind die Hauptstrategien, die Sie anwenden können:

Strategie 1: Verwendung des „join”-Blocks zur String-Konkatenation (Die Kernlösung)

Dies ist die einfachste und effektivste Methode, um fette Schrift zu erzeugen, ohne die HTML-Tags direkt in den sichtbaren Text zu tippen. Sie nutzen den join-Block (Verbinden) aus der Kategorie „Text”, um verschiedene Textteile und die notwendigen HTML-Tags zusammenzusetzen. Auf diese Weise tippen Sie die Tags nur einmal in separate Textblöcke und können dann Ihre eigentlichen Inhalte davor, dazwischen und dahinter platzieren.

So funktioniert’s:

1. Ziehen Sie einen join-Block in Ihren Arbeitsbereich. Standardmäßig hat er zwei Slots. Klicken Sie auf das Zahnrad-Symbol, um weitere Slots hinzuzufügen, je nachdem, wie viele Textteile Sie verbinden möchten. Für einen einzelnen fetten Bereich benötigen Sie in der Regel drei Slots: „Öffnender Tag”, „Text zum Fettmachen”, „Schließender Tag”.
2. Fügen Sie in den ersten Slot einen Textblock mit <strong> ein (oder <b>, beide funktionieren für Fettdruck).
3. In den mittleren Slot fügen Sie den Textblock ein, der fett gedruckt werden soll. Das kann ein statischer Text sein, der Inhalt einer Variablen, die Eingabe eines Benutzers oder das Ergebnis einer Funktion.
4. In den dritten Slot fügen Sie einen Textblock mit </strong> ein (oder </b>).
5. Verbinden Sie das Ergebnis dieses join-Blocks mit der Eigenschaft HTML Ihrer Rich Text Komponente.

Beispiel-Szenario: Sie möchten einen Satz anzeigen wie „Das ist ein wichtiger Hinweis für Sie.”

    // Set RichText1's HTML to:
    // "Das ist ein " + "<strong>" + "wichtiger Hinweis" + "</strong>" + " für Sie."

    // Block-Struktur:
    // (set RichText1's HTML to (join
    //     (text "Das ist ein ")
    //     (text "<strong>")
    //     (text "wichtiger Hinweis")
    //     (text "</strong>")
    //     (text " für Sie.")
    // ))

Der Vorteil hierbei ist, dass der eigentliche Text („wichtiger Hinweis”) frei von HTML-Tags bleibt und Sie ihn einfach aus einer Variable oder einem anderen Block einfügen können, ohne sich Gedanken über die Tags machen zu müssen. Die Tags selbst sind statische Bestandteile Ihres Block-Aufbaus.

Strategie 2: Verwendung von Variablen für HTML-Tags (Für mehr Ordnung und Wiederverwendbarkeit)

Wenn Sie dieselben HTML-Tags (z.B. für Fettdruck) an mehreren Stellen in Ihrer App verwenden möchten, kann es sinnvoll sein, sie in Variablen zu speichern. Das macht Ihre Blöcke übersichtlicher und Änderungen globaler.

So funktioniert’s:

1. Erstellen Sie zwei App-Variablen (oder Screen-Variablen), z.B. boldStartTag und boldEndTag.
2. Initialisieren Sie boldStartTag mit dem Wert <strong> und boldEndTag mit </strong>.
3. Wenn Sie nun Text fett drucken möchten, verwenden Sie den join-Block wie in Strategie 1, aber ziehen Sie die Variablen boldStartTag und boldEndTag in die entsprechenden Slots, anstatt direkt Textblöcke mit den Tags zu verwenden.

    // (initialize app variable boldStartTag to (text "<strong>"))
    // (initialize app variable boldEndTag to (text "</strong>"))

    // (set RichText1's HTML to (join
    //     (text "Das ist ein ")
    //     (app variable boldStartTag)
    //     (text "wichtiger Hinweis")
    //     (app variable boldEndTag)
    //     (text " für Sie.")
    // ))

Diese Methode ist besonders nützlich, wenn Sie komplexe HTML-Strukturen aufbauen möchten oder wenn Sie später entscheiden, dass Sie statt <strong> lieber <b> oder sogar einen CSS-Stil verwenden möchten (z.B. <span style="font-weight: bold;">). Sie müssten die Änderung dann nur an einer Stelle (in der Variablendefinition) vornehmen.

Strategie 3: Nutzung externer Funktionen oder Datenbanken (Für dynamischere Inhalte)

Für komplexere Anwendungen, in denen der Inhalt oder die Formatierung aus einer externen Quelle (z.B. einer Datenbank, einer API oder einer Cloud-Tabelle wie Airtable oder Google Sheets) stammt, können Sie die HTML-Formatierung bereits dort hinterlegen. Wenn Sie beispielsweise eine Spalte in Ihrer Airtable-Basis haben, die „Produktbeschreibung” heißt, könnten Sie den Text dort bereits mit HTML-Tags speichern:

<p>Dieses Produkt ist <strong>wasserfest</strong> und <em>langlebig</em>.</p>

Wenn Sie diesen Text dann aus der Datenbank abrufen, weisen Sie ihn einfach direkt der HTML-Eigenschaft Ihrer Rich Text Komponente zu. Hier müssen Sie sich im Thunkable-Editor nicht um die Tags kümmern, da sie bereits Teil des abgerufenen Strings sind. Das ist besonders praktisch für inhaltsgesteuerte Apps.

Anwendungsbereiche: FAQ-Seiten, Produktbeschreibungen, Blog-Posts, Nachrichten-Feeds – überall dort, wo Inhalte zentral verwaltet und dynamisch geladen werden.

Strategie 4: Workaround mit mehreren Label-Komponenten (Wenn wirklich *kein* HTML im String sein soll)

Obwohl dies für eine einzelne Rich Text Komponente, die gemischten Inhalt darstellen soll, nicht optimal ist, sollten wir der Vollständigkeit halber diese Option erwähnen, falls die Definition von „ohne HTML-Tags” extrem wörtlich genommen wird. Wenn Sie *absolut keinen* HTML-Code im Text-String haben möchten, dann ist die Rich Text Komponente möglicherweise nicht die richtige Wahl für alle Anwendungsfälle. Stattdessen könnten Sie:

1. Mehrere Label-Komponenten nebeneinander platzieren.
2. Jeder Label-Komponente einen Teil des Textes zuweisen.
3. Die Schriftstärke (font weight) der gewünschten Labels auf bold setzen.

Nachteile dieser Methode:

• Sehr aufwendig bei längeren Texten oder vielen Formatierungsänderungen.
• Schwierig, den Zeilenumbruch und das Layout präzise zu steuern, da jede Komponente eigenständig ist.
• Nicht geeignet für dynamische Inhalte, bei denen der Ort der Fettdrucks variiert.

Im Kontext der Rich Text Komponente ist diese Methode in der Regel nicht die beabsichtigte Lösung, da sie die Vorteile der Rich Text Komponente – nämlich die Handhabung komplexer Inhalte in einem einzigen Block – zunichtemacht. Dennoch ist es wichtig, die Alternativen zu kennen.

Praktisches Beispiel: Schritt-für-Schritt-Anleitung zur dynamischen Fettschrift

Lassen Sie uns ein konkretes Beispiel durchgehen, um das Konzept zu festigen. Wir erstellen eine einfache App, die einen Begrüßungstext mit einem fetten Namen anzeigt.

Voraussetzungen:

• Ein Thunkable-Konto und ein neues Projekt.

Schritte:

1. Design-Ansicht:
   • Ziehen Sie eine Rich Text Komponente aus der „User Interface”-Sektion auf Ihren Bildschirm. Nennen Sie sie z.B. welcomeRichText.
   • Ziehen Sie ein Text Input Komponente auf den Bildschirm. Nennen Sie sie nameInput.
   • Ziehen Sie einen Button Komponente auf den Bildschirm. Nennen Sie ihn submitButton und setzen Sie seinen Text auf „Begrüßung generieren”.
2. Block-Ansicht:
   • Gehen Sie zum Block-Editor.
   • Finden Sie den when submitButton Click-Block.
   • Innerhalb dieses Blocks ziehen Sie den set welcomeRichText's HTML to-Block.
   • Als Wert für diesen Block verwenden Sie einen join-Block aus der Kategorie „Text”. Klicken Sie auf das Zahnrad und fügen Sie ausreichend Slots hinzu (mindestens 5, wenn Sie Text vor, den fetten Text und Text danach haben).
   • In den ersten Slot ziehen Sie einen Textblock mit dem Inhalt: "Hallo "
   • In den zweiten Slot ziehen Sie einen Textblock mit dem HTML-Tag für den Beginn des fetten Textes: "<strong>"
   • In den dritten Slot ziehen Sie den Block nameInput's Text (den Wert, den der Benutzer in das Eingabefeld eingegeben hat).
   • In den vierten Slot ziehen Sie einen Textblock mit dem HTML-Tag für das Ende des fetten Textes: "</strong>"
   • In den fünften Slot ziehen Sie einen Textblock mit dem restlichen Begrüßungstext: "! Willkommen in unserer App."

Beispiel-Code-Struktur (Pseudocode für Blöcke):

    when submitButton Click do
        set welcomeRichText's HTML to (join
            (text "Hallo ")
            (text "<strong>")
            (get nameInput's Text)
            (text "</strong>")
            (text "! Willkommen in unserer App.")
        )

Wenn der Benutzer jetzt seinen Namen (z.B. „Max Mustermann”) in das Textfeld eingibt und auf den Button klickt, zeigt die Rich Text Komponente den Text an: „Hallo Max Mustermann! Willkommen in unserer App.” ohne dass Sie <strong> manuell in den nameInput's Text-Block tippen mussten. Das HTML wird dynamisch von den Blöcken generiert.

Best Practices und Tipps für Rich Text in Thunkable

• Validierung: Wenn Sie Benutzereingaben direkt in den HTML-String einfügen, sollten Sie überlegen, ob Sie diese Eingaben validieren oder „sanitizen” müssen, um Cross-Site Scripting (XSS)-Angriffe zu verhindern, auch wenn dies in einer rein Thunkable-App (ohne serverseitige Interaktion) weniger kritisch ist.
• Performance: Bei sehr langen oder komplexen HTML-Strings kann die Leistung der Rich Text Komponente beeinträchtigt werden. Halten Sie Ihre HTML-Strukturen so schlank wie möglich.
• CSS-Styling: Für noch mehr Kontrolle über die Formatierung können Sie innerhalb der HTML-Strings auch CSS verwenden. Zum Beispiel <span style="font-weight: bold; color: blue;">Ihr Text</span>. Dies kann auch über Variablen gesteuert werden.
• Wiederverwendbarkeit: Erstellen Sie eigene Funktionen (Prozeduren), um wiederkehrende Formatierungen zu kapseln. Eine Funktion könnte zum Beispiel formatBold(textToBold) heißen und den join-Block für Sie enthalten, sodass Sie nur noch den zu fettenden Text übergeben müssen.

    // Prozedur "formatBold" mit Parameter "input_text"
    // (define procedure formatBold with input_text do
    //     (return (join
    //         (text "<strong>")
    //         (input_text)
    //         (text "</strong>")
    //     ))
    // )

    // Anwendung:
    // (set welcomeRichText's HTML to (join
    //     (text "Hallo ")
    //     (call formatBold with (get nameInput's Text))
    //     (text "! Willkommen in unserer App.")
    // ))

Diese Verwendung von Prozeduren ist der Höhepunkt der „ohne HTML-Tags” Erfahrung, da Sie im Hauptblock nur noch „formatBold” aufrufen und sich gar nicht mehr um die dahinterliegende HTML-Struktur kümmern müssen.

Fazit: Die Macht der dynamischen Gestaltung meistern

Wie Sie gesehen haben, ist die Anforderung, in Thunkable Rich Text die Schrift dicker zu machen, ohne „direkte HTML-Tags” einzugeben, absolut machbar. Die Lösung liegt nicht darin, HTML gänzlich zu eliminieren (denn die Komponente benötigt es ja), sondern darin, die HTML-Tags so zu verwalten, dass sie für den Entwickler unsichtbar oder zumindest automatisiert sind.

Durch die intelligente Nutzung von Thunkable-Blöcken wie dem join-Block, Variablen und sogar eigenen Prozeduren können Sie dynamische und ansprechende Textinhalte erstellen, die genau Ihren Vorstellungen entsprechen. Sie müssen nicht mehr mühsam HTML-Tags tippen, sondern können sich darauf konzentrieren, welche Teile Ihres Textes hervorgehoben werden sollen. Dies macht Ihre App-Entwicklung effizienter und Ihre Benutzeroberfläche professioneller.

Nutzen Sie diese Techniken, um Ihre Thunkable-Apps auf das nächste Level zu heben und Ihren Benutzern ein visuell ansprechendes und informatives Erlebnis zu bieten. Viel Erfolg beim Thunking!