Mr. Patchwork: diktengleiche schriftsatzabbildung mit antialiasing

hallo forumsleser(innen)!

ich suche für ein webprojekt derzeit eine lösung, wie ich eine
schriftart diktengleich (also wie bei <pre>) darstellen und mit
einem grafikprogramm mit antialiasing erzeugen kann.
herauskommen soll eine bilddatei mit diesem schriftsatz, aller-
dings nicht so pixelig wie normalen html-texten, deshalb sind
tabellen (in html) als screenshot-vorlagen für die grafik auch
ungeeignet.

wer kennt zu diesem problem eine praktikable lösung, diverse sw-
produkte, die solche sachen können oder hat eine idee?

viele grüße,
mr. patchwork

ps: es soll am ende so ähnlich wie die windows-zeichentabelle aus-
sehen, nur ohne zellenumrahmungen und mit antialiaster schrift.

  1. Hi!

    ich suche für ein webprojekt derzeit eine lösung, wie ich eine
    schriftart diktengleich (also wie bei <pre>) darstellen und mit
    einem grafikprogramm mit antialiasing erzeugen kann.
    herauskommen soll eine bilddatei mit diesem schriftsatz, aller-
    dings nicht so pixelig wie normalen html-texten, deshalb sind
    tabellen (in html) als screenshot-vorlagen für die grafik auch
    ungeeignet.

    Wolltest du die Tabelle benutzen, um den Text in eine Art Blocksatz zu bringen? Oder willst du eine "Schriftart" aus Grafiken erzeugen, bei der du dann die Buchstaben aneinandersetzt?
    Eine Diktengleiche Schriftart ist zum Beispiel schon mal Courier New (auf dem Mac einfach nur courier). Mit Paintshop Pro kannst du den Text/die Buchstaben mit Antialiasing versehen (hier kannst du ja größere Texte eingeben).

    MfG Simon

    1. hi simon!

      Wolltest du die Tabelle benutzen, um den Text in eine Art Blocksatz zu bringen?

      ja, so in etwa, allerdings handelt es sich nicht um text, sondern wirklich nur die buchstaben/zeichen des jeweiligen schriftsatzes.

      Oder willst du eine "Schriftart" aus Grafiken erzeugen, bei der du dann die Buchstaben aneinandersetzt?

      nein, es soll lediglich eine abbildung des jeweiligen schriftsatzes entstehen, also wie die zeichentabelle in windows, nur ohne die ganzen zellumrahmungen und mit antialiasing.

      viele grüße,
      mr. patchwork

      1. Hi,

        Noch ne Rückfrage:

        Der Zeichensatz, den du in der genannten Form darstellen willst, ist seiner Natur nach aber proportional? Müssen Unterschneidungen etc in der Tabelle berücksichtigt werden?

        Liebe Grüße, eine vom altgriechischen Zeichensätze gepeinigte Teilnehmerin

        1. hi uschi!

          Noch ne Rückfrage:

          Der Zeichensatz, den du in der genannten Form darstellen willst, ist seiner Natur nach aber proportional?

          Ja, es wird sich dabei sowohl um proportionale als auch diktengleiche schriftarten handeln (also nicht nur eine einzige), die darstellung ist deshalb in einer tabelle soweit auch ganz gut, wären da nicht die ausgefransten buchstaben.

          Müssen Unterschneidungen etc in der Tabelle berücksichtigt werden?

          naja, wenn unterschneidungen höher- bzw. tiefergestellt oder etwas ähnliches meint, dann ist es nicht unbedingt pflicht, aber ganz nett wäre es trotzdem.

          viele grüße,
          mr. patchwork

          1. rehi mr. patchwork

            Ja, es wird sich dabei sowohl um proportionale als auch diktengleiche schriftarten handeln (also nicht nur eine einzige), die darstellung ist deshalb in einer tabelle soweit auch ganz gut, wären da nicht die ausgefransten buchstaben.

            das sieht nach ziemlich viel arbeit aus.

            Müssen Unterschneidungen etc in der Tabelle berücksichtigt werden?

            naja, wenn unterschneidungen höher- bzw. tiefergestellt oder etwas ähnliches meint, dann ist es nicht unbedingt pflicht, aber ganz nett wäre es trotzdem.

            habe ich nicht gemeint, oder jedenfalls nicht allein. Es geht die Ober- und Untrlänge der Buchstaben.

            du könntest, wenn es nicht gerade sehr viele fonts sind, vielleicht folgendes tun:

            aus jedem buchstaben eine einzelne grafik erzeugen. die grafiken an sich hätten die gleiche größe, aber
            die Grundlinie bei sowas wie a ist der Maßstab für solche Buchstaben mit Ober-oder Unterlängen. Um das hinzukriegen
            müßtest du dir in deinem Grafikprogramm hilfslinien erstellen.

            Ich habe das mal für einen metrischen Zeichensatz gemacht, mit flash 3, aber das geht in jedem Grafikprogramm
            War allerdings ne Schweinearbeit.

            Wozu dient das ganze?

            uschi

            1. rehi uschi!

              du könntest, wenn es nicht gerade sehr viele fonts sind, vielleicht folgendes tun:

              aus jedem buchstaben eine einzelne grafik erzeugen. die grafiken an sich hätten die gleiche größe, aber
              die Grundlinie bei sowas wie a ist der Maßstab für solche Buchstaben mit Ober-oder Unterlängen. Um das hinzukriegen
              müßtest du dir in deinem Grafikprogramm hilfslinien erstellen.
              War allerdings ne Schweinearbeit.

              ja genau, ist mir leider zuviel arbeit, da es nicht nur um einen einzelnen speziellen schriftsatz geht, sondern um viele verschiedene.

              Wozu dient das ganze?

              stark vereinfacht ausgedrückt, eine online-zeichentabelle, wobei dies die ganze sache nur so ungefähr beschreibt.

              viele grüße,
              mr. patchwork

  2. Hallo Stefan! hm... Mr. Patchwork ;-)

    ich suche für ein webprojekt derzeit eine lösung, wie ich eine
    schriftart diktengleich (also wie bei <pre>) darstellen und mit
    einem grafikprogramm mit antialiasing erzeugen kann.

    Hm....auch wenn ich den Thrad jetzt durchgelesen habe, mag sein das ich dein Problem nicht verstanden habe; aber

    Du nimmst dein Grafikprogramm, schreibst du die Buchstaben in der Größe wie du es haben möchtest (manche Programme machen schon hier antialising), laßt du den Text rendern (manche Programme brauchen das) dann markierst du die Buchstaben und verwendest das Gaussche-weichzeichnen mit einem Wert unter 1 (sollte reichen).
    Das müsste dann es gewesen sein.

    wer kennt zu diesem problem eine praktikable lösung, diverse sw-
    produkte, die solche sachen können oder hat eine idee?

    Fireworks, Photoshop, PicturePublisher, PaintShop etc....

    Grüße
    Thomas

    1. hallo meta-thomas!

      Du nimmst dein Grafikprogramm, schreibst du die Buchstaben in der Größe wie du es haben möchtest (manche Programme machen schon hier antialising), laßt du den Text rendern (manche Programme brauchen das) dann markierst du die Buchstaben und verwendest das Gaussche-weichzeichnen mit einem Wert unter 1 (sollte reichen).
      Das müsste dann es gewesen sein.

      bei courier ist da tatsächlich das ziel erreicht, nur will ich eben auch schriftsätze wie arial, verdana oder wingdings diktengleich darstellen (deshalb der vergleich mit der zeichentabelle von windows), das grafikprogramm bzw. eine andere praktikable lösung muß die ganzen buchstaben (es sind in der zeichentabelle genau 32*7 stück) in einer art spalten bzw. zeilen darstellen, egal wie breit der jeweilige buchstabe ist.

      Fireworks, Photoshop, PicturePublisher, PaintShop etc....

      weißt du, wie obengenanntes problem mit psp, photoimpact oder fireworks lösbar ist?
      (die erzeugung vieler einzelner grafiken, siehe antwort an uschi, scheidet dabei aus.)

      viele grüße,
      mr. patchwork

      1. Hallo Stefan!

        das grafikprogramm bzw. eine andere praktikable lösung muß die ganzen buchstaben (es sind in der zeichentabelle genau 32*7 stück) in einer art spalten bzw. zeilen darstellen, egal wie breit der jeweilige buchstabe ist.

        Jetzt habe ich  verstaden! ;-)

        weißt du, wie obengenanntes problem mit psp, photoimpact oder fireworks lösbar ist?

        (die erzeugung vieler einzelner grafiken, siehe antwort an uschi, scheidet dabei aus.)
        »

        Eine kombination von Freehab und Firewoks kann ich dir anbieten:

        Den Text mit in der gewünschten Schriftart in Freehand eintippen:
        bei den Textoptionen  (im toolfenster unter "A" gibts die nötige optionen -->bild raster1) solltest und kannst du die nötige anzahl von Zeilen und Spalten einstellen, dann tippst du deine Buchstaben ein.
        Jetzt nimmst du aus der Menü: Modify --> Rasterize; hier kannst du dann die auflösung und auch das Antialiasing-Maß einstellen. Somit hast du ein festes Bild -->bild raster2)
        Datei Speichern als Freehanddukument.

        Diese öffnest du dann im Fireworks: erstellst du die nötige "slicing" über das Bild.
        Jetzt auf das Menu File-->export --> next: hier stellt du für HTML das generic Format ein. Andere Optionen etc anpassen (es gibt im Firewoks dafü ein Tutorial)
        Abspeichern: fertig ist die Tabelle mit gleichgroßen Bildern als HTML-Datei.

        Wenn du für das Zerschneiden des Bildes ein anderes Programm nimmst, ist deine Sache ;-)

        Grüße
        Thomas

        <img src="../src/raster1.gif" width="352" height="366" alt="" border="0">

        <img src="../src/raster2.gif" width="222" height="217" alt="" border="0">

        1. hi tjs!

          danke für deinen vorschlag, nicht schlecht die idee, nur bei etlichen schriftsätzen artet es auch in arbeit aus <g>
          also werde ich einfach eine normale html-tabelle mit richtiger schrift bauen, per css möglichst großen schriftgröße definieren (da stellt der ie5 die ränder der schriften auch recht glatt dar), dann screenshot, diese grafik skalieren und etwas bearbeiten, fertig ist die grafik!

          siehe auch http://www.silverclock.de/ttf/gif/comicsansms.gif (21 kB),wobei ich auf die identische breite aller spalten verzichtet habe.

          viele grüße und besten dank für deine mühen,
          mr. patchwork

          1. Hallo Stefan!

            danke für deinen vorschlag, nicht schlecht die idee, nur bei etlichen schriftsätzen artet es auch in arbeit aus <g>

            *grrrr* ...entschuldige,aber du hast nicht gesagt, daß das ganze nur 10 Sekunden dauern darf! ;-)

            siehe auch http://www.silverclock.de/ttf/gif/comicsansms.gif (21 kB),wobei ich auf die identische breite aller spalten verzichtet habe.

            Wenn du schon mit dem IE5 das machst kannst du alles via CSS bestimmen:

            td { width:25px; height:25px; text-align:center; }etc.

            Tip: http://www.unet.univie.ac.at/~a9105535/forum/schriftart-tabelle.html

            Grüße
            Thomas

  3. hi,

    ps: es soll am ende so ähnlich wie die windows-zeichentabelle aus-
    sehen, nur ohne zellenumrahmungen und mit antialiaster schrift.

    warum machst du dann nicht einen screenshot von der zeichentabelle und bearbeitest diesen. du musst ja nicht die windows-zeichentabellen nehmen, hier gibt es bestimmt bessere Lösungen, die auch eine andere darstellung beherschen. ich habe mal die von www.alexdg.com benutzt.

    = Flo

  4. Hi nochmal,

    wie wärs, wenn du die zeichen mit einem tab (tabulator) trennst. Dann sind alle Buchstaben auf gleicher höhe, egal, wie breit sie sind.
    Der Text wird dann zwar ganz schön breit, aber arbeit sparst du damit allemal. die großen zwischenräume kannst du ja später entfernen.

    MfG Simon