evølutiøn-515.net » CSS http://blog.evolution515.net Chaos ist nur eine andere Bezeichung für steigende Komplexität. Wed, 03 Jun 2009 22:55:19 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Custom fonts: text replacement via Canvas and VML http://blog.evolution515.net/article/custom-fonts-text-replacement-via-canvas-and-vml/ http://blog.evolution515.net/article/custom-fonts-text-replacement-via-canvas-and-vml/#comments Tue, 28 Oct 2008 13:29:55 +0000 Blu:RayNe http://blog.evolution515.net/?p=303 Still we have to wait until @font-face is ready in all modern browsers. We had text-replacement by Flash, by images created on the server and by half-working SVG so far. Now it’s time for another approach: text replacement via pure Javascript!

Basically the script draws JSON font outlines converted via a Perl-Script from TTF and uses both VML and Canvas for rendering. Only problem: text cannot be selected and copied to the clipboard anymore.

There’s work left to be done. Planned improvements:

  • Full support for @font-face rules, if possible
  • Support for hinting (this seems like a viable option)
  • Speed improvements, especially for IE
  • Work around Opera’s getComputedStyle() issues
  • Possible support for SVG backend
  • Work around needing to specify ‘typeface-js’ as a class name
  • More CSS support, including :hover and x-height
  • React to DOMNode* events to support DHTML

 

Great job: It’s working on all major modern and semi-modern browser (MSIE7). I’ll be using that! Thanks!

More here: http://typeface.neocracy.org/

]]> http://blog.evolution515.net/article/custom-fonts-text-replacement-via-canvas-and-vml/feed/ 0 WYSIWYG-Editors: They just don’t get it! http://blog.evolution515.net/article/wysiwyg-editors-they-just-dont-get-it/ http://blog.evolution515.net/article/wysiwyg-editors-they-just-dont-get-it/#comments Thu, 02 Aug 2007 18:51:13 +0000 Blu:RayNe http://blog.evolution515.net/article/wysiwyg-editors-they-just-dont-get-it/ When will you guys finally learn to write good documents?! Yesterday the popular JavaScript framework Ext 1.1 was released, including finally a WYSIWYG web-editor:

If you don’t see what’s wrong about that editor, let me help you: Nowadays, when you write a document or an article, you got different headlines, different paragraph types that when properly used, automatically let’s you create a table of contents, like seen on Wikipedia articles or in OpenOffice.org OpenWriter (or Microsoft Word). You have also style sheets that automatically do the work of assigning different homogenous styles to your headlines throughout the document.

But here again i don’t see any combo-box for formats! Buttons like “make text bigger” or “make smaller” or “font-family” or “font-size” do not make any sense at all and only encourages bad formatting!

Recently i searched for an alternative blogging client, but i could not use any of them because most did not even have a „format“-field. All my beloved stylesheets assigned to lists and headings here would have be gone! But that’s exactly why they exist! Are you crazy not using them in your editors?

As it goes for having toolbar buttons, these are are absolutly sufficient: “Format” “Remove Format” | „Bold“ „Italic“ | “Unnumbered List” “Ordered List” “Intend” “De-Intent” |  “Add Link“ “Remove Link“ | “Text-Foreground” “Text-Background” | “Insert Table” „Insert Image“  should be enough for most users!

]]> http://blog.evolution515.net/article/wysiwyg-editors-they-just-dont-get-it/feed/ 3 Post-load your JavaScript and CSS files! http://blog.evolution515.net/article/post-load-your-javascript-and-css-files/ http://blog.evolution515.net/article/post-load-your-javascript-and-css-files/#comments Wed, 25 Jul 2007 17:45:09 +0000 Blu:RayNe http://blog.evolution515.net/article/post-load-your-javascript-and-css-files/ If you look at todays web 2.0 sites you will realize there is often a heavy load on external JavaScript resources, CSS files and probably images. Above compressing and optimizing the files and merging multiple files (also background-images), there is not much room to further optimize the page loading process.

One problem of many modern sites is that they often provide optional functions for the user at the price of loading the main libraries all at once ending in a terrible site- and javascript-performance. I’ve already spoken about that once before and see more and more a good chance for web-applications based on Flex, or a real interface-language or perhaps Java. But we’re speaking about web-sites here not applications (anyway you could intermix them)!

Imagine a „passage-way“ or „pass-by“ page: How many of your users will use your “godly” fully featured search-window that you’ve implemented with Ext or the Prototype Window-Script and that runs inside the page? And what about  overall JS and CSS footprint about 150KB? Really needed? And oh, it’s the only part of the website you’re using these scripts.

Maybe one of ten users will use your “godly” feature. The others all have to load the site, the slow JavaScript and you will pay bandwidth.

So, why don’t you just simply load the parts of the site when you need them? AJAX – it’s all about that but still people are loading tons of libraries on every single site!?

As you might guessed i worked on such a script today. It works pretty well in Firefox and Opera (not yet Safari and fucking MSIE), and i still have to come up with some issues and heavy testing (especially on older browser that probably don’t wanna let their DOM injected JavaScript or CSS; so a good wrapper for <script> is necessary). I just wonder why no one didn’t come up with that idea and a working script before. It saves me about 120KB on a product page. And 50KB on other sites. Now that’s ok?!

Here’s a little preview of the alpha sourcecode

/**
 * Post-Load
 * @version 0.1a
 * @desc Why preload all your scripts? Dynamically them when they are needed!
 * @author Markus Geiger 2007
 * @package Postload
 * @license MIT
 * @url http://blog.evolution515.net
 */

