HTML und CSS Parsen und einfügen

MKK · Sonntag 17. April 2005, 10:37

Hallo!
Die Suchfunktion hat mir schon ein bisserl geholfen. HTMLParser scheint das zu sein was ich suche.
Mit cdm CSSParser von http://cthedot.de/cssutils/ kann ich auch schon *.css Files in ein vernünftiges Format bringen.

Nun frage ich aber: Hat von euch schon mal wer folgendes ausprogrammiert?

1. css file parsen
2. html file parsen
3. nun sollen die css infos im html file beim entsprechenden Tag reincodiert und als neues file abgespeichert werden (um die externe referenz nicht mehr zu benötigen)

Das heißt - das Dokument sieht nun (halbwegs) gleich aus wie das original mit dem externen Stylesheet verlinkte, da die css-tags in den HTML Tags drinnen stehn.

Das passiert:
CSS-File:
table {
border: 4px ridge #008000;
padding-left: 8;
padding-right: 2;
padding-top: 13;
padding-bottom: 4;
background-color: #FFFF00;
font-family: Arial;
font-size: 14pt;
font-weight: bold;
}

HTML Ausgangs-File:
<table>

Ergebnis
<table style="border: 4px ridge #008000;......>

Falls es schon Bemühungen in diese Richtung gab, bitte mir mitteilen!

Auch Tips wie ich das einfacher machen könnte nehme ich genre entgegen!

LG
Martin

BlackJack · Sonntag 17. April 2005, 23:55

Einfacher dürfte es sein, das CSS so wie es ist in den <head> einzubetten anstatt es auseinander zu pflücken und an jedes Tag die Information zu heften. Das sollte auch die Datei nicht so unheimlich aufblähen.

gerold · Montag 18. April 2005, 11:17

MKK hat geschrieben: 3. nun sollen die css infos im html file beim entsprechenden Tag reincodiert und als neues file abgespeichert werden (um die externe referenz nicht mehr zu benötigen)
[...]
Auch Tips wie ich das einfacher machen könnte nehme ich genre entgegen!
Martin

Hallo Martin!

Wie BlackJack bereits schrieb, kannst du die Style-Definitionen in den HEAD deiner HTML-Seite einbinden. Das geht recht einfach und sieht in etwa so aus:

Code: Alles auswählen

<html>
<head>
   <title>Das ist der Titel</title>
   <style>
      p {
         font-family: arial, helvetica, sans-serif;
      }
   </style>
</head>
<body>
   <p>
      Das ist der Body
   <p>
</body>
</html>

Wenn du dir sicher sein kannst, dass es noch keinen STYLE-Tag im HEAD-Bereich gibt, dann sollte es recht einfach sein, diesen oberhalb des abschließenden </head>-Tags zu platzieren.

Das könnte dann so aussehen:

Code: Alles auswählen

#!/usr/bin/env python
# -*- coding: utf-8; -*-

original_html = \
"""<html>
<head>
   <title>Das ist der Titel</title>
</head>
<body>
   <p>
      Das ist der Body
   <p>
</body>
</html>
"""

styledef = \
"""
   <style>
      p {
         font-family: arial, helvetica, sans-serif;
      }
   </style>
"""

fundstelle = original_html.lower().find("</head>")
if fundstelle > -1:
   neu_html = \
      original_html[:fundstelle-1] + \
      styledef + \
      original_html[fundstelle:]
else:
   raise StandardError, "Abschliessenden HEAD-Tag nicht gefunden"

print neu_html

mfg
Gerold

XT@ngel · Montag 18. April 2005, 12:21

Hi,
Kann BlackJack nur recht geben, macht eigentlich keinen sinn was Du da machen willst.
aber wenn du es wirklich so haben willst, würd ich den XML Sax parser nutzen.

Da hast du die Möglichkeit die aktuelle Position des Parser im Dokument festzustellen.
Also suchst nach allen XML Elmenten merkst dir die Position und Name evtl Werte von id und class.

