Роман Кортез знает, что делает

    Работы этого человека обошли весь интернет, в том числе публиковались на Хабре. Самые известные, пожалуй, изображения Гомера Симпсона и Буша, реализованные с помощью CSS. Роман пошел еще дальше и еще в мае 2008 года выпустил программное обеспечение для получения CSS-представления монохромных изображений.




    Запись в блоге автора (там же инструкция по применению, eng)
    Прямая ссылка на программу (MS Windows)
    Поделиться публикацией
    Ой, у вас баннер убежал!

    Ну. И что?
    Реклама
    Комментарии 21
      0
      Было бы полезнее, если бы программа умела обрабатывать мелкие и простые иконки-значки. Так хочется, чтобы они были привязаны к размеру шрифта…
        +2
        16x16? В принципе можно попробовать даже тупо по точкам нарисовать :)
        256 точек + css правило на каждую.
          0
          Хм, может скоро (или уже) можно будет делать маштабируемые иконки с помощью SVG :)
          0
          прошлое не даёт покоя будущему ;)
            0
            интересно, это он точками заполняет?
              0
              Ctrl+A приблизительно покажет картину. Это буквы :)
            • НЛО прилетело и опубликовало эту надпись здесь
                –2
                полезная прога, только работает не всегда правильно :)
                  0
                  Спасибо за ссылку, пошел играться )
                    +5
                    1. Один только вынос position:absolute во внешний стиль из дивов и прибивание завершающей ";" в описаниях инлайн-стилей экономит 6 килобайт на тестовой картинке. (42671 -> 35667).
                    2. Еще в данной ситуации можно подумать о смене тега, на какой нибудь . Да не семантично, зато ощутимо снижает размер(-> 32885).
                    3. Во всех места, где встречаются стили типа «padding-left:5.23em;padding-top:6.11em» надо поменять на составные «padding:6.11em 0 0 5.23em» — это тоже сэкономит очень прилично
                    4. В
                      +5
                      Вот блин, хабрапарсер отхавал часть текста :(

                      Вот что было написано:

                      2. Еще в данной ситуации можно подумать о смене тега, на какой нибудь i. Да не семантично, зато ощутимо снижает размер(-> 32885).

                      4. В style опечатка — paddin вместо padding.

                      А вообще, имхо — это изврат :)

                        +1
                        Вот оптимизатор написал:
                        import re
                        import sys
                        filename=sys.argv[1]
                        input_data=file(str(filename) , 'rb').read()
                        input_data=input_data.replace('padding:','padding:');
                        input_data=input_data.replace('b{display:block; position:absolute;text-decoration:none;} i{display:block;text-decoration:none;}</style>','b{display:block; position:absolute;text-decoration:none;} i{display:block;text-decoration:none;}</style>',1)
                        reg_optimize = re.compile(r'<div style="position:absolute;padding-left:(\d+\.+\d+)em;padding-top:(\d+\.+\d+)em;"><div style="font-size:(\d+\.\d+)em;">•</div></div>')
                        result =reg_optimize.sub(r'<b style="padding:\2em 0 0 \1em"><i style="font-size:\3em">•</i></b>',input_data)
                        file(str(filename) , 'wb').write(result)

                        Только вместо • нужно написать & bull;
                          0
                          Ну и как — какой размер html из тестовой картинки после оптимизации получается?

                          чего тут происходит?:
                          input_data=input_data.replace('padding:','padding:');


                            0
                            я случайно запостил прогнанный через себя же текст программы, должно быть:
                            input_data=input_data.replace('paddin:','padding:');
                            input_data=input_data.replace('
                            ','b{display:block; position:absolute;text-decoration:none;}
                              0
                              А с размером чего? По моим прикидкам на глаз, после оставшегося не посчитанным правила с объединением паддингов, должно сэкономится еще 4-5кб, так что окончательный размер должен быть где то 28к, что достаточно мало по сравнению с тем, что предлагает прога по дефолту и всего в 2 раза больше исходной картинки :)
                                +1
                                Ну возьмем к примеру картинку «наш герой»:
                                Исходный размер — 42564 б (zip архив = 2893 б)
                                Оптимизированый размер — 28311 б (zip архив = 2799 б)

                                кстати хабр снова съел тег:
                                input_data=input_data.replace('</style>','b{display:block; position:absolute;text-decoration:none;</style>',1)

                                  0
                                  Ну я прям как в воду глядел, спасибо :)
                      +1
                      Круто. Вот наш герой :)
                        0
                        молодой какой-то
                          0
                          Такой молодой. И Красный Октябрь впереди.
                        0
                        имхо можно еще генерить вывод в UTF-8 и буллит заменить на соотвествующий символ (если конечно он есть в UTF)
                        Ну или вообще сгенерить xml с данными, а xsl-стили преобразуют эти данные в дивы или любую другую разметку с инлайн-стилями на клиенте (8

                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                        Самое читаемое