Rotating text using CSS

by Victor 15. August 2012 21:18

This is a short style rule to help you rotate text in your html page using CSS.

 

.rotated-text {
    width:100px; height:20px; line-height:20px;
    -moz-transform: rotate(310deg);  /* FF3.5/3.6 */
    -o-transform: rotate(310deg);  /* Opera 10.5 */
    -webkit-transform: rotate(310deg);  /* Saf3.1+ */
    transform: rotate(310deg);  /* Newer browsers (incl IE9) */
    /* IE8+ - must be on one line, unfortunately */    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.6427876096865394, M12=0.766044443118978, M21=-0.766044443118978, M22=0.6427876096865394, SizingMethod='auto expand')";      /* IE6 and 7 */    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.6427876096865394, M12=0.766044443118978,            M21=-0.766044443118978, M22=0.6427876096865394, SizingMethod='auto expand');   /*    * To make the transform-origin be the middle of    * the object.      */
    zoom:1;
    background:#ccc;
    font-weight:normal;
    margin:0 0 0 0;
}

Tags: , , , , , ,

ASP.NET | CSS | CSS3 | IE | Safari Development | Web Development

HTTP status codes

by Victor 12. January 2012 19:18

Borrowed from this site:

Registry:
Value     Description                              Reference
--------  ---------------------------------------  ---------
100       Continue                                 [RFC2616]
101       Switching Protocols                      [RFC2616]
102       Processing                               [RFC2518]
103-199   Unassigned
200       OK                                       [RFC2616]
201       Created                                  [RFC2616]
202       Accepted                                 [RFC2616]
203       Non-Authoritative Information            [RFC2616]
204       No Content                               [RFC2616]
205       Reset Content                            [RFC2616]
206       Partial Content                          [RFC2616]
207       Multi-Status                             [RFC4918]
208       Already Reported                         [RFC5842]
209-225   Unassigned
226       IM Used                                  [RFC3229]
227-299   Unassigned
300       Multiple Choices                         [RFC2616]
301       Moved Permanently                        [RFC2616]
302       Found                                    [RFC2616]
303       See Other                                [RFC2616]
304       Not Modified                             [RFC2616]
305       Use Proxy                                [RFC2616]
306       Reserved                                 [RFC2616]
307       Temporary Redirect                       [RFC2616]
308-399   Unassigned
400       Bad Request                              [RFC2616]
401       Unauthorized                             [RFC2616]
402       Payment Required                         [RFC2616]
403       Forbidden                                [RFC2616]
404       Not Found                                [RFC2616]
405       Method Not Allowed                       [RFC2616]
406       Not Acceptable                           [RFC2616]
407       Proxy Authentication Required            [RFC2616]
408       Request Timeout                          [RFC2616]
409       Conflict                                 [RFC2616]
410       Gone                                     [RFC2616]
411       Length Required                          [RFC2616]
412       Precondition Failed                      [RFC2616]
413       Request Entity Too Large                 [RFC2616]
414       Request-URI Too Long                     [RFC2616]
415       Unsupported Media Type                   [RFC2616]
416       Requested Range Not Satisfiable          [RFC2616]
417       Expectation Failed                       [RFC2616]
422       Unprocessable Entity                     [RFC4918]
423       Locked                                   [RFC4918]
424       Failed Dependency                        [RFC4918]
425       Reserved for WebDAV advanced             [RFC2817] 
          collections expired proposal
426       Upgrade Required                         [RFC2817]
427-499   Unassigned
500       Internal Server Error                    [RFC2616]
501       Not Implemented                          [RFC2616]
502       Bad Gateway                              [RFC2616]
503       Service Unavailable                      [RFC2616]
504       Gateway Timeout                          [RFC2616]
505       HTTP Version Not Supported               [RFC2616]
506       Variant Also Negotiates (Experimental)   [RFC2295]
507       Insufficient Storage                     [RFC4918]
508       Loop Detected                            [RFC5842]
509       Unassigned
510       Not Extended                             [RFC2774]
511-599   Unassigned

 

Use a non standard font

by Rod 14. July 2011 18:38

The web is a big place. A big, colorful, resourceful place. As a result, finding out how to do things to which there are around 10000 standards, nobody seems to be in agreement on the standard, and Microsoft goes it's own way (as usual); the task is quite daunting.

My story is about trying to use a "non web standard" font on a site,

 

I was presented with a simple problem: Make a site and we want to use this font. The options were using graphics for every line text (with a multilingual site, a painful proposition) or use custom fonts. A little bit of research showed me that @font-face was the css I was looking for (and no, Obi Wan Kenobi did not tell me those were the droids I was looking for).

So, with a TTF of the font I needed, I used it as recommended:

@font-face {
   font-family: 'myFont';
   src: url('/myFont.ttf');
}

 

Then, I declared my custom font family as any ol' regular font:

body   
{
...
    font-family: 'myFont', Verdana, sans-serif;
    ...
}

And it works! Yes! It works! Chrome - Check. Firefox-Check. IE-No go (...any version).

Turns out that that IE doesn't like TTF files and it needs MS own "eot" format. Ok. Some after some Google time, I found this nice online converter. Perfect! So I use it as prescribed on my Site.Master (you'll see why in a sec):

        @font-face
        {
            font-family: "myFont";
            src: url('<%= ResolveUrl("myFont.eot") %>');
            src: local(myFont), url('<%= ResolveUrl("myFont.ttf") %>') format('opentype');
        }

And it works, but NOT on all IE standards (IE7 - check. IE8 - check, IE-9 Nope). Android? nope. As a side note, what makes it partly work on IE is that IE doesn't understand the "local(...)" tag, so it uses the eot.

It turns out that there multiple standards and not ALL work the same on all browsers (or even on the different version of the same browser) and you need to use some browsers hacks tricks to make it work on all browsers.

        @font-face {
            font-family: 'myFont';
            src: url('<%= ResolveUrl("myFont.eot") %>');
            src: url('<%= ResolveUrl("myFont.eot") %>?#iefix') format('embedded-opentype'),
                 url('<%= ResolveUrl("myFont.woff") %>') format('woff'),
                url('<%= ResolveUrl("myFont.ttf") %>') format('truetype'),
                url('<%= ResolveUrl("myFont.svg") %>#') format('svg');
        }

I used this converter to create all the font files the "trick" requires from the TTF I already had. If you feel slightly lazy, this site will generate the css for you. Go here for an explanation of the hack.

Stay programming my friends!

 

Tags: , , ,

Entity Framework | SQL

Powered by BlogEngine.NET 2.5.0.6

About Us

Wuji Touch is a software consulting firm based in Delray Beach, Florida. We specialize in Microsoft technologies, but we also have experience with Progress OpenEdge, iOS, and Android development. This is our blog. These are the tales of the pains and pleasures we experience daily in our journey through 1s and 0s.

Month List