Em Calculator 1.0

Project: Terminated

Blog nie jest już dalej prowadzony ani aktualizowany. Mimo tego, wpisy i komentarze są dalej dostępne. Możesz przeczytać pożegnalny wpis albo przejść do archiwum.

Problem z emami w CSS jest taki, że po piątym zagnieżdżonym elemencie traci się orientację jaką wartość to teraz trzeba wstawić (zwykle na podstawie makiety projektu). Można sobie pisać komentarze z pikselami na boczku, ale i tak jest to męczące.

Napisałem więc w JavaScript aplikację do zarządzania takim drzewkiem DOM - Em Calculator 1.0 - sama liczy odpowiednie wartości em oraz zaokrągla do którego miejsca po przecinku chcemy. Można także wpisywać nazwę gałęzi i to niekoniecznie trzeba element - jeśli chcesz ustawić grubość podkreślenia w emach to proszę bardzo, zapisz to sobie. ;)

Todo:

~~Support dla IE~~ Działa, trzeba tylko kliknąć Calculate
Optymalizacja JS (usunięcie zdublowanego kodu)
Generowanie gotowego CSS-a?
Edycja nazwy elementu?
~~Usuwanie elementów?~~ Zrobione

Komentarze? Pomysły? Wrzuty? ;)

Tagi wpisu: calculator, converter, css, em, em-calculator, javascript, px, tool

Informacje i hiperłącza

Piotr Petrus 'Riddle'

Blog o projektowaniu zgodnych ze standardami stron internetowych.

Praktyczne przykłady, sztuczki CSS, sposoby obchodzenia błędów przeglądarek, lekki i nieinwazyjny JavaScript, użyteczny design, dostępność i skrypty użytkownika.

RSS

Informacje o wpisie

Napisał riddle 28 maja 2006 o 08:53

Kategorie: CSS, JavaScript & DOM, Moje dzieła, Narzędzia

Wpisy archiwalne

Archiwum miesięczne

Dzięki!

Komentarze

ludwik 1 28 maja 2006, 09:33

A Pan to skąd jest? Z Polski czy skąd inąd? Przydałaby się polska wersja językowa. Ja tam z angielskim problemów nie mam, no ale inni mogą mieć. A jak już Polak pisze skryptu to mógłby to robić po polsku...
A skrypcik bardzo fajny :)
Riddle 2 28 maja 2006, 09:35

Wychodzę z założenia, że prędzej Polak zrozumie angielski niż Anglik polski. ;) No a bardzo bym się cieszył, gdyby to gdzieś dalej dotarło. ;)

Dzięki za opinię, jakieś pomysły? :)
Oskar Krawczyk 3 28 maja 2006, 09:55

Całkiem fajna zabawka dla początkujących. Bardzo przydałoby się mieć możliwość usuwania elementów. Dodać -moz-border-radius i będzie gites ;-). Pozdrawiam
Riddle 4 28 maja 2006, 10:00

Czyżbyś Oskar implikował iż początkujący jestem początkujący? ;) (Dzień Świra style).

Bo akurat chciałem mieć to narzędzie od dawna (liczenie emów na papierze jest nudne :P), tylko czasu brakowało na napisanie. :P

*Mamrot* No i wszędzie Web2.0 się musi wcisnąć :D

Pozdrawiam także. ;) //Jabber.org padł, niedobry :(
Michał Stempień 5 28 maja 2006, 10:08

Bardzo przydatne, dzięki.
Dot 6 28 maja 2006, 10:20

Co do supportu dla IE - może się to wydać nierozsądne, ale chyba to nie ma znaczenia. To znaczy i tak każdy szanujący się webmaster ma więcej przeglądarek i nie korzysta na co dzień z IE, choćby ze względów bezpieczeństwa. A narzędzie to (w przeciwieństwie do wielu innych) raczej nikomu poza webmasterami się i tak nie przyda. Mam rację?
Tarnum 7 28 maja 2006, 10:21

A ja nie mogę zrozumieć czemu niektórzy używają tych całych em'ów, a nie pikseli...
Ale to pewnie przez to żem jeszcze jelonek :p
Oskar Krawczyk 8 28 maja 2006, 10:28

