nicht angemeldet
Text auf 100% strecken
Hallo
Ich müsste 15 Wörter, die locker in eine Zeile passen, so darstellen, dass das erste Wort linksbündig ist und das letzte Wort rechtsbündig. Die übrigen sollten gleichmäßig dazwischen verteilt werden.
Eigentlich so wie beim Blocksatz mit justify, aber der wirkt sich ja nur auf mehrzeiligen Text aus. Ich bräuchte das halt für eine Zeile.
Weiß jemand von euch wie ich das hinbekommen kann?
Grüße, Chris
-
Hi!
Hallo
Ich müsste 15 Wörter, die locker in eine Zeile passen, so darstellen, dass das erste Wort linksbündig ist und das letzte Wort rechtsbündig. Die übrigen sollten gleichmäßig dazwischen verteilt werden.
Es gibt die Möglichkeit mit CSS mit letter-spacing:10px den Abstand von Buchstaben auf 10px zu bestimmen. Um dies jedoch auf die ganze Breite, sprich 100% zu bringen, ist mir nicht bekannt.
---------------------------------------------------------
Grüße,
Fabian St.
-
Hallo Chris,
ich hätte da noch ein paar Nachfragen.
Ich müsste 15 Wörter,
handelt es sich dabei immer um dieselben Wörter?
die locker in eine Zeile passen,
ja!? Bei welcher Fenstergröße denn?
so darstellen, dass das erste Wort linksbündig ist und das letzte Wort rechtsbündig.
Die übrigen sollten gleichmäßig dazwischen verteilt werden.
Eigentlich so wie beim Blocksatz mit justify,also sollen die Wörter selber nicht 'gestreckt' werden, sondern nur der Wortabstand 'vermittelt'?
rein aus Neugierde (und um dir vielleicht eine Alternative vorschlagen zu können): Wofür/wobei soll das sein?
Gruß Gunther
--
Mein SelfCode: fl:( br:& va:) ls:[ fo:| rl:( n4:& ss:| de:] js:| ch:? zu:|
http://www.peter.in-berlin.de/projekte/selfcode/?code=fl%3A(+br%3A%26+va%3A)+ls%3A[+fo%3A|+rl%3A(+n4%3A%26+ss%3A|+de%3A]+js%3A|+ch%3A%3F+zu%3A|-
Hallo Webblob,
handelt es sich dabei immer um dieselben Wörter?
Nein
Bei welcher Fenstergröße denn?
Die Problematik mit Fenstergröße usw. ist mir bewusst. Deswegen erstelle ich alle Seiten mit relativen Schriftgrößen, ohne feste Grafiken usw.
also sollen die Wörter selber nicht 'gestreckt' werden, sondern nur der Wortabstand 'vermittelt'?
Ja
rein aus Neugierde (und um dir vielleicht eine Alternative vorschlagen zu können): Wofür/wobei soll das sein?
Das ist so als Designstudie gedacht. Ich möchte einfach mal was andres probieren.
Mittlerweile habe ich mein Konzept umgeworfen und es sind nicht nur einzelne Wörter die ich auf eine Zeile verteilen will, sondern mehrere Wörter je Textblock.
Hier ist mein momentanes Coding, ich habe das mit einer Tabelle gelöst. Im CSS kannst du die Farben ausschalten und mal ohne Hintergrund ansehen, momentan ist er nur zur Kennzeichnung wegen den Größenverhältnissen drin.
Der Text wird umgebrochen wenn der Platz zu klein wird und bei genug Platz werden nur die Zwischenräume größer.
Auch wenn man die Textgröße im Browser ändert stimmt noch alles. Ich habe das bisher nur auf einem Mac getestet da ich hier keinen Windows Rechner zur Verfügung habe.Schön wäre halt das ohne Tabelle hinzubekommen, aber ob das geht?
Grüße, Chris
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><html lang="de">
<head>
<title>Textbloecke auf die ganze Breite verteilen</title><style type="text/css">
<!--
.text { background-color: #dddddd; }
.punkt { background-color: #ccffcc; }
-->
</style></head>
<body><table width="100%" summary="Layouttabelle">
<colgroup>
<col style="width: 15em;">
<col>
<col style="width: 20em;">
<col>
<col style="width: 7em;">
<col>
<col style="width: 9em;">
<col>
<col style="width: 11em;">
<colgroup><tr>
<td class="text">Textblock der ganz links stehen soll</td>
<td style="text-align: center;" class="punkt">·</td>
<td style="text-align: center;" class="text">Textblock Nummer zwei mit superlangem Text</td>
<td style="text-align: center;" class="punkt">·</td>
<td style="text-align: center;" class="text">Textblock kurz</td>
<td style="text-align: center;" class="punkt">·</td>
<td style="text-align: center;" class="text">Textblock mittellang</td>
<td style="text-align: center;" class="punkt">·</td>
<td style="text-align: right;" class="text">Textblock der rechts steht</td>
</tr></table>
</body>
</html>-
Hallo Chris,
Schön wäre halt das ohne Tabelle hinzubekommen, aber ob das geht?
afaik wird das nur mit CSS alleine nicht gehen :-(
DeWitt hat ja schon eine auf Javascript basierende Variante gepostet.Aber selbst unter Zuhilfenahme anderer Techniken, egal ob server- oder clientseitig wird das imho nie richtig funktionieren.
Trotzdem habe ich mal eine CSS- und JS-Variante gebastelt, die annähernd das tun, was du meiner Meinung nach willst.
CSS-Variante:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Textbloecke auf die ganze Breite verteilen</title>
<style type="text/css">
<!--
body {margin: 0;padding: 0;}
div {height: 1.2em; text-align: justify; overflow: hidden;}
div p {width: auto; margin: 0; line-height: 1.2em; overflow: hidden;}
#text1 {float: left;width: 24%; background-color: #ccc;}
#text2 {float: left;width: 30%;background-color: #333; color: #fff;}
#text3 {float: left;width: 12%;background-color: #ccc; }
#text4 {float: left;width: 15%;background-color: #333; color: #fff; }
#text5 {float: left;width: 17%;background-color: #ccc; }
.punkt {float: left;width: .5%;background-color: #f00;}
-->
</style>
</head>
<body>
<div style="width: 100%; margin: 0; padding: 0;">
<div id="text1"><p>Textblock der ganz links stehen soll <span>Blind-Text-zwecks-Zeilenumbruch</span></p></div>
<div class="punkt">:</div>
<div id="text2"><p>Textblock Nummer zwei mit superlangem Text Blind-Text-zwecks-Zeilenumbruch</p></div>
<div class="punkt">:</div>
<div id="text3"><p>Textblock kurz Blind-Text-zwecks-Zeilenumbruch</p></div>
<div class="punkt">:</div>
<div id="text4"><p>Textblock mittellang Blind-Text-zwecks-Zeilenumbruch</p></div>
<div class="punkt">:</div>
<div id="text5"><p>Textblock der rechts steht Blind-Text-zwecks-Zeilenumbruch</p></div>
</div>
</body>
</html>Javascript-Variante:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Textbloecke auf die ganze Breite verteilen</title>
<style type="text/css">
<!--
body {margin: 0;padding: 0;}
#stretch {width: auto; word-spacing: normal; white-space: nowrap;}
-->
</style></head>
<body id="body">
<span id="stretch">Textblock, der von ganz links bis nach ganz rechts 'gestreckt' und nicht umgebrochen werden soll!</span>
<script type="text/javascript">
<!--
satz=document.getElementById('stretch').innerHTML;
woerter = satz.split(" ");
fensterbreite=document.getElementById('body').offsetWidth;
satzbreite=document.getElementById('stretch').offsetWidth;
if(fensterbreite>satzbreite) {
abstand=(fensterbreite-satzbreite)/(woerter.length-1);
document.getElementById('stretch').style.wordSpacing=abstand+"px";
}
//-->
</script>
</body>
</html>Beide Varianten haben erhebliche Nachteile (Mängel) und funktionieren alles andere als 'problemlos' und wenn überhaupt nur in bestimmten Browsern, so dass ich von einem Einsatz in der Praxis_dringend_abraten würde.
Gruß Gunther
--
Mein SelfCode: fl:( br:& va:) ls:[ fo:| rl:( n4:& ss:| de:] js:| ch:? zu:|
http://www.peter.in-berlin.de/projekte/selfcode/?code=fl%3A(+br%3A%26+va%3A)+ls%3A[+fo%3A|+rl%3A(+n4%3A%26+ss%3A|+de%3A]+js%3A|+ch%3A%3F+zu%3A|
-
-
-
Hi Chris,
Mit einem Javascript funktioniert es zumindest ungefähr. Wenn du das folgende Script an der gewünschten Stelle der HTML-Seite einfügst, wird der Text (zumindest in einem Browser, hier IE) korrekt gestreckt.
Bei Opera ist die Zeichenbreite 8 ein wenig zu klein, deswegen läuft die Zeile bei Opera etwas über den Bildschirmrand hinaus.
Andere Browser habe ich nicht getestet.Hier nur das Script:
<<<<SCRIPT type="text/javascript">
/*=====================================
Einzeiliger Blocksatz
JAVASCRIPT (C) D. Heinze
Version: Alpha 1.0
http://www.dewitts-homepage.de
webmaster@dewitts-homepage.de* Verwendung und Weiterverbreitung *
* nur für nicht-kommerzielle Zwecke *
=====================================*/
<!--
var zeichenbreite = 8; /*Breite eines Zeichens
(Schriftart Monospace, jedoch leider browserabhängig
8 Pixel entspricht ungefähr der Zeichebreite im IE)*/
var text = "Dies ist ein Text, der aus fünfzehn (15) Wörtern besteht, aber nur durch den Nebensatz.";
/*Zu streckender Text*/
var textlaenge = text.length;
/*Anzahl der Zeichen des Texts*/
var zeichenbreite_ges = textlaenge * zeichenbreite;
/*Gesamtbreite des Texts in Pixeln*/
var fensterbreite = document.body.offsetWidth;
/*Innenbreite des Browser-Fensters*/
var leerbreite_ges = fensterbreite - zeichenbreite_ges;
/*Benötigte Gesamtbreite der Abstände*/
var leerbreite = leerbreite_ges / textlaenge;
/*Breite eines Abstands*/
if (leerbreite < 0) leerbreite = 0;
/*Abstandsweite auf 0 setzen, falls Wert negativ*//*Ausgabe an den Browser*/
document.write('<DIV style="font-family:monospace; letter-spacing:'+leerbreite+';" nowrap>');
document.write(text);
document.write('</DIV>'+"\n");
/*Ausgabe Ende*/
-->
</SCRIPT>Cya, DeWitt
-
Hallo Chris,
so geht das im Internet-Explorer, sonst aber in keinem anderen Browser:
<div style="width:100%;overflow:hidden;text-align:justify">Ich denke, also bin ich!
</div>Elegant, nicht wahr?
Gruß Gernot
-
Hallo Gernot
so geht das im Internet-Explorer, sonst aber in keinem anderen Browser:
<div style="width:100%;overflow:hidden;text-align:justify">Ich denke, also bin ich!
</div><div style="height:1em;overflow:hidden;text-align:justify">Ich denke, also bin ich! ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</div>und so gehts zumindest auch im Mozilla, andere Browser hab ich nicht getestet.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Detlef,
<div style="height:1em;overflow:hidden;text-align:justify">Ich denke, also bin ich! ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</div>und so gehts zumindest auch im Mozilla, andere Browser hab ich nicht getestet.
Also zumindest für den MSIE musst du auch noch die "width:100%;" in den Style schreiben, sonst gibt es unten hässliche horizontale Scrollbalken, so wie hier auf dieser Seite jetzt aufgrund unserer Postings.
Opera und Mozilla (dessen Derivate habe ich jetzt auch nicht mehr getestet) sind klug genug zu wissen, dass die Buchstaben der zweiten Zeile aufgrund von "height:1em" ohnehin nicht angezeigt werden und brauchen die "width:100%;" komischerweise nicht.
Dass es mit dem alten Netscape 4.X funktioniert, hat ja auch niemand erwartet.
Das Schönste an diesem Forum ist doch, wenn wir uns nicht streiten und stattdessen gemeinsam Grundlagenforschung betreiben.
;-)Gruß Gernot
-
-