1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Need to remove text

Discussion in 'CSS' started by qwikad.com, Aug 31, 2015.

  1. #1
    Need to remove text, without actually removing it.

    Will font-size: 0px; text-indent: -9999px; do the trick across all browsers?
     
    qwikad.com, Aug 31, 2015 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    You shouldn't even need the font-size, unless you want the element shorter than the text.

    You can also say -999em if you don't zero the font size, which pushes it further without risking going past legacy IE's 16 bit integer limit. (a common PITA if you care about older browsers).

    THOUGH, removing text that way CAN be an accessibility failing, but that depends on what the text is and why you are removing it. If it's for something like image replacement you should TRY to hide the text UNDER the image -- Not always viable if transparencies are involved so that images off the text pops back into showing... but that comes down to why you are doing this, where you are doing this, and what you are doing it to.

    But yes, that declaration SHOULD hide the text, at least if it's short and restricted to a single line. BEWARE that really long text or text that word-wraps will probably not work as you expect. Remember, text-indent only changes the first LINE of text, not any subsequent lines. Good for a word or two, not so good for a full-on paragraph of content.
     
    deathshadow, Aug 31, 2015 IP
  3. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #3
    what about display:none;
     
    sarahk, Aug 31, 2015 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Removes the element, not just the textnodes INSIDE the element. I'm assuming that's what he's aiming for. Typically this is done when you want to show a background-image instead of the text WITHOUT adding an extra element inside the one you're targeting.

    <div class="test">Some Text</div>

    .test { text-indent:-999em; background:#F00; }

    Will give you a red box full available width with the height == line-height, without text inside it as the text has been slid out of the container. If you set .test to display:none, the whole element would disappear from flow and view.

    Again, most commonly used for broken image replacement methods that don't gracefully degrade, which is a sucktastic sacrifice you sometimes have to resort to if transparencies are involved. Part of why I'm NOT a fan of using transparencies in images or backgrounds on websites.
     
    Last edited: Sep 1, 2015
    deathshadow, Aug 31, 2015 IP
  5. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #5
    Thank you @sarahk and @deathshadow Indeed display:none; will hide the whole element. I am using this to hide parts of a text on cell phones (using @media) otherwise it looks somewhat crammed (in vertical position). Just needed a confirmation that it's a working solution across all browsers.

    Wide screen:
    1.gif

    Cell phone:
    2.gif
     
    qwikad.com, Sep 1, 2015 IP
  6. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #6
    For that usage, don't you already need to have a container for that particular text? If not, I would just add a span and set it to display: none; Simpler, guaranteed to work, etc. etc.
     
    PoPSiCLe, Sep 1, 2015 IP
    sarahk and qwikad.com like this.
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #7
    Given that result for mobile is accessibility rubbish, (like the two vague and useless round dots) why not just stop floating the image, instead of turning those two status buttons into random circles just stop floating them and put them below the title, then replace the hyphen on that "marketing" text with some way of putting it on a new line.

    Gutting out text just because it's a mobile layout? That's garbage.
     
    deathshadow, Sep 1, 2015 IP
  8. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #8
    @deathshadow I hate to admit it, but you were right. I decided to go with the featured / urgent signs floating to the left on mobile devices. That gives a whole lot more space to the titles and other things. Sorry for that ugly post prior to this one. This is what it looks like now:

    1.gif
     
    qwikad.com, Sep 1, 2015 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    Hmm, your post must have been deleted before I could respond... but you asked "haven't I ever clicked on something to find out what it is" -- no, because if I don't know what it is, WHY WOULD I CLICK ON IT? Living through the first dotcom burst and the years of popup hell taught me that lesson.

    But then, you also said "ads" and I've not seen the majority of advertisements in a decade because I'm not DUMB ENOUGH to let adverts show since online advertisers are a bunch of sleazeball scum I'd not trust any further than I could throw the Big Stick.

    Really though, just to clarify, what you have with those two meaningless circles or the starburst "badge" you had posted is false simplicity in the form of "ambiguous user interface" -- more of a concern in touch since there are no hover states for things like TITLE to do it's job. How is ANYONE supposed to know what those mean, are for, etc, etc? You have nothing other than following it to find out what it does, yet you expect people to follow it? How exactly does that work? Lands sake, how are people going to even know that's something to click on? (much less are you SURE those are finger sized targets with sufficient spacing?)

    Or am I underestimating the stupidity of the average user again with their Christa McAuliffe famous last words? What's this button do?

    There's a reason things like that show up on how NOT to build a website accessibility discussions like those at NNGroup... or articles about false simplicity like this one:
    http://baymard.com/blog/false-simplicity
    http://www.nngroup.com/articles/icon-usability/

    Hence why on the web text is the first class citizen, and everything else is window dressing.
     
    deathshadow, Sep 1, 2015 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #10
    First, don't worry about the previous post you removed, I know I'm a bull in a china shop sometimes. IF you're not from New England my mannerisms can oft offset my meaning. Again going to be real fun to see if they capture that in Fallout 4, "Yah cahnt geht theyah frum heeyah" since if they do it will be fun to watch gamers from the west coast break into tears and curl up in a ball in the corner over the dialogue...

    Hmm. I like the moving it over the image, though I'd be tempted to make them ABOVE the image not over it and taking up half the width each. This plays to how in accessibility checks you might have it bitch at you about your links not being "finger sized targets" -- something relatively new in the various checks but something that makes sense.

    I'd probably also have a breakpoint/media query for really narrow that stops floating that image. Remember there are at LEAST 80 different mobile display sizes ranging from 192px to 480px wide for small screens, and some of the smaller ones default to 14px or even 12px per em instead of 16, so your layout should be ready to adapt to that.

    Have you considered on mobile perhaps flipping the image float to the other side? That might be a personal preference thing I find it painful to read text when it de-indents after a float on the left. Just not a fan of that, YMMV.

    It's why I also suggested perhaps replacing the hyphen with a block behavior... I often do this in responsive layouts thus:

    <h2>
    	How to Become a Super Affiliate<br>
    	<small>Affiliate Marketing <span><span>-</span>1 day Ago</span>
    </h2>
    Code (markup):

    Then you just do:

    @media (max-width:24em) {
      h2 span { display:block; }
      h2 span span { display:none; }
    }
    Code (markup):
    Kills off the hyphen, moves the date to another line. REALLY handy if you start to run out of room or don't like how the word-wrap is being handed. On wide screens that doesn't kick in so you get the hyphen.

    That text-indent trick could also be used to remove that hyphen from the container, then use that SPAN as an image replacement sandbag -- not applicable here, but a nice trick for things like a site's H1 where the logo/banner is just presentation of text. Boom, gilder-levin with images off AND CSS off graceful degradation.

    Oh, and keep in mind that just because you see sites doing things, doesn't mean it's good practice or accessibility minded. If I'm a dick about "user-friendly" is that I see developers worried more about what's easy for them and to hell with what's actually useful to users. I am "user friendly", I'm just not "developer friendly" where bad practices we've been told repeatedly NOT to do are touted as good practice.

    Hence my obsession with things like the WCAG and NNGroup -- places and things more concerned about "how does this impact users" than "isn't this cool and pretty". It's a whole different way of looking at things and really flips the process upside-down.

    In a good way -- like flipping Kari Bryon butter-side up.
     
    deathshadow, Sep 1, 2015 IP
  11. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #11
    LOL you play Fallout 4. I'll definitely have to nuke you crap out in multiplayer mode sometimes. Watch out for general half-assed :)
     
    ketting00, Sep 2, 2015 IP
  12. ProxyRadar

    ProxyRadar Greenhorn

    Messages:
    22
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    20
    #12
    Note, hiding text for visitors may be interpreted by Google as cloacking, followed by the application of appropriate sanctions

    read more at https://support.google.com/webmasters/answer/66355?hl=en
     
    ProxyRadar, Sep 22, 2015 IP
  13. somnathji

    somnathji Member

    Messages:
    50
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    26
    #13
    Need to improve your formations of text and even more text decorations
    You can go w3schools and even more free websites tutorial like HTML dog
    there are more changes possible :) just think creatively
     
    somnathji, Oct 7, 2015 IP
  14. henrix343

    henrix343 Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #14
    There are some ways of doing that:

    display:none; (not particulary good for SEO)

    text-indent:-9999px; (google bot also catch this)

    line-height:1000px; (better)

    in addition you can add overflov:hidden; to the elements. Or if you are using some kind of cms like drupal you can use hook_form_alter or js... anything that fits you needs.
     
    henrix343, Oct 11, 2015 IP