Traum, widziałeś kiedyś jak wygląda tekst oznaczony 11 pikselami na wysokich rodzielczościach? Jeżeli nie to uwież mi na słowo, że trzeba używać lupy albo ctrl+'+'. Przy em-ach i % nie ma tego problemu ponieważ skalują się razem z rozdzielczością (tudzież razem z wielkością layoutu). Taki tips z mojej strony – google powiedzą Ci więcej.

> Czyżbyś Oskar implikował iż początkujący jestem początkujący?

Nigdy w życiu ;-)
zx 9 28 maja 2006, 10:47

Genialne, genialne. Przyda się bez wątpienia. Do pełni szczęścia brakuje tylko usuwania elementu.
Ktos 10 28 maja 2006, 10:53

Cii, ani słowa na temat związanej z okrągłymi rogami technologii ekhm, ekhm - chcesz, aby prawnicy zaatakowali? ;-)

NaN.00 em. Fajna wartość. Jakaś poprawka by się przydała, aby zerowych wartości nie konwertowało pokazując głupoty.
hash 11 28 maja 2006, 12:09

Fajne 2 w jednym :)

Co do NaN.00 em to nowo utworzony element mógłby
mieć od razu wartość 1 em jak to jest w rzeczywistości.

A jak będzie usuwanie to będziesz sławny ;) .
Bonawentury 12 28 maja 2006, 13:12

A gdzie mozna znalezc informacje nt. em-ow? Google na haslo "em", "jednostka em" nie bardzo reaguje.
Michał Stempień 13 28 maja 2006, 13:20

Bonawentury: em to po prostu relatywna jednostka wielkości przyjmująca jako 1 aktualną wielkość czcionki.

Np. jeśli masz div'a w którym font-size jest równy 10 pixelom to żeby okreslić mu szerokość 600px możesz dać width: 60em. Jeśli jednak zwiększysz czcionkę w tym elemencie do równej 12px otrzymasz szerokość równą 720px (= 60 * 12px) .
Scrolltao 14 28 maja 2006, 13:24

Polecam w3schools.com
medyk 15 28 maja 2006, 13:48

Świetny pomysł.. też myślę, że powinieneś dodać polską wersję językową..dla samej zasady, Polacy nie gęsi ;-)
Bonawentury 16 28 maja 2006, 13:53

Michał Stempień: Ale ogólnie em jest dla fontów, prawda? Czy można (a nawet trzeba) wykorzystywać do określania wymiarów divów, marginesów, obramowań itp.?
Patrys 17 28 maja 2006, 14:09

W składzie używa się trzech jednostek: em, en i pt.

Pt to punkty, zależą od aktualnej rozdzielności druku (podawanej w punktach na cal).

Em to szerokość/wysokość litery "M" w danym foncie.

En (nazywana czasem "krótką enką") to to samo dla literki "N".

Dwie pierwsze są powszechnie używane w CSS, punkty dla szablonów wydruku, a emki dla szablonów ekranu.
kiero 18 28 maja 2006, 14:12

Ooo wczoraj gadaliśmy o tym kalkulatorze i nie wiedziałem, że tak szybko go zrobisz. Dla mnie to bardzo przydatna rzecz.

Btw, z tych wszystkich punktów TODO najbardziej przyda się usuwanie ;)
medyk 19 28 maja 2006, 15:15

Patrys: Em nie jest szerokością czy też wysokością litery 'M' w danym foncie, też tak kiedyś myślałem. Generalnie chyba od takiej definicji się zaczęło i dlatego wiele źródeł tak podaje ale dzisiaj to nie jest to zgodne z prawdą. Em jest bardziej wysokością bloku jaki font wykorzystuje - http://en.wikipedia.org/wiki/Em_%28typography%29
En też konkretnie nie jest szerokością litery N. jest to dokładnie połowa Em, nie mniej zazwyczaj się to sprowadze do szerokości litery 'N' -
http://en.wikipedia.org/wiki/En_%28typography%29

Bonawentury: Em jest przedewszystkim odniesieniem do aktualnej wielkości fontu, więc logicznie ujmująć - jak budujesz stronę, w której główną zawartością jest tekst, to jak najbardziej powinienieś szerokość/wysokość bloków odwoływać do tej jednostki.
Riddle 20 28 maja 2006, 16:13

