PHP-FUSION DEUTSCHLAND
  • DEIN CMS - DEINE ZUKUNFT
Thread Verfasser: Rolly8-HL
Thread ID: 780
Thread Info
Es gibt 11 Beiträge zu diesem Thema, und es wurde 4371 Mal angesehen.  Ausserdem wurden Dateien angehängt.

PHP-Fusion Deutschland - Offizielle Supportseite » Support Allgemein » Infusionen / Mods / Panels

 Thema drucken
Text mit CSS
Rolly8-HL
Top  #1 Beitrag drucken
Geschrieben am 03.03.2016 um 12:47
Hallo, ich suche eine Möglichkeit einen Text Horizontal aus geben zu können, nicht mit 90° verdrehen.

Zitat: Nicht so

HALLO

sondern

H
A
L
L
O

Habe das Netz schon durchsucht und alles Mögliche gefunden, denke das ich es schon mal so gemacht hatte, nur wie?

Hat da jemand eine Idee? oder Hinweis dazu?
Gruß Rolly8-HL
Was für Andere Wichtig ist muss für mich nicht genauso Wichtig sein!
Bin Dickkopf Unbelehrbar mache aus Protest nicht das was andere für Richtig halten!
Das gibt einem zu Denken oder?
 
WWW
John Doe
Top  #2 Beitrag drucken
Geschrieben am 03.03.2016 um 15:36
Es gibt für solche Dinge in der Tat und tatsächlich inzwischen eine CSS3-Deklaration:

writing-mode

Allerdings bin ich mir nicht so wirklich sicher, ob diese Methode auch in allen Browsern funktioniert.

Mögliche Attribute:
lr-tb, rl-tb, tb-rl, tb-lr, bt-rl, bt-lr, lr, rl, tb, inherit

Beispiel:
<div style="writing-mode:lr-tb;">hallo</div>

Du kannst ja mal ein bisschen mit den Werten und Attributen herumspielen, evtl erzielst du damit das von dir gewünschte Ergebnis.

Ansonsten bleibt natürlich auch immer die "einfache" Lösung per HTML und <br />:

<p>
h<br />
a<br />
l<br />
l<br />
o<br />
</p>
Dieses Mitglied wurde gelöscht!
 
WWW
Rolly8-HL
Top  #3 Beitrag drucken
Geschrieben am 03.03.2016 um 18:40
Danke erst ein mal für die Antwort.

Die Methode hatte ich auch schon gefunden, scheint aber veraltet zu sein oder wird nicht vom Browser übernommen.

Die andere Idee geht leider nicht da es sich um ein Text handelt der ausgelesen werden muss und auch keine Leerzeichen enthalten darf.

Mf R8
Gruß Rolly8-HL
Was für Andere Wichtig ist muss für mich nicht genauso Wichtig sein!
Bin Dickkopf Unbelehrbar mache aus Protest nicht das was andere für Richtig halten!
Das gibt einem zu Denken oder?
 
WWW
Manfried
Top  #4 Beitrag drucken
Geschrieben am 03.03.2016 um 21:14
Hallo Rolly,

mit den Writing Modes, die in CSS 3 ja möglich sind, würdest du nicht wirklich weiter kommen, denke ich.
Writing Modes sind primär für den asiatischen Raum konzipiert und würden dein Wort nur um 90° drehen statt die Buchstaben untereinander zu schreiben, was du ja erreichen möchtest. Da ist Layzees "einfache Methode" die bessere und sicherere.

Hier kannst du das genauer nachlesen: Vertical text with CSS 3 Writing Modes

Nachtrag: Sorry, ich hatte deinen Hinweis, dass die "einfache Methode" nicht angewandt werden kann, zu spät gelesen.
Bearbeitet von Manfried am 03.03.2016 um 21:22
Die meiste Zeit des Lebens sucht man seinen Sinn vergebens ...
 
WWW
Rolly8-HL
Top  #5 Beitrag drucken
Geschrieben am 04.03.2016 um 10:29
Jeep, habe da was gefunden, ist eine Kombination, im Test hat es schon mal geklappt.

Code 

-ms-writing-mode: tb-rl; /* old syntax. IE */