PostloadJob = Class.create();
PostloadJob.prototype = {
    totalFiles: 0, // holds number of total file to load
    loadedFiles: 0, // holds number of loaded files
    completeHandler: null, // function executed on complete loading
    errorHandler: null, // function executed on error while loading
    initialize: function(input, completeHandler) {
        // Init the container for our files
        Postload.htmlContainer = $(‘postload’);
        if (!Postload.htmlContainer) {
            var elem = document.createElement(‘div’);
            elem.setAttribute(‘id’, ‘postload’);
            document.body.appendChild(elem);
            Postload.htmlContainer = $(‘postload’);
        }
        if (input)
            return this.load(input, completeHandler);
    },
    load: function(input, completeHandler) {

        if (completeHandler)
            this.completeHandler = completeHandler;

        if (typeof(input)==‘object’) {
            this.totalFiles = input.length;
        } else {
            input = [input];
            this.totalFiles = 1;
        }

        for (i=0;i<input.length;i++) {
            var filename = input[i];
            if (filename.indexOf(‘.js’)!=-1) {
                this.loadJS(filename);
            } else if (filename.indexOf(‘.css’)!=-1) {
                this.loadCSS(filename);
            } else {
                return false;
            }
        }

    },
    complete: function() {
        this.loadedFiles++;
        if (this.loadedFiles!=this.totalFiles)
            return;
        if (this.completeHandler)
            this.completeHandler();
    },
    loadJS: function(filename) {
        var elem = document.createElement(’script’);
        elem.setAttribute(’src’, filename);
        Event.observe(elem, ‘load’, this.complete.bindAsEventListener(this));
        Postload.htmlContainer.appendChild(elem);
    },
    loadCSS: function (filename) {
        new Ajax.Request(
            filename,
            {
                method: ‘get’,
                onSuccess: this.completeCSS.bindAsEventListener(this)
            }
        );
    },
    completeCSS: function(transport) {
        var elem = document.createElement(’style’);
        elem.setAttribute(‘type’, ‘text/css’);
        elem.innerHTML = transport.responseText;
        Postload.htmlContainer.appendChild(elem);
        this.complete();
    }
}

Postload = new Object();
Postload.htmlContainer = null;
Postload.allFiles = new Array();
Postload.require = function(input, completeHandler) {
    new PostloadJob(input, completeHandler);
}

Example usage

The syntax is very simple. Just use it like require from your PHP or Java language. The only difference is that it handles more than one file and calls a complete-handler when all files have finished loading. So chaining it into your applications should be very easy.

product._openComparisionWindow = function() {
    Postload.require(
        [
            ‘gz?lib/windows-js/javascripts/effects.js|lib/windows-js/javascripts/window.js’,
            ‘gz?lib/windows-js/themes/default.css|lib/windows-js/themes/alphacube.css’
        ],
        product.openComparisionWindow
    );}
]]> http://blog.evolution515.net/article/post-load-your-javascript-and-css-files/feed/ 0 Outlook2007 HTML-Vorschau mit Microsoft Word2003 http://blog.evolution515.net/article/outlook2007-html-vorschau-mit-microsoft-word2003/ http://blog.evolution515.net/article/outlook2007-html-vorschau-mit-microsoft-word2003/#comments Tue, 17 Jul 2007 13:25:13 +0000 Blu:RayNe http://blog.evolution515.net/article/outlook2007-html-vorschau-mit-microsoft-word2003/ Outlook 2007 ist toll: Microsoft hat es tatsächlich wieder aus unerfindlichen Gründen geschafft auf eine HTML-Darstellung aus dem Jahr 2000 zurück zu finden. Entgegen der Vermutng Security könnte was damit zu tun haben, ist aber mittlerweile offiziell, dass die HTML-Darstellung von Outlook zu der von Word konsistent zu halten. Mit Word schreibt nämlich der Outlook-Nutzer auch seine E-Mails, sofern er die Standard-Eisntellungen läßt. Wer das Ganze nicht glaubt ließt hier nach.

Natürlich ist das außerordentlich dumm, stehen nämlich somit wieder alle Sicherheitslücken der Word2003-HTML-Darstellung, die dahintersteckt, auch wieder offen.

Und es wirft Probleme für Web-Designer auf, vor allem bei Webmails, da die Mehrheit der Empfänger und Windows-Whores nicht glauben will, es liege an ihrem „technisch fortschrittlichem“ Outlook2007. D.h. doppelt Frust für Webtreibende, denn heißt es somit wieder zurück zum Tabellenlayout von 1999, möglicherweise steht auch die Installation von MS Office2007 an.

Letzteres muss nicht unbedingt sein, denn kann hier Word2003 auch schon helfen. Hierzu speichert man den nicht-kodierten Quelltext des HTML-MIME-Parts der Mail, und lädt ihn mit Word2003. Somit läßt sich wenigstens in den meisten Büros ohne Windows-Vista und Office2007 die Darstellung überprüfen.

Da auch schon Grafiken in HTML E-Mails schon lange Tabu sind  – außerd den inline-embedded Bildern mit <img>-Element – bleibt nur noch wenig übrigen, mit dem man arbeiten kann. Nämlich noch einige wenige fehlerhaft dargestellte Eigenschaften aus CSS 1.0. float gehört im übirgen nicht dazu, und somit sind Bilder im Fließtext auch Vergangenheit. Danke Microsoft!

Hilfe und mehr Tipps zurAnwendung von CSS gibt es im  guide to CSS Support in E-Mail.

]]> http://blog.evolution515.net/article/outlook2007-html-vorschau-mit-microsoft-word2003/feed/ 0