ისწავლეს ლოგოᲘᲡᲬᲐᲕᲚᲔ

ტექსტის გასტილვა

რას გულისხმობს ტექსტის გასტილვა?

როცა ელემენტის შიგნით ტექსტს ვწერთ, ის განლაგდება ტექსტის კონტენტ ბოქსში. ჩვეულებრივ ტექსტი ისე განლაგდება, როგორც ნებისმიერი ინლაინ ელემენტი. ის იწყება მარჯვენა ზედა კუთხიდან და მიიწევს მარჯვნივ. თუ ჰორიზონტალურად საკმარისი სივრცე არ რჩება, ტექსტი ჩამოიშლება ახალ სტრიქონზე და ასე გაგრძელდება კონტენტის დასასრულამდე.

ტექსტის გასტილვისას ორ ძირითად კატეგორიას განვიხილავთ:

  • ფონტის სტილები: თვისებები, რომლებიც განსაზღვრავს ფონტს, ანუ ფონტის სახეობა, ზომა, სიმუქე, დახრილობა და ა.შ.
  • ტექსტის სტილები: თვისებები, რომლებიც განსაზღვრავს ტექსტის განლაგებას, დაშორებებს და ა.შ.

ფონტები

განვიხილოთ ფონტის სტილები.

ფერი

