[HTML] Text hochkant (vertikal) schreiben??

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [HTML] Text hochkant (vertikal) schreiben??

    Hi,
    ich komme einfach nicht drauf! Mein Problem:
    Ich bräuchte den Befehl, mit dem es möglich ist, einen Text vertikal zu schreiben.
    Realisieren will ich das dann so, dass neben einem eingeblendeten Werbebanner auf meiner Seite links daneben steht: Advertising. Jedoch eben hochkant, so dass es keinen Platz wegnimmt.
    Ich denke ihr wisst was ich meine

  • #2
    mach hinter jedem Buchstaben ein <br>
    mfg
    Günni


    Praxis: Jeder kann´s, aber keiner weiß wie´s geht...
    Theorie: Jeder weiß wie´s geht, aber keiner kann´s ...
    Microsoft vereint Praxis und Theorie: Nix geht und keiner weiß warum
    City-Tiger - Online durch die Straßen tigern...

    Kommentar


    • #3
      Hi,
      sorry, ich seh schon, ich habe zu wenig erklärt
      Also ich meine so, dass die Buchstaben ebenfalls um 90° nach links gedreht sind. Und es von der Größe ungefähr dem Banner entspricht, also dass die Schriftlänge quasi nicht größer ist als die Höhe des Werbebanners. (<- aber das ist dann wahrscheinlich mein Problem und nich mehr schwer)
      Im angehängten Bild ist das, was ich meine, denke ich gut ersichtlich!
      Angehängte Dateien

      Kommentar


      • #4
        das macht man ganz einfach mit nem bild. afaik geht das in CSS nicht und in HTML erst recht nicht.

        Kommentar


        • #5
          Ok, thx

          Kommentar


          • #6
            Original geschrieben von TobiaZ
            das macht man ganz einfach mit nem bild. afaik geht das in CSS nicht und in HTML erst recht nicht.
            falsch. in css geht das. aber leider nicht in jedem browser.
            INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |


            Kommentar


            • #7
              SVG

              Es geht auch ohne CSS, mit SVG nämlich (Scalable Vector Graphic):

              <?xml version="1.0"?>
              <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

              <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
              <text x="20" y="20" writing-mode="tb-rl"> SVG </text>
              </svg>
              Das ist die Datei, die "SVG" hochkant ausgibt. Du speicherst sie z.B unter dem Namen "test.svg". Um sie in deiner HTML-Seite einzubinden gibst du dann Folgendes ein:

              <object data="test.svg" width="500" height="500" type="image/svg+xml">
              <embed src="test.svg" width="500" height="500" type="image/svg+xml" />
              </object>
              Der Vorteil von SVG ist, dass du nicht für jeden Text ein extra Bild brauchst und auf den Text über das DOM mit javascript ändern kannst. Das geht zwar mit CSS auch, aber SVGs kann man animieren , sodass sich der Text interaktiv ändert.

              Die SVG-Datei hab ich von http://www.selfsvg.info/?section=5.3 Die Methode zum Einbetten kannst du auf http://www.aboutwebdesign.de/awd/con...25537997.shtml nachlesen.
              Es gibt aber momentan noch ein Problem: Der Internetexplorer unterstützt das SVG-Format nur, wenn der Adobe SVG-Viewer installiert ist. Und dann funktioniert die Einbettmethode noch nicht. Und beim Firefox funktioniert zwar die Einbettmethode, aber der Text wird nicht vertikal dargestellt, sondern von rechts nach links.
              Trotzdem finde ich die SVGs super. Es dauert nur noch einige Zeit bis sie praxisreif sind.

              Kommentar


              • #8
                Es funktioniert, wenn du die Datei einbindest (zumindest im Firefox):

                <?xml version="1.0"?>
                <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

                <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
                <text transform="rotate(90, 10, 10)"> SVG </text>
                </svg>

                Kommentar

                Lädt...
                X