Revisit text-hide mixin

[XhmikosR]

This helper comes from html5 Boilerplate. It was removed in 2013 in this PR.

We should revisit it or remove it too.

/CC @mdo

[moso]

Isn't text-hide sort of reduntant now that we have display utilities, which are even responsive?

One could easily use <p class="d-sm-none">Text</p> if one wants to hide text responsively (I know I have done the same in the past where I hide the text in a button and only show its icon on small devices). If it's for screenreaders only, then we have utilities for that aswell.

[mdo]

@moso The goal of text hiding is to visually hide the text while still rendering the element's overall size and shape, often with a background-image to show something else. Display utilities wouldn't accomplish that, nor would visibility utilities.

[mdo]

That said, it is an old technique :).

[mdo]

We're kinda stuck with this now that we're heading to v4 stable. We could drop it, but it'd technically be a breaking change. Thoughts?

[moso]

Leave it in, and maybe do a $enable-text-hide-variable so people can disable it?

[patrickhlauke]

i'd say remove the whole image replacement thing in 4.1 (or do an unscheduled breaking change, nobody would die from that presumably). maybe replace with more modern approaches (e.g. using sr-only to include actual text in html). generally (from my experience anyway) authors will set a custom width/height when doing IR, so the fact that text-hide maintains the size etc is mostly pointless, i'd say.

[mdo]

Let's deprecate for 4.1 or 4.2 if we can.

[martinbean]

@mdo What is the rationale behind removing this helper? As I still regularly use it for logos in website headers, i.e.

<a class="header-logo" href="/">
  <span class="header-logo-text">Website Name</span>
</a>

.header-logo-text {
  @​include text-hide();
  width: 200px;
  height: 100px;
  background: url(../img/logo.png);
}

Is there an alternative to this technique that I should be using…?