Perfection or Vanity

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.

Em Calculator 2.0

07 lutego 2007

Em Calculator 2.0

Greetings, English-speaking users. Although this site is written in Polish, feel free to ask questions in the form below, and I’ll try to answer them. If you seek immediate help, you can also send me an email.

Wypuściłem nową wersję mojego kalkulatorka emów. Em Calculator to narzędzie przydatne do przeliczania wartości pikselowych (uzyskiwanych przykładowo z Photoshopa) na emy - jednostki zależne od wielkości tekstu. Emy do budowania całego designu moim zdaniem się nie nadają (chociaż taki layout jest całkiem całkiem), ale znakomicie poprawią wygląd elementów od tekstu zależnych.

W nowej wersji:

  • wszystko lata na jQuery
  • jest dostępne zapisywanie ustawień na ciasteczkach
  • można edytować nazwę węzła po dwukliku na nim
  • wszystkie obliczenia są przeprowadzane od razu
  • explorer strzelił focha (może kiedyś poprawię)
  • mamy nowy design

Zmiany te są wyjściem naprzeciw prośbom ogromnej fali użytkowników, którym Em Calc przypadł do gustu. Po ostatnim występie na CSS Beauty liczba dodań na del.icio.us przekroczyła 1000. Hehe. :> Planuję jeszcze parę dodatków zwiększających użyteczność, zawsze też możecie prosić o jakieś opcje w komentarzach. :-)

Informacje i hiperłącza

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.

Informacje o wpisie

Napisał riddle 07 lutego 2007 o 16:46

Kategorie: CSS, Moje dzieła, Narzędzia, Web 2.0

Dodaj do:

Wpisy archiwalne

