Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 24
  1. #1
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question inverting a character...

    Is there something like the direction property for flipping text upside down?
    *this message will self destruct in n-seconds*

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Nothing that I know of. Possibly in CSS3...

  • #3
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Nothing any browser supports yet. <http://www.w3.org/TR/2003/CR-css3-te...yphOrientation> is one place you can read about it. Fantasai wrote an article about related properties recently, <http://fantasai.inkedblade.net/style...-text/#shaping>
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #4
    Regular Coder ArcticFox's Avatar
    Join Date
    Jan 2004
    Location
    Vostok Station, AQ
    Posts
    602
    Thanks
    35
    Thanked 3 Times in 3 Posts

    Internet Explorer

    Anyone try this:

    style="filter:FlipV() FlipH(); width:300px;"



    *Width is required, adjust as needed...


    I'm thinking it's IE only, though...
    *runs for cover*
    Last edited by ArcticFox; 10-15-2004 at 03:41 AM.
    <div> - putting your mind in a box since 1997

  • #5
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    In a user oriented web, any feature that does not exist cross browsers and platforms does not exist at all - or at least, that's what you should assume if you consider or are already using one.

    Using such a feature is by no means in itself wrong, but the risk is that you forget about the feature not existing elsewhere. Coding so that such a feature is required for the site to work, on the other hand, is wrong, usability and accessiblity wise.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #6
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ArcticFox
    Anyone try this:

    style="filter:FlipV() FlipH(); width:300px;"
    Yeah, did you? (doesn't seem to work...)
    *this message will self destruct in n-seconds*

  • #7
    Regular Coder ArcticFox's Avatar
    Join Date
    Jan 2004
    Location
    Vostok Station, AQ
    Posts
    602
    Thanks
    35
    Thanked 3 Times in 3 Posts

    Thumbs up

    Quote Originally Posted by liorean
    In a user oriented web, any feature that does not exist cross browsers and platforms does not exist at all - or at least, that's what you should assume if you consider or are already using one.

    Using such a feature is by no means in itself wrong, but the risk is that you forget about the feature not existing elsewhere. Coding so that such a feature is required for the site to work, on the other hand, is wrong, usability and accessiblity wise.
    Uh... I'll try to refrain from thinking those comments were of IE-bashing thoughts...

    I do think I agree with them in some way -

    1) Don't forget that not everyone will see these effects, and
    2) Please don't code a site as to make it impossible to surf without a 'certain' browser or OS.

    Well said, liorean!


    Quote Originally Posted by codegoboom
    Yeah, did you? (doesn't seem to work...)
    What browser/OS are you using? Let's see your code.
    Last edited by ArcticFox; 10-15-2004 at 04:11 AM.
    <div> - putting your mind in a box since 1997

  • #8
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It is the IE-proprietary CSS property known as 'filter'. You can read about it at blooberry.com: http://www.blooberry.com/indexdot/cs...mic/filter.htm

  • #9
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I know what it is, but "flipV" doesn't seem to work...
    Here's the code:
    Code:
    <div style="text-align:center">
    <span style="font:50px Webdings">"</span>
    <div id="strand" style="margin-top:-22px;margin-bottom:-14px;width:1px;height:300px;background:black"></div>
    <span style="font:50px Webdings">!</span>
    </div>
    now, let's flip spidey!
    actually, this works:
    Code:
    <span contenteditable="true" style="font:50px Webdings;filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2,mirror=1)">!</span>
    ...but the spider gets bloated (character distortion)
    *this message will self destruct in n-seconds*

  • #10
    Regular Coder ArcticFox's Avatar
    Join Date
    Jan 2004
    Location
    Vostok Station, AQ
    Posts
    602
    Thanks
    35
    Thanked 3 Times in 3 Posts

    Question

    Quote Originally Posted by codegoboom
    ...but the spider gets bloated (character distortion)
    This doesn't work for you?:

    <span style="font:50px Webdings; filter:FlipV() FlipH(); width:1px;">!</span>



    Although I'm looking at the simplicity of the code you posted:
    BasicImage(rotation=2)

    Just rotate it 1, 2, 3 or 4... simple.
    Last edited by ArcticFox; 10-15-2004 at 05:29 AM.
    <div> - putting your mind in a box since 1997

  • #11
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    doh yes that works... it failed with different code than above.
    ...still gets mangled though: do you see that?
    *this message will self destruct in n-seconds*

  • #12
    Regular Coder ArcticFox's Avatar
    Join Date
    Jan 2004
    Location
    Vostok Station, AQ
    Posts
    602
    Thanks
    35
    Thanked 3 Times in 3 Posts
    I tested the code using this page:
    http://www.w3schools.com/css/tryit.a...ckground-image

    When I put the code on the left screen, the output shows on the right screen...

    To me it looks fine - upsidedown spider.

    When you say mangled, are you looking at the jagged edge of the spider? If so, please keep in mind that it's not an image. Looks the same way right-side up, too...
    <div> - putting your mind in a box since 1997

  • #13
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ArcticFox
    Looks the same way right-side up, too...
    Here's a screenshot of the difference:
    Attached Thumbnails Attached Thumbnails inverting a character...-spiders.png  
    *this message will self destruct in n-seconds*

  • #14
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Interesting to note that font antialiasing doesn't work on the filtered spider.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #15
    Regular Coder ArcticFox's Avatar
    Join Date
    Jan 2004
    Location
    Vostok Station, AQ
    Posts
    602
    Thanks
    35
    Thanked 3 Times in 3 Posts

    Unhappy

    Huh... I don't see that problem on this side. Sorry.
    (WinXP, IE6.0.2800)

    Now that I double-checked, I'm thinking that "antialiasing" doesn't happen on my side at all - I get the jagged edges up or down.
    Last edited by ArcticFox; 10-15-2004 at 06:13 AM.
    <div> - putting your mind in a box since 1997


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •