CSS-eigenschappen. Intervallen (pagina 1)

Uitlijnen op gespecificeerde afstand

Overweeg verticale uitlijning op een bepaalde afstand. De eigenschap verticaal uitlijnen is heel eenvoudig: het verplaatst een element over een bepaalde afstand omhoog of omlaag. De uitdrukking verticaal uitlijnen: 5px; verplaatst het element vijf pixels omhoog ten opzichte van de oorspronkelijke positie. Negatieve lengtewaarden verplaatsen het element naar beneden. Deze eenvoudige vorm van uitlijning was niet aanwezig in CSS1, maar werd toegevoegd in CSS2.

Het is belangrijk om te begrijpen dat verticaal uitgelijnde tekst geen onderdeel wordt van een andere regel of tekst op andere regels overlapt. Kijk eens naar afb. 6.18, waarbij een deel van de verticaal uitgelijnde tekst zich in het midden van de alinea bevindt.

Zoals u kunt zien, kan elk verticaal uitgelijnd element de lijnhoogte beïnvloeden. Denk aan de beschrijving van een lijncontainer waarvan de hoogte net genoeg is om de bovenkant van het hoogste lijnblok en de onderkant van het kortste lijnblok te huisvesten. Dit geldt ook voor inline-blokken die tijdens het verticaal uitlijnen omhoog of omlaag zijn verplaatst.

Rijst. 6.18. Verticale uitlijning kan de rijhoogte vergroten

Afstand tussen letters en woorden

Nu we klaar zijn met het uitlijnen, gaan we kijken naar het beheren van de afstand tussen woorden en letters. Deze eigenschappen hebben ook hun eigen specifieke kenmerken.

Afstand tussen woorden

De eigenschap woordafstand maakt positieve of negatieve lengtewaarden mogelijk. Deze waarde wordt opgeteld bij de standaardafstand tussen woorden. In wezen wordt de woordafstand gebruikt om de afstand tussen woorden te wijzigen. Daarom is de standaardwaarde normaal hetzelfde als de waarde nul (0).

Als u een positieve lengtewaarde opgeeft, wordt de afstand tussen de woorden groter. En als u een negatieve waarde instelt voor de woordafstand, komen de woorden dichter bij elkaar:

174 Hoofdstuk 6. Teksteigenschappen

p.spread (woordafstand: 0,5em;) p.tight (woordafstand: 0,5em;) p.base (woordafstand: normaal;) p.norm (woordafstand: 0;)

De spaties tussen woorden in deze paragraaf worden vergroot met 0,5em.

De spaties tussen woorden in deze paragraaf worden met 0,5em verkleind.

De spaties tussen woorden in deze paragraaf zijn normaal.

Het effect van deze instellingen wordt getoond in Fig. 6.19.

Rijst. 6.19. De afstand tussen woorden veranderen

Tot nu toe heb ik geen precieze definitie gegeven van de term ‘woord’. In CSS-terminologie is een “woord” elke regel die geen scheidingstekens bevat en aan beide zijden wordt begrensd door scheidingstekens. Deze definitie is geen semantiek; er wordt eenvoudigweg van uitgegaan dat het document woorden bevat die zijn omgeven door een of meer scheidingstekens. Van een user-agent met CSS-functionaliteit kan niet worden verwacht dat hij in een bepaalde taal in alle gevallen een woord van een niet-woord kan onderscheiden. Deze definitie, wat deze ook is, betekent dat het onwaarschijnlijk is dat de woordafstand werkt in talen die gebaseerd zijn op pictografie of niet-Romeinse schrijfstijlen. Met deze eigenschap kunt u volledig onleesbare documenten maken, zoals duidelijk te zien is in Fig. 6.20. De woordafstand moet met voorzichtigheid worden gebruikt.

Rijst. 6.20. Echt lange afstanden tussen woorden

Letterafstand

Veel van de problemen die zich voordoen bij het werken met woordafstand doen zich voor bij het gebruik van letterafstand. Het enige verschil tussen de twee is dat de eigenschap letterafstand de afstand tussen tekens of letters verandert.

Net als bij de eigenschap woordafstand is een geldige waarde voor de letterafstand elke lengte. De standaardwaarde is het normale trefwoord (dat hetzelfde is als de letterafstand: 0). Elke lengtewaarde die u invoert, vergroot of verkleint de afstand tussen de letters met die hoeveelheid. In afb. Figuur 6.21 toont de resultaten van het toepassen van de volgende opmaak:

p (letterafstand: 0;) /* identiek aan "normaal" */

