CSS და ტექსტის ზომა

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

სულ მავიწყდება, რომ ერთხელ და საბოლოოდ გავარკვიო როდის, რა და როგორ ჯობია.

ახლა თქვენთან ერთად გავარკვევ : )

ზოგადი მიმოხილვა

ფარდობითი ერთეულები

em
% – პროცენტი
ex – ამ ერთეულს ‘x-height’-ს ეძახიან, 1ex დაახლოებით პატარა x-ის სიმაღლის ტოლია.  სიდიდე განსაზღვრულია იმ ფონტებისთვისაც, რომლებიც საერთოდ არ შეიცავენ x-ს.

ფიქსირებული ერთეულები

px – პიქსელი
mm – მილიმეტრი
cm – სანტიმეტრი
in – დიუმი (= 2.54სმ)
pt – point. CSS 2.1-მიხედვით ის დიუმის 1/72 ნაწილს უდრის.
pc – pica. 1 pica = 12 points

სტილის წერის დროს კიდევ გვხვდება ზომები xx-small, x-small, small, medium, large, x-large, და xx-large. ასევე smaller და larger. ბოლო ორი ფარდობითია მშობელი ელემენტის ზომის მიმართ. წინებს კი ზუსტად არ ვიცი რა ზომები შეესაბამება პიქსელებში, თუმცა სხვადასხვა ბრაუზერებში საკმაოდ სტაბილურად აჩვენებენ.

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

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

font-size-1

რატომ არ უნდა გამოვიყენოთ px?

IE არ მისცემს მომხმარებელს ასეთი ფონტის ზომის შეცვლას, რაც მოუხერხებელია. იგივე ეხება სხვა ფიქსირებულ ერთეულებს (mm, cm, in ა.შ.).

რატომ არ უნდა გამოვიყენოთ ex?

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

პროცენტის (%) გამოყენებას არაფერი უშლის ხელს, მაგრამ მაინცდამაინც კარგად აღქმადი არ არის კოდის წერა-კითხვის დროს.

თუმცა, ეს პიროვნულ არჩევანზეა დამოკიდებული.

და ბოლოს em

‘medium’ ზომის ტექსტი ბრაუზერებში default-ად 16px-ის ტოლია და ხანდახან რთული გამოსათვლელია ხოლმე აქედან em სიდიდე (იხ. ცხრილი).

ვებ დეველოპერებმა იპოვეს გზა ამ გამოთვლების გასამარტივებლად. მთელი საიტის ფონტის ზომას (body ელემენტში) ანიჭებენ ხოლმე 62.5%-ს. და ამის მერე 1em = 10px (რადგან em ფარდობითი გამოდის უკვე body-ის მიმართ). ასე რომ ნაცნობი პიქსელებიდან მარტივად შეგვიძლია გადავიყვანოთ em-ში 10-ზე გაყოფით.

აქვე გასათვალისწინებელია, რომ ეს ფარდობითობა მისდევს ელემენტების მთელს იერარქიას 😀 შვილს, მერე კიდევ იმის შვილს.. და ა.შ. ამიტომ კარგი იქნება რაც შეიძლება ნაკლები რაოდენობით თუ აღვწერთ font-size თვისებას. ისიც იერარქიების თავში.

არის კიდევ ერთი პატარა საკითხი : )

ბრაუზერები.

ბრაუზერებს აქვთ გვერდის ზომის და ფონტის ზომის რეგულირების შესაძლებლობა (თუმცა ქრომში ფონტის ზუმი ვერ ვიპოვე, მას მერე რაც მთელი გვერდის ზუმი ჩასვეს). უმრავლესობას (Google Chrome, Firefox, Opera, IE 7-8 …) default-ად აქვს მთელი გვერდის ზუმი.

რა განსხვავებაა?

ფონტის გადიდება/დაპატარავების დროს მარტო ფონტის ზომა იცვლება, ხოლო გვერდის ზუმის დროს გვერდი სურათივით იზრდება ერთიანად და ერთიანადვე პატარავდება.

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

იმ ბრაუზერში, რომელსაც მთელი გვერდის ზუმის საშუალება არ აქვს, ფიქსირებულ ზომიანი ტექსტი არაფრის დიდებით არ იცვლება. ასეთი რამ მომხმარებელს კონტროლის საშუალებას ართმევს (იქნებ ვერ ვხედავ კარგად და დიდი ასოები მინდა), ამიტომ არ ითვლება მიზანშეწონილად px-ის გამოყენება.

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

საბოლოო ჯამში,

გადავწყვიტე, რომ ამის შემდეგ ყოველთვის em გამოვიყენო ან პროცენტი.. 😛

საინტერესო საკითხავი აღნიშნულ საკითხზე:
px – em – % – pt – keyword
CSS Font-Size: em vs. px vs. pt vs. percent

Update: არა, ყოველთვის px-ს ვიყენებ და ბედნიერი ვარ :))

5 thoughts on “CSS და ტექსტის ზომა

  • 18 მაისი, 2009 at 23:12
    Permalink

    ver davetanxmebi statiis avtors 🙂
    chemi azrit fksirebuli pixelebi sruliad misagebia da aranari acilebloba araa momxrebelma cvalos fontiszoma. radgan xshir shemtxvevasi es afrtxis kesh akenes dizains…

    maksimum interfeisshi cashenebuli ponts mosamatebeli da mosaklebi…

    me piradaa vemxrobifadobiti fontebis gamokenebas.mitumetes tu dizaini pixel by pixel aris ackobili…

    Reply
  • 20 მაისი, 2009 at 11:50
    Permalink

    @lasharela
    ეგ უკვე გემოვნების საკითხია მე თუ მკითხავ.. მაგრამ ცვლილების საშუალება ნამდვილად უნდა ჰქონდეს მკითხველს. ხანდახან ისეთი წვრილი ასოებია, მირჩევნია დავაკოპირო ხოლმე სადმე და ისე წავიკითხო.

    ეხლა ახალ ბრაუზერებში იმის საშიშროება აღარ არის რომ თვალები და ნერვები დამაწყდება 🙂 იმიტომ რომ მაინც ცვლი გვერდის ზომას.

    ჰოდა… დიდი განსხვავება არ იქნება ალბათ რომელს ავირჩევთ px-ს თუ em-ს.
    პირიქით, ხანდახან em უფრო მოსაბეზრებელია. მავიწყდება ხოლმე სად ჩავსვი და მერე სხვადასხვა ზომები რომ ჩანს ერთ გვერდზე, ვხვდები რომ რომელიღაც მშობელში ჩაწერილი ზომა არ გავითვალისწინე.. 🙂

    Reply
  • 10 ივნისი, 2009 at 14:25
    Permalink

    ძალიან კაი პოსტია მომწურავი და საჭირო. 5+

    Reply
  • 10 ივნისი, 2009 at 14:27
    Permalink

    ”ა” გამომჩა ”ამომწურავში” 🙂

    Reply

კომენტარის დატოვება

თქვენი ელფოსტის მისამართი გამოქვეყნებული არ იყო. აუცილებელი ველები მონიშნულია *