Ktoś: Wiesz, zwykle wiem że powinno się robić jakieś idiot-proof czekpointy, ale tutaj to nie ma sensu - funkcja będzie działała wolniej, a JavaScript jak widzisz nie pluje dialogami na lewo i prawo.

Edit: Dodałem usuwanie, może być wymagane przeładowanie bez cache.
Piotr Konieczny 21 28 maja 2006, 22:39

O, to przy okazji:

Gdzie mam ustawic jakis _domyslny/referencyjny_ rozmiar w pikselach, zeby potem moc korzystac z em do okreslania rozmiaru czcionek?

Powaznie pytam. Zawsze podawalem wszystko w px.

Zeby nie bylo, ze jestem len ;-) zajrzalem do Ciebie do CSS (pobieznie) i widze:

body {
background: #FFF url(r-crown.jpg) center top no-repeat;
font: normal 100% Arial, Helvetica, Tahoma, Verdana, sans-serif; /* 16px */
color: #000;
}

(No i pytanie, jak owe 100% robi 16px? Nigdzie powyzej nie widze definicji 16px jako jakiegos punktu odniesienia...
Riddle 22 28 maja 2006, 22:41

Odniesienie masz w opcjach przeglądarki - ale jest to standardowa wartość wszędzie (są małe wyjątki, ale to dawno temu na Macach o ile pamiętam). Nie dałem 16px na sztywno, ponieważ IE przy tak ustawionej wielkości tekstu na body nie pozwoli skalować reszty tekstu mimo że dalsze reguły są na em'ach.
delphiak 23 29 maja 2006, 14:03

denerwujący jest pojawiajacy sie na kazdym miejscu tekstu elementu pointer..
eXtreme 24 29 maja 2006, 14:26

[Riddle]: „Edit: Dodałem usuwanie, może być wymagane przeładowanie bez cache.”

Tylko to usuwanie nie działa na Operze (9 beta2). Owszem - usuwa się, ale sam [x], a nie cały element ;)
Riddle 25 29 maja 2006, 17:34

delphiak: Pointer jest dla label. Kliknij, a się przekonasz.

eXtreme: Woot. removeChild() nie działa? :/ Sprawdzę…
delphiak 26 29 maja 2006, 17:45

Riddle: no ok, ale jaki jest sens dawac label do niedytowalnego pola z wyliczonym 'em' ? skoro i tak to nic nie daje...
Riddle 27 29 maja 2006, 21:19

Z Operą chodziło o nazwę removeNode() - najpewniej kolidowało z jakąś funkcją DOM, która w Firefox i IE była ignorowana. Już działa. :>
pablo 28 30 maja 2006, 00:26

Nie działa "Anuluj" w oknie dialogowym. Uuwa noda tak czy siak.
pablo 29 30 maja 2006, 00:27

Aha, zeby nie było ze nie dopowiedziałem. Nie działa w FF.
Riddle 30 30 maja 2006, 00:28

Działa, działa. A to co robisz to anulujesz wpisywanie nazwy elementu a nie dodawanie elementu. To nie windows. ;)
Davide 31 30 maja 2006, 14:54

Wow! Nice Tool!
shpyo 32 30 maja 2006, 20:50

Dzięki Riddle za to. Co prawda nie wykorzystam tego - ale za to już wiem jak "działają" em-y :))
Sija 33 31 maja 2006, 09:08

najs łan; jak wielu innych - zdelicjowałem ;>
D-man 34 21 grudnia 2006, 11:26

Nice tool Riddle.
Krym 35 31 stycznia 2007, 00:35

Właśnie tego szukałem :)
Tom Sieron 36 02 lutego 2007, 11:40

nie wiem czy widziales, dziś z CSS Beauty
linkują do Ciebie. Ehh sława, kobiety, szampan! To jest życie! ;) Chyba musze zalozyc w koncu bloga.
Don't know what podpis means 37 05 lutego 2007, 09:47

Nice work, What license is the calculator released under? can i download the code and make it even better and more usefull?
Riddle 38 05 lutego 2007, 15:14

This is „all rights reserved”, as you can see at the bottom of page. I’m working on new version of Em Calc, better and more useful. ;-) Stay tuned.

PS: Podpis mean signature.

Informacje i hiperłącza

Informacje o wpisie

Wpisy archiwalne

Dzięki!

Komentarze

Dodaj komentarz