-webkit-writing-mode: vertical-rl;

-moz-writing-mode: vertical-rl;

-ms-writing-mode: vertical-rl;

writing-mode: vertical-rl; /* new syntax */

         

-webkit-text-orientation: upright;

-moz-text-orientation: upright;

-ms-text-orientation: upright;

text-orientation: upright;



Meine Frage sollte damit erledigt sein.

Mf R8
Gruß Rolly8-HL
Was für Andere Wichtig ist muss für mich nicht genauso Wichtig sein!
Bin Dickkopf Unbelehrbar mache aus Protest nicht das was andere für Richtig halten!
Das gibt einem zu Denken oder?
 
WWW
matze_two
Top  #6 Beitrag drucken
Geschrieben am 28.04.2016 um 21:55
CSS3 und HTML5 Kompact
Geht auch so z.B.
CSS:

Code 

.text {

margin-left: 30px;

font-size:12px;

font-weight:bold;

position:absolute;

-ms-transform: rotate(90deg);

-moz-transform: rotate(90deg);

-webkit-transform: rotate(90deg);

transform: rotate(90deg);

-ms-transform-origin: left top 0;

-moz-transform-origin: left top 0;

-webkit-transform-origin: left top 0;

transform-origin: left top 0px;

}



Ausgabe per echo:

Code 

echo "<center><div class='text'>TEST</div></center>";
 
WWW
Rolly8-HL
Top  #7 Beitrag drucken
Geschrieben am 29.04.2016 um 09:22
Das war nicht was ich gesucht hatte, TEST 1 hatte ich schon, TEST 2 war das was ich zur Ausgabe bringen wollte.

Dazu kommt das es sich um eine Dynamische Ausgabe handelt , "Shoutbox 200 Zeichen".
Rolly8-HL hat folgende Datei angehängt:
Du hast nicht die Berechtigung die Anhäge dieses Themas zu sehen.
Bearbeitet von Rolly8-HL am 29.04.2016 um 10:53
Gruß Rolly8-HL
Was für Andere Wichtig ist muss für mich nicht genauso Wichtig sein!
Bin Dickkopf Unbelehrbar mache aus Protest nicht das was andere für Richtig halten!
Das gibt einem zu Denken oder?
 
WWW
John Doe
Top  #8 Beitrag drucken
Geschrieben am 29.04.2016 um 09:42
Zitat: matze_two schrieb:

Ausgabe per echo:

Code 

echo "<center><div class='text'>TEST</div></center>";



<center> wird ausserdem unter HTML5 nicht mehr verwendet!
Bearbeitet von John Doe am 29.04.2016 um 10:07
Dieses Mitglied wurde gelöscht!
 
WWW
Janilein
Top  #9 Beitrag drucken
Geschrieben am 29.04.2016 um 14:04
Hier mal was, was ich gefunden habe, evtl. bringt dich das ja zum Ziel:

Code 

<!DOCTYPE html>

<html>

<head>

<style> 

p.test {

    width: 2px; 

    border: 0px solid #000000;

    word-wrap: break-word;

}

</style>

</head>

<body>



<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>



</body>

</html>
 
Rolly8-HL
Top  #10 Beitrag drucken
Geschrieben am 29.04.2016 um 17:45
Jeep, danke auch das geht, ist sogar noch einfacher.
Habe jetzt alles was ich brauche.
Gruß Rolly8-HL
Was für Andere Wichtig ist muss für mich nicht genauso Wichtig sein!
Bin Dickkopf Unbelehrbar mache aus Protest nicht das was andere für Richtig halten!
Das gibt einem zu Denken oder?
 
WWW
matze_two
Top  #11 Beitrag drucken
Geschrieben am 29.04.2016 um 21:59
Ahh...stimmt ,,layzee,, habe ich eben gestest. Sorry. Nur der Code den ich postete ist CSS3 anzeigbar. Und sogar steuerbar...Smile
Aber :-align textrazz

Ja text Aufrufen mit ,,p,, vergass ich stimme ich dem Janilein zu.
Bearbeitet von matze_two am 29.04.2016 um 22:06
 
WWW
Springe ins Forum: