nicht angemeldet
WYIWYG Editor für Print mit HTML/CSS-->möglich?
0 Tabellenkalk
1 0
WYIWYG Editor für Print mit HTML/CSS-->möglich?
Hi zusammen,
ich möchte so ne Art Online-Version eines "Mini-Word" programmieren. D.h. man soll ein Format auswählen können (z.B. DIN A 4) und dann eine Seite über einen WYSIWYG-Editor gestalten können. Die DIV, die als WYSIWYG-Editor herhalten soll, müsste - damit der Ausdruck auch später genauso aussieht wir am Bildschirm - genau die Maße des gewählten Formats haben (z.B. eben DIN A4).
Hat jemand einen Tipp, wie man an diese Sache von Seiten CSS ran geht? Welche Maße muss die DIV haben, damit ich z.B. genau eine DIN A4 Seite hab?
Beim Druck hab ich ja normalerweise 300 dpi und am Bildschirm 72...d.h. wie geh ich damit um? Bin für jeden Tipp dankbar. Evtl. gibt es ja jemanden, der sowas schon mal umgesetzt hat...
Viele Grüße
Daniel
-
Hallo,
Welche Maße muss die DIV haben, damit ich z.B. genau eine DIN A4 Seite hab?
Vermutlich genau die Maße eines DIN-A4-Blattes
Beim Druck hab ich ja normalerweise 300 dpi
oder z.B. 150, 600 oder 1200
und am Bildschirm 72.
oder z.B. 99,06 ppi, 118 ppi, 264 ppi, 306 ppi, 329,65 ppi.
Gruß
Kalk -
WYIWYG Editor für Print mit HTML/CSS-->möglich?
Sicher ist das möglich, siehe z.B. Vistaprint.
ich möchte so ne Art Online-Version eines "Mini-Word" programmieren.
Viel Erfolg, Du hast Dir eine nicht ganz triviale Aufgabe ausgesucht ;-)
D.h. man soll ein Format auswählen können (z.B. DIN A 4) und dann eine Seite über einen WYSIWYG-Editor gestalten können. Die DIV, die als WYSIWYG-Editor herhalten soll,
Ich vermute mal, Du sprichst von "contenteditable"? Das ist womöglich eine mögliche Strategie, an das Thema ranzugehen. Habe ich mich aber noch nicht näher mit beschäftigt. Irgendwie wirst Du dann im Browser einen "Abzug" von der Darstellung generieren müssen. Oder evtl. serverseitig das generierte Markup (z.B. mittels PhantomJS) rendern. Eine andere Strategie wäre Canvas.
müsste - damit der Ausdruck auch später genauso aussieht wir am Bildschirm - genau die Maße des gewählten Formats haben (z.B. eben DIN A4).
Nein. Du musst im selben Seitenverhältnis denken, was sämtliche Maßangaben angeht, damit Du eine vernünftige Visualisierung hinbekommst. Sonst wird Dein Editor eine Briefmarke viel zu klein und ein Plakat viel zu groß darstellen.
Hat jemand einen Tipp, wie man an diese Sache von Seiten CSS ran geht?
Wenn ich die Frage so lese, möchte ich Dir evtl. von der ganzen Aktion abraten, Du hast da echt viel vor Dir.
Welche Maße muss die DIV haben, damit ich z.B. genau eine DIN A4 Seite hab?
Maße im passenden Seitenverhältnis zu DIN-A4, die den Viewport bestmöglich ausfüllt.
Beim Druck hab ich ja normalerweise 300 dpi und am Bildschirm 72...d.h. wie geh ich damit um?
Auch hier geht es um Verhältnismäßigkeiten. Optimalerweise findest Du einen Weg, bei dem DPI nur für Pixeldaten relevant ist. Wenn Du z.B. Texte als Vektordaten setzt, gibt es ja gar keinen DPI-Wert.
Evtl. gibt es ja jemanden, der sowas schon mal umgesetzt hat...
Ja ;-)
-
Hi
Die DIV, die als WYSIWYG-Editor herhalten soll, müsste - damit der Ausdruck auch später genauso aussieht wir am Bildschirm - genau die Maße des gewählten Formats haben (z.B. eben DIN A4).
Nein. Wohl jeder Browser berücksichtigt einen nicht-druckbaren Rand. Beim Firefox kannst du den einstellen: about:config und dann "margin". Wenn du alle Ränder auf 0 stellst, werden Zeichen beim Drucken abgeschnitten, weil kaum ein Drucker A4 vollflächig drucken kann, er benötigt einen Rand.
Welche Maße muss die DIV haben, damit ich z.B. genau eine DIN A4 Seite hab?
Das ist von Browser zu Browser unterschiedlich. Definiere mal ein solches div mit Höhe und Breite und gib ihm border. Dann schau, ob "border" vollständig auf die Seite passt. Wenn ja, hast du die Einstellung für deinen Browser und deinen Drucker gefunden.
Du kannst natürlich auch einen großzügig bemessenen Rand nehmen, PDF macht das zum Beispiel.
Beim Druck hab ich ja normalerweise 300 dpi und am Bildschirm 72...d.h. wie geh ich damit um?
Das habe ich auch nie kapiert. Wenn ich druckbare HTML-Seiten definiere, gebe ich die Maße in mm an. Das kann ich mit einem handelsüblichen Lineal kontrollieren. Druckfachmänner haben vielleicht ein Lineal mit Punkten (pt).
Bin für jeden Tipp dankbar. Evtl. gibt es ja jemanden, der sowas schon mal umgesetzt hat...
Ich drucke seit Jahren nahezu alles per HTML Seite. Visitenkarten, Flyer mit Falzmarken, jede Menge Papier in Kundenprojekten.
Ich habe mich auf den Firefox spezialisiert, der auch bei Kunden eingesetzt wird. Er rendert die Bildschirm-Anzeige anders als den Druck. Das heißt, es passen unterschiedlich viele Zeichen auf eine Zeile. Erfreulicherweise zeigt die Druckvorschau das auf Ppaier zu erwartende Ergebnis. Ausgenommen den Rand, den der Drucker selbst noch dazudichtet.
Ich arbeite mit dem Text-Editor Geany und prüfe das Ergebnis immer wieder mit der Druckvorschau.
Try and error, nur so geht es.
Linuchs