p.spacious (letterafstand: 0,25em;) p.tight (letterafstand: 0,25em;)

De letters in deze paragraaf zijn op de normale wijze van elkaar gescheiden.

De letters in deze paragraaf zijn een beetje verspreid.

De letters in deze paragraaf zijn een beetje tegen elkaar geslagen.

Rijst. 6.21. Verschillende afstanden tussen letters

Rijst. 6.22. Gebruik de eigenschap letter%spacing om geselecteerde tekst expressiever te maken

Het gebruik van letterafstanden om de nadruk te versterken is een aloude techniek. Men zou de volgende advertentie kunnen schrijven en het effect krijgen dat wordt getoond in Fig. 6.22:

sterk (letterafstand: 0,2em;)

Deze paragraaf bevat sterk benadrukte tekst dat is verspreid voor extra nadruk.

Woord- en letterafstand en uitlijning

De waarde van de woordafstand kan worden beïnvloed door de waarde van de tekstuitlijningseigenschap. Als het element is uitgevuld, worden de spaties tussen letters en woorden aangepast zodat de tekst de hele regel beslaat. Dit kan op zijn beurt de parameters veranderen die de afstand tussen woorden en letters bepalen, zoals aangegeven door de auteur in de eigenschappen van de woordafstand. Als de letterafstand is ingesteld, kan deze niet worden gewijzigd door tekstuitlijning, maar als de letterafstand is ingesteld op normaal, kan de afstand tussen de tekens worden gewijzigd om ervoor te zorgen dat de tekst uitgevuld is. De CSS specificeert niet hoe witruimte moet worden berekend, dus de user-agent maakt deze eenvoudigweg.

Het onderliggende element erft zoals gebruikelijk de berekende waarde van het bovenliggende element. Je kunt er niet voor zorgen dat in plaats van de berekende waarde van de eigenschappen van de woord- of letterafstand, de schaalfactor wordt overgenomen (zoals het geval is bij regelhoogte). Als gevolg hiervan kunt u het probleem tegenkomen dat wordt weergegeven in Fig. 6.23:

p (letterafstand: 0,25em; lettergrootte: 20px;) klein (lettergrootte: 50%;)

Deze ruime paragraaf kleine tekst die net zo ruim is, ook al wilde de auteur waarschijnlijk dat de spatiëring in verhouding stond tot de grootte van de tekst.

Rijst. 6.23. Overgeërfde ruimte tussen letters


In de regel zijn voor elk lettertype van een bepaalde grootte waarden vooraf ingesteld spaties tussen woorden, afstand tussen letters binnen een woord En visuele lijnhoogte. Opgemerkt moet worden dat de afstand tussen verschillende letters in monospaced-lettertypen zoals Courier New altijd hetzelfde is. Bij andere typen lettertypen hangt de afstand tussen letters af van de lettercombinaties - in de meeste gevallen ligt deze vast, maar tussen sommige letterparen wordt deze opzettelijk verkleind om de tekst visueel "gelijkmatiger" en gelijkmatiger verdeeld te maken. De afstand tussen de letters AU is bijvoorbeeld kleiner dan tussen de letters NP, omdat de letters N en P recht van vorm zijn en de letters A en U bovendien schuine randen hebben die in één richting zijn gericht. Als de afstand tussen de letters hetzelfde is, verschijnen A en U verder uit elkaar dan H en P. Om dit effect te verzachten, wordt de afstand ertussen enigszins verkleind, wat resulteert in een visueel uitgelijnde tekstregel. Dit fenomeen is een van de meest opvallende manifestaties van optische illusie.

IN CSS voor tekstblokken kunt u de grootte van de afstanden tussen woorden in de tekst aanpassen, dat wil zeggen, in wezen, de grootte van de ruimte wijzigen. U kunt ook de afstand tussen letters binnen een woord wijzigen (d.w.z. compacte of dunne tekst maken) en de hoogte van de tekstregel bepalen. Lijnhoogte is de afstand tussen de basislijnen van twee aangrenzende lijnen.

Er zijn geen analogen van dergelijke eigenschappen in HTML. Intervallen kunnen alleen worden ingesteld met CSS.

eigenschap voor woordafstand

Met deze eigenschap kunt u de afstand tussen woorden instellen. Elke lengte-eenheid is toegestaan ​​als waarde, zowel positief als negatief. Bij negatieve waarden wordt de afstand tussen woorden kleiner, en bij te grote waarden kunnen woorden te dichtbij komen of zelfs met elkaar ‘botsen’. Dit heeft een negatieve invloed op de leesbaarheid van de tekst, dus wees voorzichtig bij het instellen van dergelijke waarden. Het opgeven van percentagewaarden is niet toegestaan.

