Coder Welten

Tkinter: Formatierte Ausgabe von HTML-Seiten

HTML parsen und in einem Tkinter Text-Widget ausgeben

Übersicht / Seite:

HTML-Formatparser (Vorwort zur Beschreibung)
HTML-Formatparser Klasse (Das Script mit der Klasse Formatparser)
Ausgewählte Beispiele (Beispiele für Notierungen im HTML-Quelltext)
Beispiel Quelltext (Ein längeres Beispiel für erste Tests)

Tkinter ist bei Python-Einsteigern beliebt, gehört diese GUI doch zur Standardinstallation von Python und erste Fensteranwendungen lassen sich schnell mit den zugehörigen Widgets für Frames, Labels, Buttons und Text erstellen. Doch was ist, wenn ein einfaches Text-Widget mit einer unformatierten Ausgabe von Text den sich weiter entwickelnden Ansprüchen eines Programmierers nicht mehr genügen sollte?

Nicht jedem Einsteiger ist möglicherweise bekannt, dass Tkinter eigens zu diesem Zweck für Text-Widgets die Möglichkeit bietet, einen Text mit tag_config individuell Tag für Tag zu gestalten und dass bei einer Standardinstallation Python seinerseits einen einfachen HTMLParser als Modul im Gepäck hat. Alles was ein Programmierer zusätzlich noch erledigen muss, um eine HTML-Seite einzulesen und formatiert in einem Text-Widget auszugeben, besteht in der Aufgabe, die Tkinter-Tags mit den HTML-Tags und CSS-Klassen abzugleichen. Auf dieser und den nachfolgenden Seiten zeigen wir, wie so eine formatierte Ausgabe und ein darauf zugeschnittenes Script aussehen könnten.

Nachfolgend ein Screenshot von einer formatierten Ausgabe einer als Vorlage dienenden HTML-Seite in einem Tkinter Text-Widget (Textfeld), bei dem die Tags von Tkinter auf die im Quelltext der HTML-Seite vorkommenden HTML-Tags abgestimmt wurden. Unter dem Screenshot folgt der Quelltext der verwendeten HTML-Seite.

Ansicht einer formatierten HTML-Ausgabe in einem Tkinter Text-Widget

Von den in der HTML-Seite verwendeten CSS Styles wurden die CSS-Klassen "boldbraun", "mittig", "bildnotizen", "quotes" und "zitate" übernommen und als Tkinter-Tags in der auf der nächsten Seite folgenden Formatparser-Klasse nachgebildet. Ausschlaggebend sind dabei weder die Namen der verwendeten CSS Klassen, noch deren Formatierung, sondern nur die Übernahme der Namen für die verwendeten Tkinter-Tags.

Neben diesem Beispiel bieten wir auf der letzten Seite dieses Tutorials noch einen etwas längeren Quelltext für erste Tests an, einschließlich der beiden zugehörigen Testbilder.

Quelltext der verwendeten HTML-Seite (lorem-ipsum.html):

<!DOCTYPE html>
<html>

<head>
  <title>HTML Test</title>
  <style type="text/css">
    body {font-family:cambria; font-weight:normal; font-size:16px}
    div.wrapper{width:668px; padding:12; margin:auto}
    h1 {font-family:cambria; font-weight:bold; font-size:24px}
    h2 {font-family:cambria; font-weight:bold; font-size:20px}
    h3 {font-family:cambria; font-weight:bold; font-size:16px}
    .mittig {text-align:center}
    .bildnotizen {
      font-family:cambria;
      font-style:italic;
      font-size:10px;
      color:#867a44
      }
    .boldgrau {font-weight:bold; color:#404040}
    .boldbraun {font-weight:bold; color:#9b4c21}
    .quotes {background-color:#e6e5da; border:1px solid #ff0000}
    .zitate {
      font-family:cambria;
      font-style:italic;
      font-size:16px;
      text-align:center;
      margin:20px
    }
    @media only all and (max-width:698px) {
      div.wrapper {width:100%}
      img.images {max-width:100%; height:auto}
  </style>
</head>

<body>
  <div class="wrapper">
    <h1>Lorem ipsum</h1>
    <h2>Untertitel</h2>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    diam nonumy eirmod tempor invidunt ut labore et dolore magna
    aliquyam erat, sed diam voluptua.</p>
    <h3>Erster Punkt</h3>
    <p><span class="boldbraun">Lorem ipsum</span> dolor sit amet,
    consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
    ut labore et dolore magna  aliquyam erat, sed diam voluptua.</p>
    <p class="mittig">
      <img src="testbild_1.png" alt="Test" width="240" height="192"
      class="images"><br>
      <span class="bildnotizen">Bild 1: Notizen unterm Bild</span>
    </p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    diam nonumy eirmod tempor invidunt ut labore et dolore magna
    aliquyam erat, sed diam voluptua.</p>
    <div class="quotes">
      <p class="zitate">Lorem ipsum dolor sit amet, consetetur
      sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
      labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    </div>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    diam nonumy eirmod tempor invidunt ut labore et dolore magna
    aliquyam erat, sed diam voluptua.<br>
    <br>
    <em>Stet clita kasd gubergren.<em></p>
  </div>
</body>
</html>

Weiterlesen » HTML-Formatparser Klasse

Navigation

Einstieg in Python

Einführende Übersicht

OOP mit Python

Klassen und Instanzen

Vererbung und Sichtbarkeit

Codes & Tutorials

Weitere Themen

Kleines Projekt

2D-Animationen » new «
Script für animierte Bildsequenzen und Movie-Szenen.