Dann zerlegst du deine CSS Datei (Dictionary) und fügts die Werte einfach hinten an.

MfG
Andreas

Gast · Dienstag 19. April 2005, 11:05

Hi!
Ich habe leider vergessen euch zu sagen warum cih das so machen möchte.

Ich möchte einen neuen ContentType für Plone erstellen, der dann im Contentbereih angezeigt wird. Das wird dann ein ganz normales Dokument, jedoch kann es auch formatierungen aus einem externen CSS übernehmen.

Beim Dokument, welches in Plone angzeigt wird, wird klarerweise der Header weggeschnitten. Also auch keine Formatierungen auf diesem Wege möglich.

Gibt's dazu Tipps?

MKK · Dienstag 19. April 2005, 11:49

Das da oben war ich.... sollte mich auch einloggen.

jens · Dienstag 19. April 2005, 12:30

Anonymous hat geschrieben:Beim Dokument, welches in Plone angzeigt wird, wird klarerweise der Header weggeschnitten. Also auch keine Formatierungen auf diesem Wege möglich.

Naja, du kannst do auch das CSS nach dem Header laden... Ist zwar evtl. nicht standartkonform, aber viel einfacher...

MKK · Dienstag 19. April 2005, 13:04

jens hat geschrieben: Naja, du kannst do auch das CSS nach dem Header laden... Ist zwar evtl. nicht standartkonform, aber viel einfacher...

naja. sonderlic schön find ich das aber nicht

Außerdem wirkt sich dann die CSS Formatierung ja auf die ganze Seite aus, und nciht nur auf das Dokument (welches in der Setie in einem Bereich dargestellt wird)

ich muß das leider so umständlich machen - bin aber schon eher ein "Python-Ei".

Meine igentliche Frage ist jetzt:
Wie würdet ihr das denn lösen? die CSS Files sind ja immer anders. Das heißt, ich lese das CSS File aus und muß dann den "Namen" und die "Formatierungsinfos" wo zwischenspeichern und dann an den Stellen im HTML File einfügen. Wie gehe ich denn am besten vor?
Ein 2-dimensionales Array? Wo immer Name und Formatierung "zusammen" steht. dann könnte ich mit einer Schleife das HTML File pro "Array-Zeile" durchforsten und ie Formatierungen einfügen. oder kamma das nicht irgendwie besser/einfacher machen?

jens · Dienstag 19. April 2005, 14:07

Bei komplizierten CSS ist das ganze nicht wirklich einfach.

Wie willst du Überschreibung/Vererbung behandeln?

Schau dir mal die Seite an, dann siehst du was möglich ist:
http://jendryschik.de/wsdev/einfuehrung/css/kaskade

MKK · Dienstag 19. April 2005, 14:59

jens hat geschrieben:Bei komplizierten CSS ist das ganze nicht wirklich einfach.

Wie willst du Überschreibung/Vererbung behandeln?

Schau dir mal die Seite an, dann siehst du was möglich ist:
http://jendryschik.de/wsdev/einfuehrung/css/kaskade

Ich weiß schon, daß man damit viel mehr machen kann als ich jetzt beachte. Aber für "einfachere" Dokumente, bzw. Webseiten sollte das was ich vorhabe reichen.

Bis jetzt habe ich zu Testzwecken so etwas ausprobiert:

Code: Alles auswählen

#File Opener for String replacement
def openHTML(filename,writefile):
  fileObject = open(filename,"r")
  outputFile = open(writefile,'w')
  dict = {"table":"table style=\'border: 4px ridge #008000; padding-left: 8; padding-right: 2; padding-top: 13;\'"} #dictionary with test-elements
  
  for s in fileObject.xreadlines(): #for each line in the file do...
    outputFile.write(s.replace('table',dict.get('table'))) 
  fileObject.close()
  outputFile.close()
  
