TinwëlintMedlem sedan maj 2004478 inlägg
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.
GunnarDMedlem sedan juni 20014 250 inlägg
Borde det inte räcka med att se till så att det inte blir några radbrytningar med "white-space: pre;" ?
http://www.w3schools.com/css/pr_text_white-space.asp
TinwëlintMedlem sedan maj 2004478 inlägg
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?
jarvkloMedlem sedan juli 20013 295 inlägg
Hmm...
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...
Så det sket sig direkt per specifikation...
Du kan däremot ändra färg, font m.m. för första raden i ett stycke efter vad som framgår här: http://blooberry.com/indexdot/css/syntax/pseudo/pelemfirstline.htm
TinwëlintMedlem sedan maj 2004478 inlägg
Jarvklo skrev:
Du kan däremot ändra färg, font m.m. för första raden i ett stycke efter vad som framgår här: http://blooberry.com/indexdot/css/s...emfirstline.htm
Japp, i alla fall för de ordentliga webbläsarna.
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.
SlarvpelleMedlem sedan mars 200464 inlägg
Tinwëlint skrev:
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
.outer {
width: 5em;
border: solid;
overflow: visible;
}
<p class="outer">
<div>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
</p>
...där hela DIVen spiller utanför P även i IE, och det här:
.outer {
width: 5em;
border: solid;
overflow: visible;
}
<div class="outer">
<div>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
</div>
...där även den yttre DIVen expanderas i IE.
TinwëlintMedlem sedan maj 2004478 inlägg
Ä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/)
TinwëlintMedlem sedan maj 2004478 inlägg
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?
TinwëlintMedlem sedan maj 2004478 inlägg
En rolig IE-specifikt egenskap:
word-wrap: break-word;
löste problemet ännu bättre än min overflo-x: auto;
Den radbryter de ord (i mitt fall URL:er) som blir längre en boxens bredd. Precis som Opera gör automatiskt.
Hittade tipset här:
http://www.communitymx.com/content/article.cfm?page=3&cid=CB7B3