Archiwum miesięczne

  1. zrób może maksymalną ilość otwieranych „podkategorii” kalkulatora bo przy 10 już ten 10 ucieka pod ramkę i go widać tylko w połowie.

    btw. przydatne

  2. Swego czasu próbowałem toto przerobić na rozszerzenie („stacjonarne” nazwijmy to) do Fx ale mnie XUL denerwował i projekt porzuciłem.

    A wersji 2.0 to już na pewno nie przerobię, zbyt skomplikowana jest :-)

  3. Koval: Niektórzy mają więcej jak 1024 pikseli wzdłuż. :-]
    Ktoś: No jak wolisz. ;)

  4. nawiązując do tego co Ktoś napisał: może by tak wypuścić wersję offline – transferu by nie zjadała (jaki by nie był ;]), reklam i tak tu nie dajesz – więc takie coś byłoby miłe – tym bardziej że czasem net padnie, czasem serwery, czasem dns’y itd

  5. @riddle no dobra niech ci będzie ale mam 1152. to doczepie się do złego linku w kalkulatorze do jogga :P zrobiłeś kropke [.] zamiast myślnik [-] i link jest fake

  6. imo

    1. nowe kolory są be :P
    2. można by nie dodawać zera przed kropką ( .667em dobrze, 0.667em źle ) ;)
    3. jak zmieniam nazwę noda, to żeby od razu zaznaczenie na nazwie było, nie jak teraz musze usunąć lub zaznaczyć tekst

    a co do offline-version to na całe szczęście mam poprzednią na dysku, ładniejsza mi sie wydaje ;)

  7. No dobra, ale 0.667em nie jest źle, jest inaczej.
    Zmiana nazwy node’a – o tym samym myślałem, muszę coś zrobić z selection, bo kiedyś focus() ładnie zaznaczał całość, ale się dobre skończyło.

    Offline version… sprawdza się, jak są aktualizacje. Na przykład dokumentacja jQuery ssa po API nowości. Nie będę zachęcał do ssania, bo im nowsza wersja tym lepsza, jeśli nie kolorystycznie (kurka, ludzie… userCSS to nie jest czarna magia), to funkcjonalnie.

  8. Piotr Usewicz 8 07 lutego 2007, 17:16

    Riddle, a nie lepiej zrobic z tego Widget? :] In other words, moge przerobic na widget ;]

  9. A przerób, mnie Widgety latają koło… no, wiesz. ;)

  10. [Riddle]: „kurka, ludzie… userCSS to nie jest czarna magia”

    ja tylko oceniałem wersję od-autorską ;)
    i z pewnością wygląd sobie zmienię ;]

    [Riddle]: „mnie Widgety latają koło… no, wiesz. ;)”

    ROTFL :D

    E: btw dlaczego lista numerowana nie jest numerowana ?

  11. byles tez na blogu simona http://simonwillison.net/. normalnie gwiazda socjometryczna

  12. Znalazłem mały bug w kalkulatorze.
    Przy przejściu z pola z nazwą, bez zatwierdzenia jej enterem, do pola z ilością pikseli i próbie wpisania tam jakiś cyfry przeliczona wartość w emach wkleja się do drugiego inputa zamiast do trzeciego.

    A na marginesie. Czy te pola nie mogłyby być nieco dłuższe?

  13. Loonatic 13 07 lutego 2007, 18:57

    Przy node11 dodanie kolejnego node zwiększa mi użycie procka do 50% i trochę się przycina, a przy dodaniu 14-16 node karta w której jest otwarty kalkulator zawiesza się. Czego to może być wina?

  14. kef: Naprawię, dzięki.
    Loonatic: muszę zoptymalizować kod jak widać, nie powinien tak latać po całym dokumencie.

  15. randomuser@hotmail.com 15 07 lutego 2007, 20:09

    I love this tool, I use it on a daily basis.
    Thank you so much. :)

  16. Emy do budowania całego designu moim zdaniem się nie nadają (...)

    Nic bardzo dużego (i ładnego :P) nigdy nie budowałem, ale generalnie staram się używać emów gdzie tylko się da. Odnośnie budowania z emów wrzucam pierwszy raz coś pod Strona WWW co kiedyś dzięki emom udało mi się ładnie uzyskać (przy powiększaniu czcionki).

  17. Rozszerzenie do Firefoksa? Mogę pomóc :D

  18. Uwolnij diva. ^^
    Wywal tego overflowa i niech ew. body dostaje pasek przewijania wtedy, kiedy trzeba.

  19. Pizzadude: Polecam jeśli jeszcze nie masz w swoim Fx Stylish

  20. To jest skrin z Opery. ;)

  21. To nie o to chodzi z tym Stylish, hash pisze Ci o UserCSS. A sugestia dobra, zmienię to. Pozwolicie jednak, że nie teraz, mam trochę ważniejszych rzeczy na głowie, a czasu do końca tygodnia mało. :P

  22. To miała być reklama alternatywy ;]

  23. Off topic, bo jakoś nie odpowiadasz na e-maila.
    Czy przeczytałeś maila na Gmailu dotyczącego Firebuga?

  24. Tyhagara 24 10 lutego 2007, 12:38

    W ogóle z tego nie korzystam, bo nie jest mi potrzebne, ale wygląda świetnie.

  25. Jestem dokładnie tego samego zdania. Naprawdę fajnie zrobione.

  26. Riddle, domyśliłem się. Chociaż w Operze to więcej babrania się niż efektu. ^^

  27. Thanks for this great tool! Greetings from Germany, Micha

  28. (Komentarz zmodyfikowany 18.02.2007 o 07:47)

    Myslę, ze to zwyczajna padaczka. Chuj. Syf. A Riddle to ciota.

  29. Thank you very much for your helpful script.

    With best regards,

    Mathias (Germany)

  30. Not works in ie6/ie7 (of course javascript is enabled in my config) it says all time:

    „I’m very sorry, but this page needs JavaScript enabled browser. If you happen to use tools like NoScript, turn them off please. If you still encounter problems, consider upgrading your browser.”

    I’m not considering upgrade to ie8 yet… :)

    Anyway in firefox it works, and great!

  31. Thanks for kind words, appreciate it. :)

    stm: That’s right, IE support is planned but now I simply disabled JS files for this browser – it acts too weird.

  32. piXelRider 32 27 lutego 2007, 05:20

    Świetnie to działa :) Riddle, wiedziałeś, że twój EmCalc’ jest na Protolize ? ;)

  33. Dzięki za uznanie. ;)
    Tak, wiem, jest w dużej ilości miejsc (śledzę je via Technorati), co mnie niesamowicie cieszy.

  34. PT to EM and PT to PX would be helpful. Designers often cannot convert from what they see in Photoshop to a format used on the web and I would like to have a place to send them to convert it themselves. Tool is promising.

    Thank you,
    Sherri

  35. A właśnie PT do EM lub PX też by się przydało (można w przyszłości zrobić opcje dla kalkulatora uwzględniającą to).

  36. Trochę nie w temacie, ale zostałeś dopadnięty: http://draakhan.jogger.pl/2007/03/03/dopadniety/. Zapraszam do udziału :.

  37. Andrey Sorochan 37 17 marca 2007, 07:15

    Nice one! :D

  38. Em Calculator 2.1

    Dzisiaj wypuściłem zestaw poprawek dla kalkulatora przeliczającego piksele na emy. Wzrosła głównie użyteczność - oberzyjcie changelog (dostępny pod → more), aby dowiedzieć się szczegółow. Em Calc.

  39. Chciałbym dodać, że bardzo przydałaby się funkcja, dzięki której można by było eksportować i importować ustawianie klocków. Wiele osób tworzy daną stronę internetową przez więcej niż jeden dzień. Trzeba na koniec pracy robić screena ustawień bloczków, żeby następnego dnia wprowadzać ustawienie emów od nowa. A jakby była taka opcja, o której wspomniałem wyżej, na koniec pracy można by było wyeksportować sobie plik z ustawieniami, a przy następnej pracy z designem i emami z powrotem je sobie zaimportować. Czekam na odpowiedź.

    pozdrawiam,
    kiero

  40. David Kernow 40 17 maja 2007, 14:13

    Thanks for this useful little tool! I also appreciate its fine presentation.
    Is there a stand-alone version for offline use…?

    Best wishes,
    David

  41. Would it be too troublesome to add the line-height calculation ability as well? That would make it possible to have everything aligned to similar baseline. Baseline grids look really good.. :)

  42. Yeah, baseline grids are awesome, I tried make one in this layout. :) But I used another set of nodes to illustrate myself the dependance.

    body
        p {  }
        p(lh) { }
            em { }
            em(lh) { }
    

    Thanks David and everyone else. I’m preparing some update and I think you’ll like it. :)

  43. Wiedziałem już o pierwszej wersji tego kalkulatora, ale dopiero teraz kiedy zrozumiałem sposób obliczania jednostek em w poszczególnych elementach kodu wykorzystałem go w 100%. W ramach podziękowania wspomnę, o tym skrypcie w jednym z artykułów, aby inni także mogli go poznać

  44. Great tool. – And it actually seems to work great. I’m using IE7 and has no problems.

    I was wondering if you could provide the formula. I’m currently working on at Client solution to be running in trucks and would like to Make a c# class where you can create fonts from sizes in pixels.

    So basically i need to convert any input in pixels into em’s.

    (Sorry if i misunderstood anything, i actually don’t understand a single word of your website ;-)

  45. Trying to access it with Firefox 2.0.0.11 i’m always presented with the no javascript error message, wether i activate the execution of js or not.

  46. Could you update the jQ and code for Fx3? Save doesn’t work.

  47. If I set body to 11px I get 0.69em which seems to be correct but when I create a node under that with 881px I get 80.09em which actually is wrong it should be 79.64em. It’s not much but in pixels it actually differs 5px! And since I use that to resize an image it looks like crap. So I think you’ll have to tweek your calculations just a little bit. Thanks for an otherwise awsome tool!

  48. Interesting point, thanks. I think I should take a closer look on my current rounding implementation (AFAIR it’s JavaScript’s native one).

  49. Coming here with Firefox 3b5 – JavaScript enabled – and it tells me „sorry but you need a browser with JavaScript enabled”.

    I don’t know what you’re using to detect JS, but it doesn’t work.

  50. I’m not detecting JavaScript, that message is embedded in HTML by default and it gets removed by JS when adding a layer of functionality. If something in JS is broken, then you see this message.

    And now straight to the point – Firefox 3 decided to change the way window.globalStorage API works and now it checks for any cross-domain references, resulting in a security error. I will fix this after Fx3.0RC1 is available.

  51. The server on which the calculator is on seems to be down now… :-(
    I don’t want to be stressy… but please please please, restore it as soon as possible, I always use your application and it’s the only one I can find…
    Thank you and many many compliments. :)

  52. Hi,

    like others I’ve discovered that the server of the calculator is down. Is it possible to activate again because this tool is in a lot developers toolbox.

    Maybe mirroring is an option.

    Greetz and keep up the good work!

  53. I agree with the above comments, wish i had saved a local version now! Been looking for the JS file but can’t find it on the web :(

  54. Very sorry about the downtime. I was moving domain and files to another server. I hope the uptime will be much better now.

    Next time try contacting me directly.

  55. Hi,
    I cannot get session saving to work, either in FF2 or in IE6- is it just me?

  56. IE6 support is experimental. Regarding Firefox 2, it should work. But if it’s not, try Firefox 3.

  57. Thanks for this tool, it looks great and works really well. I’ve been using it every day since I came across it.

  58. Hi all!

    I cannot save sessions either… I use FF 3.0.8

    Thanks :)

  59. Sprawdź to:
    http://net.tutsplus.com/articles/web-roundups/20-tools-to-make-the-life-of-a-web-developer-easier/