Ok, jag kom på en sak som jag skulle vilja göra med css men som jag tror är väldigt svårt att göra.
Om man till exempel har vers som är skriven på hexameter så kommer den ju att bestå av flera ganska långa rader, såhär:
Homeros skrev:
Sedan de slutat sitt stök och aftonvarden var färdig,
åto de alla och fägnade sig åt det rikliga målet.
Men när de så hade stillat sin lust att äta och dricka,
gingo de alla till sängs och sömnens gåva de njöto.
Ibland om många korta ord med mycket konsonanter används så får man en rad som är ganska mycket längre än de andra. Man vill då inte gärna ha radbrytningar mitt i versraderna. Men om jag ändå får det, så skulle jag så som radbrytningen går till i min utgåva av Odysséen placera den brutna delen av raden åt höger. Såhär:
Sedan de slutat sitt stök och aftonvarden var färdig,
åto de alla och fägnade sig åt det rikliga målet.
Men när de så hade stillat sin lust grgasgsgae regaw
(----------tomrum----------------------)att äta och dricka,
gingo de alla till sängs och sömnens gåva de njöto.
Någon som kan komma på något vettigt sätt att göra det här med css utan att i förväg bestämma vilka rader som ska brytas eller lägga till några klasser? För mig verkar det omöjligt.
Ja, men det har sina nackdelar när man försöker samarbeta med IE. Om det blir något overflow då och man råkar ha en flytande kolumn-design med fasta pixelbredder så utökar IE bredden på kolumnen med overflowet istället för att låte overflowet lägga sig ovanför resten av sidan och då puttas gärna kolumnen som gränsar till den med texten i ner så att den hamnar under istället för bredvid.
Finns det förresten något sätt att ordna det här? Nån overflow-egenskap som hjälper kanske. Eller har jag fått det där om bakfoten?
Min första tanke när jag såg utmaningen var att försöka ta till :first-line och att ha olika text-align på första respektive senare rader i ett stycke såhär:
<!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="sv" lang="sv">
<head>
<title>Ett experiment</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
.hexameter p {margin:0;padding:0;text-align:right}
.hexameter p:first-line {text-align:left}
-->
</style>
</head>
<body>
<div class="hexameter">
<p>Sedan de slutat sitt stök och aftonvarden var färdig,</p>
<p>åto de alla och fägnade sig åt det rikliga målet.</p>
<p>Men när de så hade stillat sin lust att äta och dricka,</p>
<p>gingo de alla till sängs och sömnens gåva de njöto.</p>
</div>
</body>
</html>
Men det är en "pipe-dream" för restriktionerna på ":first-line" tillåter inte att man har text-align deklarerat för ":first-line"-stilar...
r/ Nej, IE kanske visst klarar den. Just nu har jag ändå ingen nytta av den.
Visst var det en klurig utmaning. Det går nog inte att lösa utan extra html. Jag kallade det en utmaning eftersom det inte är något som jag är i stort behov av.
Ja, men det har sina nackdelar när man försöker samarbeta med IE. Om det blir något overflow då och man råkar ha en flytande kolumn-design med fasta pixelbredder så utökar IE bredden på kolumnen med overflowet istället för att låte overflowet lägga sig ovanför resten av sidan och då puttas gärna kolumnen som gränsar till den med texten i ner så att den hamnar under istället för bredvid.
Är det inte bättre att den angränsande kolumnen hamnar nedanför (men är läslig) än att text spiller ut över annan text ?
Tinwëlint skrev:
Finns det förresten något sätt att ordna det här?
Om du använder en smal kolumn är det oftast säkrast att använda "em" som bredd enhet: då ändras kolumnens bredd med användarens textstorleksinställningar (men INTE om användaren bara har tillgång till fonter med större bokstavsbredd än de fonter du angett, så förlita dig inte på sällsynta "smala" fonter...). Följaktligen minskar du risken för overflow och kan använda "white-space: pre".
Tinwëlint skrev:
Nån overflow-egenskap som hjälper kanske.
Du skulle ju kunna använda "overflow: auto" för kolumnen? Fast nu märker jag till min fasa att det är lite si och så med Mozillas förmåga att åstadkomma rullningslister i smala kolumner. En ny bugg? Kan inte minnas att jag sett det här förut.
Möjligen kan man också använda "overflow-x: auto", vilket i dagsläget bara förstås av IE (men är föreslaget till CSS3). Andra webbläsare låter därför texten spilla ut i dagsläget.
Tinwëlint skrev:
Eller har jag fått det där om bakfoten?
Nej, det är en IE bugg. Det tycks f.ö. vara skillnad mellan det här
Är det inte bättre att den angränsande kolumnen hamnar nedanför (men är läslig) än att text spiller ut över annan text ?
Nja, det känns inte alltid så, om det bara är någon pixel som den spiler över så känns det helt onödigt.
Om du använder en smal kolumn är det oftast säkrast att använda "em" som bredd enhet: då ändras kolumnens bredd med användarens textstorleksinställningar (men INTE om användaren bara har tillgång till fonter med större bokstavsbredd än de fonter du angett, så förlita dig inte på sällsynta "smala" fonter...). Följaktligen minskar du risken för overflow och kan använda "white-space: pre".
Låter trevligt. Synd att jag alltid ska köra på bestämda pixelbredder. Men det måste man nästan göra för att kunna få in några effekter som skuggning på hela layouten. Förresten om man har två kolumner med bredd i em, hur får man dem då att sträcka sig ner till botten? (Det här fungerar ju inte: http://www.alistapart.com/articles/fauxcolumns/)
overflow-x: auto, blev ju bra, det var det jag behövde där. Egentligen är det inte så mycket som spiller över. Det brukar vara en uri som blir väldigt lång och som IE inte radbryter (men det gör Opera, det tycker jag är väldigt bra). Och för den lilla detaljen känns det onödigt att bryta hela designen.
Måste jag alltid göra så bräckliga layouter?