Laten we eens kijken naar een voorbeeld:

eigenschap met letterafstand

Deze eigenschap specificeert de afstand tussen letters binnen een woord. Het wordt op dezelfde manier ingesteld als de afstand tussen woorden in elke lengte-eenheid. Het is mogelijk om negatieve waarden in te stellen, waarbij de letters te dicht bij elkaar kunnen staan ​​of elkaar zelfs overlappen. Gebruik het daarom zorgvuldig. Het instellen van de waarde als percentage is niet toegestaan.

Met deze eigenschap kunt u letters uitdunnen, bijvoorbeeld in koppen, die er vrij origineel uitzien. Het wordt aanbevolen om enerzijds de afstand tussen de letters zo aanzienlijk te vergroten dat de titel visueel opvalt tegen de achtergrond van gewone tekst, en anderzijds de afstand tussen de letters niet te groot te maken, zodat de algehele perceptie van de tekst verslechtert niet.

Beide eigendommen woordafstand En letter-afstand kunnen samen worden gebruikt, omdat naarmate u de afstand tussen letters vergroot, u mogelijk tegelijkertijd de afstand tussen de woorden moet vergroten om de leesbaarheid te behouden en woorden te scheiden. Hier is een typisch voorbeeld van een headerontwerp:

H1 (woordafstand: 2 ex; letterafstand: 0,3 ex)

Definieert de afstand tussen tekens binnen een element. Browsers stellen de afstand tussen tekens doorgaans in op basis van het lettertype, de lettergrootte en de instellingen van het besturingssysteem. Om deze waarde te wijzigen wordt deze eigenschap gebruikt. Het is acceptabel om een ​​negatieve waarde te gebruiken, maar in dit geval moet u ervoor zorgen dat de leesbaarheid van de tekst behouden blijft.

Korte informatie

Benamingen

BeschrijvingVoorbeeld
<тип> Geeft het type waarde aan.<размер>
A && BDe waarden moeten in de aangegeven volgorde worden uitgevoerd.<размер> && <цвет>
Een | BGeeft aan dat u slechts één waarde uit de voorgestelde waarden hoeft te selecteren (A of B).normaal | small-caps
Een || BElke waarde kan afzonderlijk of samen met anderen in willekeurige volgorde worden gebruikt.breedte || graaf
Groepeert waarden.[bijsnijden || kruis ]
* Herhaal nul of meer keer.[,<время>]*
+ Herhaal dit een of meerdere keren.<число>+
? Het opgegeven type, woord of groep is optioneel.inzet?
(A, B)Herhaal minimaal A, maar niet vaker dan B keer.<радиус>{1,4}
# Herhaal dit een of meer keren, gescheiden door komma's.<время>#
×

Waarden

Alle lengte-eenheden die in CSS worden geaccepteerd, worden als waarden geaccepteerd, bijvoorbeeld pixels (px), inches (in), punten (pt), enz. De beste resultaten worden verkregen door relatieve eenheden te gebruiken op basis van de lettergrootte (em en ex ).

Normaal Stelt de afstand tussen de tekens in als normaal.

Zandbak

Winnie de Poeh was altijd niet vies van een beetje verfrissing, vooral niet om elf uur 's ochtends, omdat het ontbijt toen al lang afgelopen was en de lunch nog niet was begonnen. En natuurlijk was hij ontzettend blij om te zien dat het Konijn kopjes en borden tevoorschijn haalde.

div (letterafstand: 0; )

Voorbeeld

letter-afstand

Het hoogtepunt doorkruist, na zorgvuldige analyse, aanzienlijk de equatoriale grootcirkel van de hemelbol, zoals in 1994 gebeurde met de komeet Schoenmaker-Levy 9.



Het resultaat van dit voorbeeld wordt getoond in Fig. 1.

Rijst. 1. De eigenschap letterafstand toepassen

Objectmodel

Voorwerp.style.letterSpacing

Specificatie

Elke specificatie doorloopt verschillende goedkeuringsfasen.

  • Aanbeveling - De specificatie is goedgekeurd door het W3C en wordt aanbevolen als standaard.
  • Aanbeveling van kandidaten ( Mogelijke aanbeveling) - de groep die verantwoordelijk is voor de standaard is ervan overtuigd dat deze aan de doelstellingen voldoet, maar heeft hulp nodig van de ontwikkelingsgemeenschap om de standaard te implementeren.
  • Voorgestelde aanbeveling Voorgestelde aanbeveling) - in dit stadium wordt het document ter definitieve goedkeuring voorgelegd aan de W3C Adviesraad.
  • Werkconcept - Een meer volwassen versie van een concept dat is besproken en aangepast voor beoordeling door de gemeenschap.
  • Redactievoorstel ( Redactie ontwerp) - een conceptversie van de standaard nadat wijzigingen zijn aangebracht door de projectredacteuren.
  • Voorlopige versie ( Conceptspecificatie) - de eerste conceptversie van de standaard.