openHTML('test.htm','temp.html')

Ok, nun müsste ich ein Dictionary verwenden, wo die einzelnen Elemente des CSS drinnen stehen. Das schaffe ich schon noch. Aber wie sieht die Schleife aus, die das Dictionary immer wieder ausliest, solange lemente vorhanden snid?

Leonidas · Dienstag 19. April 2005, 15:37

MKK hat geschrieben:Ok, nun müsste ich ein Dictionary verwenden, wo die einzelnen Elemente des CSS drinnen stehen. Das schaffe ich schon noch. Aber wie sieht die Schleife aus, die das Dictionary immer wieder ausliest, solange lemente vorhanden snid?

Mal ein ultrakurzes Snippet:

Code: Alles auswählen

d = {'Python': 'hybrid', 'Haskell': 'funktional', 'BASIC': 'unlogisch'}
for i in d.keys():
    print i, d[i]

MKK · Mittwoch 20. April 2005, 09:15

Danke für das snipped!
Nun gehts weiter

Ich lese aus einem File zeile für Zeile aus, möchte diese verändert in eine neue Datei schreiben. Die "replacements" kommen aus einem Dictionary.

Code: Alles auswählen

def openHTML(filename,writeFile):
  dict = {"<table":"<table style=\'border: 4px ridge #008000; padding-left: 8; padding-right: 2; padding-top: 13; padding-bottom: 4; background-color: #FFFF00; font-family: Arial; font-size: 14pt; font-weight: bold;\'","<a":"<a style=\'text-decoration: underline; font-size: 10px; font-family: Arial; font-weight: bold\'"} #dictionary with test-elements
  fileObject = open(filename,"r")
  inputFile = open(writeFile,"w")
  
  while 1:
    s = fileObject.readline() #for each line in the file do..
    if not s: break
    for i in dict.keys(): #for each elem in dict 
        f = s.replace(i,dict[i]) #replaced string
    inputFile.writelines(f) #write new string to file    
  inputFile.close()
  fileObject.close()
  #print allLines
  #return allLines
openHTML('test2.htm','temp.html')

Folgendes Problem tritt auf;
Es wird Zeile für zeile eingelesen und geschrieben. Beim zweite Durchlauf (weil das Dictionary zwei Paare beinhaltet), wierden die zuvor ersetzten zeilen wieder zurückgesetzt, weil neu aus dem File ausgelesen und in das neue File eingefügt.

Code snipped welches das lösen sollte

Code: Alles auswählen

  while 1:
    s = fileObject.readline() #for each line in the file do..
    if not s: break
    for i in dict.keys(): #for each elem in dict 
        f = s.replace(i,dict[i]) #replaced string
        inputFile.writelines(f) #write new string to file    
  inputFile.close()
  fileObject.close()

Nun wird mir jedoch jede zeile doppelt in das File geschrieben -> einmal ersetzt und einmal nicht ersetzt (beim zweiten Dictionary Durchlauf).

Kann ich nicht Zeile für Zeile auslesen und jede Zeile auf alle Dictionary Eintröge überprüfen und dann in das File schreiben? Wo muß ich das writelines oder write absetzen?

MKK · Mittwoch 20. April 2005, 09:31

I got it! (verdammt, da poste ich, lese mir das im Forum noch einmal durch und komm slber drauf)

Code: Alles auswählen

while 1:
    s = fileObject.readline() #for each line in the file do..
    if not s: break
    for i in dict.keys(): #for each elem in dict 
      s = s.replace(i,dict[i]) #replaced string
    inputFile.write(s) #write new string to file

jens · Mittwoch 20. April 2005, 09:41

Probier besser mal das:

Code: Alles auswählen

for s in fileObject.readline() #for each line in the file do..
    for i in dict.keys(): #for each elem in dict
      s = s.replace(i,dict[i]) #replaced string
    inputFile.write(s) #write new string to file