ფერის გასასტილად გამოიყენება color თვისება. color-ის მნიშვნელობა შეიძლება იყოს:

  1. სახელით. (მაგ: red, green, blue).
  2. RGB და RGBA (მაგ: rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255)).
  3. HEX და HEXA (მაგ: #ff0000, #00ff00, #0000ff).
  4. HSL და HSLA (მაგ: hsl(0, 100%, 50%), hsl(120, 100%, 50%), hsl(240,100%, 50%)).

ფონტის შეცვლა

ფონტის შესაცვლელად გამოიყენება font-family თვისება. CSS-ში 5 ზოგადი ფონტი გვაქვს: serif, sans-serif, monospace, cursive და fantasy. ეს სახელები ძალიან ზოგადია, სხვადასხვა ბრაუზერში და ოპერაციულ სისტემაში ისინი განსხვავებულად გამოჩნდებიან.

Term განმარტება მაგალითი
serif ფონტები, რომლებსაც აქვთ მცირე დეკორატიული ხაზები ან დეტალები სიმბოლოების ძირებში და დაბოლოებებში In every obstacle lies an opportunity for innovation
sans-serif ფონტები, რომლებსაც არ გააჩნიათ serif-ს მსგავსი დაბოლოებები If you focus on what you left behind, you will never be able to see what lies ahead
monospace ფონტები, სადაც ყოველი სიმბოლო ერთნაირი სიგანისაა, ჩვეულებრივ გამოიყენება კოდის ჩამონათვალებში. Art is the bridge between imagination and reality
cursive ფონტები, რომლებიც განკუთვნილია ხელწერის იმიტაციისთვის. Curiosity is the compass that leads us to new worlds
fantacy ფონტები, რომლებიც განკუთვნილია დეკორატიული მიზნით. Knowledge is the greatest treasure, and it belongs to those who seek it

ფონტის სტეკი

შესაძლებელია ფონტის ჩატვირთვა ვერ მოხერხდეს სხვადასხვა მიზეზების გამო. ესეთ დროს შეიძლება განვსაზღვროთ სათადარიგო ფონტი, რომელიც მის ნაცვლად ჩაიტვირთება. მსგავს გადაცემას ეწოდება font stack, რაც გარანტიას მოგვცემს, რომ ძირითადი ფონტის ჩაუტვირთავობის შემთხვევაში სწორი ალტერნატივით ჩანაცვლდება.

CSS
p {
  font-family: 'Trebuchet MS', Verdana, sans-serif;
}
სათადარიგოდ შეგიძლიათ მოათავსოთ იმდენი ფონტი, რამდენიც დაგჭრდებათ.

ზომა

ფონტის ზომის შესაცვლელად საჭიროა font-size თვისების გამოყენება. თვისებას შეიძლება მივანიჭოთ აბსოლიტური მნიშვნელობა ან დინამიური. აბსოლიტური ერთეულებით განსაზღვრული ზომები არის ფიქსირებული და არ იცვლება, მაგალითად საიტის დაპატარავებისას.

აბსოლიტური მნიშვნელობებია:

ერთეული განმარტება ექვივალენტურია
px პიქსელი 1px = 1/96 ინჩის
cm სანტიმეტრი 1cm = 37.8px = 25.2/64in
mm მილიმეტრი 1mm = 1/10 სანტიმეტრის
in ინჩი 1in = 2.54cm = 96px
pt წერტილი 1pt = 1/72 ინჩის

აბსოლიტური სიტყვიერი მნიშვნელობებია:

ერთეული ექვივალენტური პიქსელები (px)
xx-small 9px
x-small 10px
small 13px
medium 16px (ნაგულისხმევი ზომა)
large 18px
x-large 24px
xx-large 32px
xxx-large 48px

დინამიური მნიშვნელობებია:

ერთეული განმარტება ფორმულა
rem დამოკიდებულია root ელემენტის font-size თვისებაზე. თუ ზომა მითითებული არ არის მაშინ ნაგულისხმევად root-ის ზომა არის 16px. 'ROOT_SIZE' * 'მნიშვნელობა'
rem დამოკიდებულია მშობელი ელემენტის font-size თვისებაზე. თუ მითითებული არ არის ფონტის ზომა მშობელ ელემენტზე, მაშინ იმუშავებს, როგორც rem 'SIZE' * 'მნიშვნელობა'
vh დამოკიდებულია ხედვის ფანჯრის (viewport) სიმაღლის 1%-ზე 'VIEWPORT_HEIGHT' * 0.01 * 'მნიშვნელობა'
vw დამოკიდებულია ხედვის ფანჯრის (viewport) სიგანის 1%-ზე 'VIEWPORT_WIDTH' * 0.01 * 'მნიშვნელობა'
% დამოკიდებულია მშობელი ელემენტის შესაბამისი თვისების მნიშვნელობის პროცენტზე. 'PARENT_VALUE' * ('მნიშვნელობა' / 100)
მიუხედავად ბევრი ერთეულისა მეტწილადად გამოიყენება შემდეგი მნიშვნელობები: px, rem, em, vw.

ფონტის სტილი, ფონტის სიმუქე, ტექსტის ტრანსოფრმაცია და ტექსტის დეკორაცია

CSS-ში გვაქვს ოთხი ძირითადი თვისება, რომლებიც ტექსტის სტილს ცვლის.

font-style: გამოიყენება ტექსტის დახრილი (italic) სტილის ჩასართავად ან გამორთვისთვის (ამ თვისებას ძალიან იშვიათად გამოიყენებ თუ სპეციფიკურად არ გსურს ტექსტის დახრა):

  • normal: ტექსტს აბრუნებს ნორმალურ ფორმაში (თიშავს italic-ს).
  • italic: ტექსტს დახრის italic-ის სტილში.
  • oblique: ტექსტს დახრის italic-ის მსგავსად ოღონდ მცირედი განსხვავებით.

font-weight: განსაზღვრავს, რამდენად მუქია ტექსტი. მას აქვს მრავალი შესაძლო მნიშვნელობა, განსაკუთრებით მაშინ, თუ ფონტს აქვს სხვადასხვა ვარიაციები (მაგალითად, light, normal, bold, extrabold, black და სხვა). თუმცა, პრაქტიკაში ყველაზე ხშირად გამოიყენება normal და bold.

  • normal, bold: ნორმალური და მუქი.
  • lighter, bolder: აყენებს ელემენტის ტექსტის სიმუქეს ერთი დონით უფრო ღია (lighter) ან მუქ (bolder) ვარიანტში.
  • 100 - 900: რიცხობრივი მნიშვნელობა, რომელიც მნიშვნელობას მიანიჭებს.

text-transform საშუალებას გაძლევთ შეცვალოთ ტექსტის ფორმატი.

  • none: არ ხდება ტექსტის ტრანსფორმაცია.
  • uppercase: ყველა სიმბოლო გადადის მაღალ რეგისტრში.
  • lowercase: ყველა სიმბოლო გადადის დაბალ რეგისტრში.
  • capitalise: ყველა სიტყვის პირველი სიმბოლო გადადის მაღალ რეგისტრში.
  • full-width: ყველა სიმბოლოს ჩასმა ხდება ფიქსირებულ ზომაში, რაც ჰგაქვს monospace-ის სტილს. მაგალითად: ლათინურ სიმბოლოებს ეძლევა შესაძლებლობა, სწორად მოთავსდნენ ჩინურ, იაპონურ, კორეულ და მსგავს ენებთან.
  • math-auto: ტექსტი ავტომატურად იღებს მათემატიკური italic სტილს საჭირო ადგილებში.
full-width მუშაობს მხოლოდ შემდეგ ბრაუზერებში: firefix, safari და IOS WebView. math-auto არ მუშაობს safari ბრაუზერში.

text-decoration განსაზღვრავს ტექსტის დეკორაციას (მეტწილადად გამოიყენება ბმულის ელემენტთან).

  • none: აუქმებს არსებულ დეკორაციებს.
  • underline: ტექსტის ხაზგასმა.
  • overline: ხაზის დამატება ტექსტის ზედა მხარეს.
  • line-through: ტექსტის გადახაზვა.

გაითვალისწინეთ, რომ text-decoration ერთდროულად რამოდენიმე მნიშვნელობასაც ღებულობს, მაგალითად:

CSS
a {
  text-decoration: underline overline;
}

ასევე text-decoration არის მოკლე თვისება, რომელიც მოიცავს text-decoration-line, text-decoration-style და text-decoration-color თვისებას. ამ კომბინაციებით შეგიძლიათ შექმნათ საინტერესო ეფექტები, მაგალითად:

CSS
p {
  text-decoration: line-through red wavy;
}

ტექსტი

ძირითადი ფონტის თვისებების განხილვის შემდეგ, გადავიდეთ იმ თვისებებზე, რომლებიც გამოიყენება ტექსტების გასასტილად.

განლაგება

ტექსტის განლაგების შესაცვლელად გამოიყენება text-align თვისება. ტექსტის გადაადგილება სრულდება მის არსებულ ყუთის მოდელში.

  • left: ყოველთვის მარცხენა მხარეს მოთავსება.
  • start: მსგავსია left თუმცა თუ direction: rtl არის მითითებული მოთავსდება საპირისპიროდ.
  • right: ყოველთვის მარჯვენა მხარეს მოთავსება.
  • end: მსგავსია right თუმცა თუ direction: rtl არის მითითებული მოთავსდება საპირისპიროდ.
  • center: ყოველთვის ცენტრში მოთავსდება.
  • justify: ყოველთვის ტექსტს ისე ანაწილებს, რომ ყველა ხაზი ერთნაირი სიგანის იყოს.

ხაზის სიმაღლე

line-height თვისება გამოიყენება სიმაღლის დასაყენებლად ხაზებს შორის. ამ თვისებას შეუძლია გამოიყენოს ზოგადი ზომის ერთეულები და დინამიური მნიშვნელობა.

CSS
p {
  line-height: 1.6;
}

თუ მხოლოდ რიცხვს გადავცემთ მაშინ თვისება მიიღებს მნიშვნელობას შემდეგი ფორმულით:

font-size * line-height
რეკომენდირებულია line-height თვისებაზე 1.5-2 მდე მნიშვნელობის გადაცემა.

სიმბოლოსა და სიტყვის დაშორება

letter-spacing და word-spacing თვისებები საშუალებას გაძლევთ განსაზღვროთ სიმბოლოსა და სიტყვებს შორის დაშორება ტექსტში. თვისებას შეიძლება მივანიჭოთ

ფონტის shorthand

ფონტის შემოკლებული (shorthand) თვისება, რომელიც ერთდროულად რამდენიმე ფონტის მახასიათებელს აერთიანებს.

CSS
p {
  font: italic small-caps bold 16px/1.5 sans-serif;
}

ეს კოდი აერთიანებს შემდეგ თვისებებს: font-style, font-variant, font-weight, font-stretch, font-size, line-height და font-family.

აუცილებელია font-size და font-family-ის თვისების დაწერა, როცა ვიყენებთ font-ის თვისებას დანარჩენი სურვილისამებრ.

დახრილი ხაზით / უდნა იყოს ჩასმული font-size და line-height თვისებას შორის.

font თვისების ჩაწერის თანმიმდევრობა:

font: [style] [variant] [weight] [size]/[line-height] [family];

გამოცადე პრაქტიკაში

შეგიძლია შესწავლილი მასალა პრაქტიკაში გამოსცადო!

ისარგებლე სტატიაში ჩაშენებული მარტივი ედიტორით ან ცალკე მზა ედიტორით, რომელსაც უფრო ბევრი ფუნქციონალური ნაწილი გააჩნია.

შეჯამება

ამ სტატიაში განვიხილეთ CSS-ის ტექსტისა და ფონტის დასტილვის თვისებები.

გამოყენებული ლიტერატურა