×

Leidend is de verticale afstand tussen tekstregels . Het wordt gemeten vanaf de basislijn van één regel tekst tot de basislijn van de regel erboven. Basislijn- Dit is de onzichtbare lijn waar de onderkant van de meeste letters zich bevindt.

De standaardwaarde voor automatische regelafstand is 120% van het lettertype (voor een lettertype met 10 punten is de regelafstand bijvoorbeeld 12 punten). Wanneer automatische regelafstand wordt gebruikt, wordt de regelafstand tussen haakjes weergegeven in het menu Regelafstand in het deelvenster Teken. Als u de standaardwaarde voor Automatische regelafstand wilt wijzigen, kiest u Uitlijning in het menu van het deelvenster Alinea en stelt u een percentagewaarde in van 0 tot 500.

Standaard is regelafstand een tekenattribuut, wat betekent dat u meerdere waarden voor regelafstand in één alinea kunt toepassen. De voorsprong van een lijn wordt bepaald door de grootste waarde in die lijn.

Opmerking.

Wanneer u met horizontale Aziatische tekst werkt, kunt u opgeven hoe de regelafstand moet worden gemeten: tussen de basislijnen van twee regels, of vanaf de bovenkant van de ene regel naar de bovenkant van de volgende.

Basislijn-offset

Gebruik de optie Basislijnverschuiving om geselecteerde tekens omhoog of omlaag te verplaatsen ten opzichte van de basislijn van de omringende tekst. Basislijnverschuiving is vooral handig bij het handmatig aanpassen van fragmenten of het aanpassen van de positie van pictogramlettertypen.

Spatiëring en tracking instellen

Kerning is een toename of afname van het interval tussen bepaalde karakterparen. Volgen is een toename of afname van de afstand tussen tekens in geselecteerde tekst of in een heel tekstblok.

Opmerking.

Kerning- en trackingwaarden zijn van toepassing op Japanse tekst, maar deze instellingen worden doorgaans ook gebruikt om de tekenafstand tussen Latijnse tekens aan te passen.

Tekstspatiëring kan automatisch worden uitgevoerd met behulp van de metrische of optische tekenspatiëringsfuncties. Bij metrische spatiëring(ook wel genoemd automatische kerning) gebruikt tekenparen die in de meeste lettertypen voorkomen. Lettertypen bevatten informatie over de afstand tussen letters in specifieke paren die wordt gebruikt tijdens het spatiëringsproces. Hier zijn enkele van deze paren: "LA", "P.", "To", "Tr", "Ta", "Tu", "Te", "Ty", "Wa", "WA", "We ", "Wo", "Ja" en "Yo". Metrische spatiëring wordt standaard toegepast, dus specifieke letterparen worden automatisch gespateerd tijdens het importeren of invoeren.

Sommige lettertypen bevatten gedetailleerde instructies voor spatiëring. Als een lettertype echter slechts minimale of geen tekenspatiëringsinformatie bevat, of als een woord of regel tegelijkertijd verschillende lettertypes en puntgroottes gebruikt, kan het nodig zijn om optische tekenspatiëring. Bij optische spatiëring wordt de afstand tussen aangrenzende tekens gekozen op basis van hun vorm.


A. Bron B. Tekst na het toepassen van optische spatiëring C. Tekst na het handmatig instellen van de spatiëringswaarde tussen de letters "W" en "a" D. Sms na het toepassen van tracking E. Combinatie van spatiëring en tracking

Je kunt ook gebruiken handmatige tekenspatiëring, wat ideaal is voor het aanpassen van de afstand tussen twee letters. Tracking en handmatige tekenspatiëring vullen elkaar aan. U kunt eerst individuele letterparen aanpassen en vervolgens tekstblokken compacter of dunner maken. Dit heeft geen effect op de relatieve spatiëring van letterparen.

Wanneer u klikt en een invoegpunt tussen twee letters plaatst, worden in het deelvenster Teken de tekenspatiëringswaarden weergegeven. Metrische en optische spatiëringwaarden (of een specifiek spatiëringpaar) worden tussen haakjes weergegeven. Op dezelfde manier verschijnen trackingwaarden in het deelvenster Teken wanneer u een woord of stuk tekst selecteert.

