Notifikationer

Markér alle som læst Log ud

erikjacobsen Ekspert

14. marts 2007 - 13:25 Der er 25 kommentarer og
1 løsning

Fast linieafstand med og

http://n0p.com/eksperten/linie/

De fem linier har forskellig afstand mellem hinanden, forårsaget af brugen af og . Hvordan angiver man, at der er samme afstand mellem to linier, uanset om der er et super/sub-script eller ej? (Ja, så kommer der en del luft mellem linierne, men det ønskes)

Synes godt om

thesurfer Nybegynder

14. marts 2007 - 14:23 #1

Du kunne f.eks. bruge line-height:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Title </title>
<script type="text/javascript">

</script>
<style type="text/css">
p
{
line-height:20px;
}
</style>
</head>

<body>

xxx xxx xxx xxx xxx xxx xxx xxx 
xxx xxx xxx CO2 xxx xxx xxx 
xxx xxx xxx xxx xxx xxx xxx xxx xxx 
xxx xxx xxx n2 xxx xxx 
xxx xxx xxx xxx xxx xxx xxx xxx xxx.

</body>
</html>

Synes godt om

thesurfer Nybegynder

14. marts 2007 - 14:24 #2

Det blive så brugt, når du bruger .

Hvis det skal være over hele body:

<style type="text/css">
body
{
line-height:20px;
}
</style>

Synes godt om

thesurfer Nybegynder

14. marts 2007 - 14:24 #3

Svar.

Synes godt om

roenving Novice

14. marts 2007 - 14:32 #4

-- det ændrer da ikke på, at linjeafstandende er forskellige ?-)

Synes godt om

erikjacobsen Ekspert

14. marts 2007 - 14:48 #5

Jeg har på linket ovenfor endda sat den til 30px. Der er lidt forskel på browsere, men i IE er da i hvert fald forskel på linieafstand.

Synes godt om

johan.o Nybegynder

17. marts 2007 - 19:45 #6

Hmm, det var en af de mere komplekse :)...Følgende er hverken kønt eller optimalt men det giver dig det du foreløbig ønsker...håber jeg :)

xxx xxx xxx xxx xxx xxx xxx xxx11 
xxx xxx xxx CO2 xxx xxx xxx11 
xxx xxx xxx xxx xxx xxx xxx xxx xxx11 
xxx xxx xxx n2 xxx xxx11 
xxx xxx xxx xxx xxx xxx xxx xxx xxx.11

Ved på hver linje at hæfte et og tag på slutningen og så skjule dem med visibility: hidden; fylder alle linjerne lige meget.

Mvh. Johan

Synes godt om

erikjacobsen Ekspert

17. marts 2007 - 19:54 #7

Noget af et hack! Men en yderligere betingelse er faktisk, at jeg ikke ved hvor linieskiftene er - du ved, folks vinduer har den størrelse de nu selv bestemmer, og det er ikke muligt at vide hvor linieskift er. Mit eksempel er selvfølgelig misvisende på det punkt.

Da de usynlige / fylder i bredden, kan jeg heller ikke sprede dem med mild hånd i teksten, fx. efter hvert ord.

Ja, det er sjovt, at det skal være så svært. Jeg tør næsten ikke sige, at der også kan komme billeder i teksten, ca. i bogstavhøjde, men sommetider en anelse mere.

Hmm ... jeg lader spørgsmålet stå lidt endnu.

Synes godt om

roenving Novice

17. marts 2007 - 20:08 #8

>>erik

-- problemet med linjeskiftene kan du da i hvert fald styre, selvom det kan være irriterende at begrænse brugernes visningsflade ...

-- men et hack er det i hvert fald !-)

>>johan.o -- long time, no see !o]

Synes godt om

johan.o Nybegynder

17. marts 2007 - 20:42 #9

--> roenving: I lige måde :), har været 'lidt' væk. Du ved nogle gange smiler livet til dig og andre gange sparker det dig i skridtet. Jeg er blevet sparket et par gange det sidste år :), men nu ser det ud til at der kommer flere smil på banen igen.

