Willkommen auf dem Portal für Mediengestalter
|
|
Autor |
Nachricht |
TOMillr
Threadersteller
Dabei seit: 21.03.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 27.04.2008 21:11
Titel Wie PHP Content automatisch in Stylesheet einpassen? |
|
|
Hallo zusammen,
möchte gerne die mittels CSS realisierten "Stile" im FCKeditor erweitern. Dafür gibt es im Editor ein eigene CSS Datei, welche quasi wie die Formatvorlagen bei Word funktionieren. Leider bin ich mir nicht ganz sicher, wie ich den folgenden Style Code automatisieren kann:
Code: |
<p>
<span style="float:left;color:silver;font-size:100px;line-height:70px;padding-top:2px;font-family: times;">F</span>or this one we want to force the first big letter to span about five lines. The font-size is adjusted to exactly 100 pixels while the line height is 70 pixels. We tried a line-height of 80 but that leaves a little too much white space.
</p>
|
Der Code wird verwendet, um so einen Magazin-Look mit einem großen Buchstaben am Anfang eines Artikels zu erzeugen:
Wie kann ich diesen Vorgang nun automatisieren, wenn der eigentliche Text über einen PHP Befehl ($content) in die Seite eingefügt wird? Kann man das also irgendwie so hinbekommen, dass wie im oberen Beispiel der kursiv markierte Text quasi eingefügt wird und dabei der erste Buchstabe an der passenden Stelle (vor dem </span> Tag) im Code landet?
Gruß,
Tom
Zuletzt bearbeitet von TOMillr am Mo 28.04.2008 09:30, insgesamt 1-mal bearbeitet
|
|
|
|
|
Snifferdog
Dabei seit: 08.03.2007
Ort: Düsseldorf
Alter: 35
Geschlecht:
|
Verfasst So 27.04.2008 21:25
Titel
|
|
|
Mh naja ...
ich weiß nicht ob es ne sonderlich schöne Lösung ist aber du könntest per Suchmusster den ersten Buchstaben raussuchen und dann durch <span ...> Erster Buchstabe </span> ersetzen.
Code: |
$string = "Hier wäre dann der Inhalt";
$suchmuster = "/(^.)/im";
$ersetzung = "<span class=''>$1</span>";
$ausgabe = preg_replace($suchmuster, $ersetzung, $string);
echo $ausgabe;
|
Sollte auf jeden Fall funktionieren
|
|
|
|
|
Anzeige
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
|
|
|
|
Snifferdog
Dabei seit: 08.03.2007
Ort: Düsseldorf
Alter: 35
Geschlecht:
|
Verfasst So 27.04.2008 21:50
Titel
|
|
|
Jup das sieht für diesen Fall sehr viel einfacher und besser aus ^^
Gruß
|
|
|
|
|
TOMillr
Threadersteller
Dabei seit: 21.03.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 28.04.2008 09:05
Titel
|
|
|
Hm, interessant - kannte ich garnicht. Hatte mir das andere Beispiel rausgesucht, weil ich das Aussehen des ersten Buchstaben dann noch weiter anpassen wollte. Vielleicht um den Buchstaben einen Rahmen ziehen und unterhalt des Buchstabens noch mehr Freiraum lassen. Geht das mit dem Beispiel auch? Außerdem war es ja Sinn der Sache, dass der Buchstabe nicht einfach nur größer ist, sondern nach UNTEN in den Fließtext herunterreicht.
Zuletzt bearbeitet von TOMillr am Mo 28.04.2008 09:06, insgesamt 1-mal bearbeitet
|
|
|
|
|
TOMillr
Threadersteller
Dabei seit: 21.03.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 28.04.2008 09:40
Titel
|
|
|
Snifferdog hat geschrieben: | Mh naja ...
ich weiß nicht ob es ne sonderlich schöne Lösung ist aber du könntest per Suchmusster den ersten Buchstaben raussuchen und dann durch <span ...> Erster Buchstabe </span> ersetzen.
Code: |
$string = "Hier wäre dann der Inhalt";
$suchmuster = "/(^.)/im";
$ersetzung = "<span class=''>$1</span>";
$ausgabe = preg_replace($suchmuster, $ersetzung, $string);
echo $ausgabe;
|
Sollte auf jeden Fall funktionieren |
Habe mal versucht den Vorschlag umzusetzen und folgenden Code verwendet:
Code: |
$string = "$content";
$suchmuster = "/(^.)/im";
$ersetzung = "<span style=\"float:left;color:silver;font-size:100px;line-height:70px;padding-top:2px;font-family: times;\">$1</span>";
$ausgabe = preg_replace($suchmuster, $ersetzung, $string);
echo $ausgabe;
|
und damit kommt folgendes heraus:
Es ergeben sich also zwei Probleme mit dem Code. Erstmal wird der erste Paragraph, der mit $content eingelesen wird irgendwie doppelt und bei zweiten Mal ohne die Textformatierung ausgegeben. Außerdem wird im $content Quelltext offenbar noch durch den verwendeten FCKeditor automatisch der Tag <p> dem Inhalt vorangestellt, sodass dieser dann als erstes Zeichen erkannt und zerlegt wird. Kann man das irgendwie beseitigen?
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 28.04.2008 10:00
Titel
|
|
|
CrazyLexx hat geschrieben: |
Hm, interessant - kannte ich garnicht. Hatte mir das andere Beispiel rausgesucht, weil ich das Aussehen des ersten Buchstaben dann noch weiter anpassen wollte. Vielleicht um den Buchstaben einen Rahmen ziehen und unterhalt des Buchstabens noch mehr Freiraum lassen. Geht das mit dem Beispiel auch? Außerdem war es ja Sinn der Sache, dass der Buchstabe nicht einfach nur größer ist, sondern nach UNTEN in den Fließtext herunterreicht. |
Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
font-family: Arial;
}
p:first-letter {
float: left;
font-size: 3em;
padding: 0.1em 0.1em 0 0;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet</p>
</body>
</html> |
|
|
|
|
|
Mark-Korb
Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht:
|
Verfasst Mo 28.04.2008 10:02
Titel
|
|
|
CrazyLexx hat geschrieben: |
Hm, interessant - kannte ich garnicht. Hatte mir das andere Beispiel rausgesucht, weil ich das Aussehen des ersten Buchstaben dann noch weiter anpassen wollte. Vielleicht um den Buchstaben einen Rahmen ziehen und unterhalt des Buchstabens noch mehr Freiraum lassen. Geht das mit dem Beispiel auch? Außerdem war es ja Sinn der Sache, dass der Buchstabe nicht einfach nur größer ist, sondern nach UNTEN in den Fließtext herunterreicht. |
Ja das liegt halt dran wie du ihn definierst.
Kannst es ja mit deinem Codebeispiel von oben versuchen, sollte funktionieren.
alternativ, leg dir ne klasse an und mach es jedesmal zu Fuß, is ja auch nicht DIE arbeit.
|
|
|
|
|
|
|
|
Ähnliche Themen |
Content Editing, statt Content Management
Acrobat DC Pro Text einpassen
Text in Form einpassen
Corel X3 Text in Kreis einpassen
User Stylesheet..
Problem mit Stylesheet
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben. Du kannst auf Beiträge in diesem Forum nicht antworten. Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|