Tracking en spatiëring worden gemeten in 1/1000 em. Deze maateenheid is gelijk aan de breedte van de breedste letter in het lettertype en u kunt de grootte instellen ten opzichte van het huidige lettertype. Voor een 6-punts lettertype is 1 em gelijk aan 6 punten. Voor een 10-punts lettertype is 1 em gelijk aan 10 punten. Spatiëring en tracking zijn strikt proportioneel aan de huidige lettergrootte.

Opmerking.

Spatiëring- en trackingwaarden zijn van invloed op Japanse tekst, maar deze instellingen worden doorgaans gebruikt om de tekenafstand voor Latijnse tekens aan te passen.

Spatiëring instellen

    Voer een van de volgende handelingen uit:

    • Als u de spatiëringsinformatie die in het lettertype is ingebouwd voor geselecteerde tekens wilt gebruiken, stelt u de optie Spatiëring in het deelvenster Teken in op Automatisch of Metrisch.

      Als u de afstand tussen geselecteerde tekens automatisch wilt aanpassen op basis van hun vorm, stelt u de optie Spatiëring in het deelvenster Teken in op Optisch.

      Als u de spatiëring handmatig wilt aanpassen, plaatst u de invoegpositie tussen twee tekens en stelt u de optie Spatiëring in het deelvenster Teken in op de gewenste waarde. (Opmerking: als een stuk tekst is geselecteerd, kunt u de tekst niet handmatig spatiëren. Gebruik in plaats daarvan automatische tracking.)

      Advies. Om de spatiëring tussen twee tekens te verkleinen of te vergroten, gebruikt u Alt+pijl-links/rechts (Windows) of Option+pijl-links/rechts (Mac OS).

      Als u spatiëring voor geselecteerde tekens wilt uitschakelen, stelt u de optie Spatiëring in het deelvenster Teken in op 0 (nul).

      Aanvullend. Voor een lijst met sneltoetsen die worden gebruikt bij het werken met tekst typt u 'sneltoetsen' in de Help-zoekbalk.

Omgaan met spaties tussen letters en woorden

1. Afstand tussen woorden, woordafstand

Stelt de afstand tussen woorden in. Er kunnen positieve en negatieve waarden worden gebruikt. Bij een negatieve betekenis kunnen woorden elkaar overlappen.

De waarde van de woordafstand wordt beïnvloed door de waarde van de eigenschap text-align in het geval van uitgevulde tekst. Geërfd.

Syntaxis

P (woordafstand: normaal;) p (woordafstand: 2px;)
Rijst. 1. Afstand tussen woorden

2. Letterafstand

De eigenschap stelt de afstand tussen letters (trackingbedrag) en symbolen in. Kan positieve en negatieve waarden aannemen. Het is raadzaam om dit te gebruiken om de expressiviteit en leesbaarheid van koppen, definities, enz. te vergroten. Overgeërfd.

Syntaxis

P (letterafstand: normaal;) p (letterafstand: 2px;)
Rijst. 2. De afstand tussen letters wijzigen met behulp van de letter-spacing-eigenschap

3. Omgaan met witruimtes

De eigenschap verwerkt spaties tussen woorden en regeleinden binnen een element. Niet geërfd.

witruimte
Waarden:
normaal Standaardwaarde. Er wordt slechts één spatie tussen woorden ingevoegd; extra spaties worden weggegooid. Tekst wordt alleen ingesloten als dat nodig is.
nurap Verbiedt regeleinden, tenzij deze worden gebruikt
.
pre Spaties in de tekst worden niet genegeerd; de browser geeft extra spaties en regeleinden weer.
voorverpakken Behoudt de witruimte in de tekst door waar nodig regeleinden toe te voegen.
voorlijn Verwijdert extra spaties tenzij
.
voorletter Stelt de eigenschapswaarde in op de standaardwaarde.
erven Erft de eigenschapswaarde van het bovenliggende element.

Syntaxis

P (witruimte: normaal;) p (witruimte: norap;) p (witruimte: pre;) p (witruimte: pre-wrap;) p (witruimte: pre-line;)

4. Tabgrootte instellen

Als u de hoeveelheid inspringing wilt wijzigen die wordt verkregen met de TAB-toets, gebruikt u de eigenschap Tab-size. Eigenschapswaarden worden genegeerd wanneer de witruimte-eigenschap is ingesteld op een van de drie waarden pre-line , normal of nowrap .

Werkt alleen voor elementen