--> erik: Ja jeg tænkte jo nok at du havde mere i ærmet :), men så må vi jo bare gå i tænkeboks.

Mvh. Johan

Synes godt om

johan.o Nybegynder

17. marts 2007 - 20:48 #10

Hmmm, og må jo være 'defineret' med noget css i browserens 'default' stylesheet. Der må være nogle offset værdier (som 'løfter' eller 'sænker' teksten) som man må kunne tilføje, som margin eller padding, til den almindelige tekst......blot en tanke.

Mvh. Johan

Synes godt om

erikjacobsen Ekspert

17. marts 2007 - 21:45 #11

Jeg her selv været forbi det du nævner, men padding på et eller <div> gælder ikke for hver linie, men for eller <div> som helhed.

Det kan i denne sammenhæng slet ikke komme på tale at "begrænse brugernes visningsflade" ;) Altså, der skal være de linieskift, som der kommer naturligt.

Men et forsøg har jeg da lavet, igen på http://n0p.com/eksperten/linie/ - de to midterste 2-taller bryder ud af linien, ser det ud til, og dermed bidrager de ikke til liniens højde, som dermed burde være den samme. (ja, så er der det med billeder, men een ting af gangen)

Synes godt om

thesurfer Nybegynder

18. marts 2007 - 06:57 #12

Hmm.. Mon ikke at du kan nøjes med at definere sup og sub i css, til henholdvis top:5px og top:-10px, så alle sub/sup påvirkes?

Hvis du kan det, kan du vel også lade billederne "arve" samme egenskaber (hvordan du nu synes at de skal være)..?

Synes godt om

erikjacobsen Ekspert

18. marts 2007 - 09:01 #13

Jeg har prøvet på http://n0p.com/eksperten/linie/ - men at ændre top for og ændrer ikke ved at de gør linien tykkere ... i visse browsere i hvert fald.

Synes godt om

johan.o Nybegynder

18. marts 2007 - 12:26 #14

Hm, igen er det hverken kønt eller optimalt men prøv at se på denne linie :

<div style=" display: inline; padding-top: 6px; padding-bottom: 4px; background-color: blue;">xxx xxx xxx xxx CO</div>22<div style="display: inline; padding-top: 6px; padding-bottom: 4px; background-color: blue;"> xxx xxx xxx xxx</div> 

Jeg kunne forestille mig at du ikke har en fast font-size, men at den er relativ i forhold til hvad brugeren har sat i sin browser, og så tror jeg ikke resultatet bliver så kønt. Men måske det kan hjælpe på vej.

Mvh. Johan

Synes godt om

erikjacobsen Ekspert

18. marts 2007 - 12:36 #15

En <div> og display:inline er nok ikke en vej jeg vil gå. Men for diskussionens skyld kan jeg da godt prøve - lidt senere på dagen ;)

Synes godt om

johan.o Nybegynder

18. marts 2007 - 15:27 #16

Ja, det var lige et skridt på vejen :) (display:inline) det går jo også ok med så her er hvad jeg foreløbig har...stadig ikke kønt og ej heller optimalt i forhold til varierende font størrelse.

<div style="line-height: 2.2;">
xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx 
xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx CO22xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx 
xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx 
</div>

Nu ved vi jo ikke det sande omfang af projektet :), men så længe de 'løftede' og 'sænkede' dele ikke er større end her skal du blot sørge for at de er inden for højden af resten af linjen, men snakker vi om lange afsnit der flyttes, kan vi/du jo ikke leve med at de ikke er præcis lige høje......og vi venter spændt på at billederne kommer i spil, men som du siger 'en ting ad gangen' :)

Mvh. Johan

Synes godt om

johan.o Nybegynder

18. marts 2007 - 15:29 #17

Ouh for resten, nu sidder jeg jo her på arbejdet, så jeg kan ikke lige checke opførslen i andre browsere...padding på span...??? går det hos f.eks. mozilla ?? :)

Mvh. Johan

Synes godt om

johan.o Nybegynder

18. marts 2007 - 15:31 #18

Ahr nu spammer jeg vist tråden...sorry :(, men det skulle ifølge w3 vist være okidoki.

Synes godt om

erikjacobsen Ekspert

18. marts 2007 - 17:11 #19

Spam du bare, når det er relevant ;)

Jeg har sat dit sidste forslag nederst på siden - men der er stadig forskellig linieafstand.

Mn umiddelbart så ser dette alt for besværligt ud, til at kunne bruges i praksis, også selv om vi finder en løsning med og styles. Det er ikke helt nok at det ser pænt ud på skærmen, der kommer også krav om tilgængelighed for oplæserprogrammer. Der er noget jeg skal have sat mig ind i, men jeg ville tro at n2 kunne oplæses som "n i anden", mens n2 ville blive til "n 2" - og det vil ikke være godt nok.

Så egentlig skal jeg finde noget CSS at sætte på / eller på en /<div> helt generelt, som vil give en fast linieafstand. Jeg har prøvet, og jeg kan ikke ...

Og så er det nok lidt et luksusproblem, for teksten kan jo sagtens læses.

"det sande omfang af projektet" - nej, det kender du ikke. Og anvendelsen holder jeg for mig selv indtil videre!

Synes godt om

johan.o Nybegynder

18. marts 2007 - 17:58 #20

Jeg tror heller ikke det vil være muligt at opnå det du efterspørger, ved kun at style på eller .

Jeg er kommet lidt videre, men det er ikke blevet kønnere og det er da slet ikke brugbart i forhold til dine ønsker, men nu skriver jeg det alligevel :)....

<div style="line-height: 1.8;">
xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx 
xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx 
xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx CO2 xxx2 xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx 
xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx 
xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx 
</div>

Her kan font størrelsen på både den 'hævede' og sænkede' skrift ændres samt den tager hensyn til brugerens indstillinger. Du kan samtidig relativt nemt bestemme hvor højt eller lavt der skal 'flyttes'.

Men slut med den opgave.....kravene var vist mere end jeg magtede :)

Mvh. Johan

Synes godt om

johan.o Nybegynder

18. marts 2007 - 22:01 #21

Arh, der er vist stadig noget koks med visse dele...:)...dum opgave alligevel :)...

Mvh. Johan

Synes godt om

erikjacobsen Ekspert

18. marts 2007 - 22:29 #22

Ja, men vær venlig at lægge et svar alligevel. Det har været godt at få bekræftet, at dette ikke er vejen frem.

Synes godt om

johan.o Nybegynder

18. marts 2007 - 22:42 #23

He he..jeg kunne ikke drømme om at tage imod point fra erikjacobsen :), man kan jo sige at det er en form for tak for tidligere hjælp :), selv om point ikke er det du går mest op i ;)

Mvh. Johan

Synes godt om

erikjacobsen Ekspert

18. marts 2007 - 22:59 #24

Den har jeg selv været ude om, hva'? ;)

Så thesurfer får 30 stykker lakridskonfekt for det svar, som jeg ganske vist har prøvet, men som i mit lille hoved, burde være det rigtige. Og får man sat en line-height, der er lidt større end default, så ses det ikke helt så tydeligt. Det kan sagtens være, at det bliver en del af løsningen.

Eller af den midlertidige løsning: er der andre, der har nogle guldkorn, så læg en kommentar. Posen med lakridskonfekt er ikke helt tom...

Synes godt om

johan.o Nybegynder

19. marts 2007 - 14:58 #25

Nu nævner du oplæser programmer, har du evt. nogle links til noget omkring det emne ?

Mvh. Johan

Synes godt om

erikjacobsen Ekspert

19. marts 2007 - 15:50 #26

Det er ikke helt inde i projektet endnu, men jeg tror vi skal understøtte "skrivestøtte" og "vital" - hvis ellers jeg har fået navnene rigtigt. Man markerer en tekst på skærmen, og får den læst op. Jeg har desværre ingen links, og har heller ikke "hands-on" erfaring med produkterne.

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS