Is it possible to apply CSS to half of a character? | Hacker News Reader

Is it possible to apply CSS to half of a character?

stackoverflow.com

468 pointsgioele85 comments

I've never seen such polished and thorough answers to a question like this. One answer (not even the accepted answer) made a plugin and a beautiful website to go along with it: http://emisfera.github.io/Splitchar.js/

Pretty amazing that our tools are getting so good that someone can quickly whip up an open-source plugin and splashy, hosted website for a SO answer.

Yeah, I'm looking to make a site / subreddit sometime soon that is designed around this kind of answer / solution to users' problems.

sometime soon, lol!

for my part, i wonder if these guys with the deep chi on css are probably .. correct me if i'm wrong .. using the source? i.e. do you get some sort of insight by observing how css is handled, in some source somewhere, or .. how ?

No, it's just combining the :before class with attr(), and then styling it with width: 50%. No secret sauce, just a creative hack.

No, they just have a very thorough understanding of the box model and all the different selectors. There's quite a lot of pieces and they can interact in many ways; some people just have the right mindset to solve that puzzle.

Is there a good advanced css book (or other long-form resource), or do you just have to read specs at this level? I feel like I have "known" CSS reasonably well for quite some time, but have never attained the level of depth it takes to really grok all the ways the puzzle pieces interact with one another.

How would it differ from Stack Overflow? (I'm not being snarky, but asking a real question.)

Maybe I'm misinterpreting but I assumed the subreddit would be a collection of answers like this instead of a place to ask them which would be super cool and helpful. Not sure if that's what's meant though.

How do people make sites this beautiful for a small plug in? Is there a framework, like Bootstrap 3 or something? How does it work?

It's a github page, so it is probably using jekyll...http://jekyllrb.com/

Isn't Jekyll more for blogs? Also, Github pages are just static HTML, why is Jekyll more probable?

I thought default for github pages was jekyll now...

It was originally more for blogs but it can be used for lots of things. We use it to serve our style guide and API documentation.

The github pages intro documentation reccomends using Jekyll; it's built in somehow.

This one in particular uses the jQuery onepage-scroll plugin [0] for the scrolling effects, prism.js [1] for code syntax highlighting and some plain HTML and CSS. Here's the complete code: https://github.com/emisfera/Splitchar.js/tree/gh-pages.

In reference to some other comments on this thread, this isn't built using Jekyll. GitHub pages supports pure static sites and Jekyll-powered sites if you put either on the gh-pages branch of the repository.

[0] https://github.com/peachananr/onepage-scroll [1] http://prismjs.com/

You're right, thanks. I'm finally home and managed to look at the source, it doesn't use Bootstrap. The author built it all from scratch. Kudos to him.

I didn't even realize it scrolled until I saw your comment and went back.

Hiding your content below the scroll and having a single, tiny, ambiguous, low-contrast visual indicator that more information is below seems to be "the in thing" in web design in 2014.

It appears at least in part inspired by zombo.com.

What isn't!

I'm a bit confused. Here's what it looks like to me: https://imgur.com/8zSglOv

No buttons do anything when clicked, and I can't scroll. Latest Firefox and Chromium on Ubuntu. Am I missing something or is it broken for me? Can anyone show me what it's supposed to be like?

You might be using HTTPS Everywhere which is blocking jQuery and some other stuff from loading since he hard coded them as a HTTP url. Try opening it up in Incognito or another browser without HTTPS.

That was it, I feel silly now. Thanks!

Github post came up the next day actually. He's done a couple commits too.

Who am I kidding? It's still awesome...

You can see the revision history: http://stackoverflow.com/posts/23569710/revisions

For a popular question like this, it's kind of like an arms race to see who can get the top answer. People keep one-upping themselves.

Slow down before you give too much credit to tools. Guy has put lot of work in "whipping" up a beautiful website. Much of this seems to be hand coded. Example: https://github.com/emisfera/Splitchar.js/commits/gh-pages/in...

I wasn't saying it wasn't hand coded, I meant tools like Github pages and JSFiddle and syntax highlighters and all of the things that allow us to move so quickly from prototype to publish.

I wonder if this designer is the one behind the recently unveiled 'Halifax' logo? The X looks remarkably similar.

Link for visual evidence: https://twitter.com/PaulRPalmeter/status/456165443363827712/...

I guess we can just wait until they have a website and see if the logo is using this method.

It looks very similar, but what bugs me is that the author says that the text is going to be dynamically generated, which wouldn't fit the "logo" theory.

From the comments on the question, it's actually for a joke/complaint about the cost of that very logo: http://pvp.comeze.com/brandgenerator/ (type in Halifax and it shows a message about the cost).

It would be pretty funny if the libraries made to help out this joke end up being used for official uses of the logo, but at present the logo's only rendered inside an image at the official branding site, http://halifaxdefined.ca/#new-logo

The 'why' should not matter. Who really cares whether it should be done? or why they would want to do it?

If someone has an interesting problem, let's try and figure out a way to do it. Usually the why comes up along the way, but not relevant.

Thankfully, some great folks stepped in and gave quality responses.

"To see if I could" is a perfectly valid reason. But "to create a logo" probably isn't in a case like this. CSS can do so many cool things, and I love seeing crazy stuff that pushes the limits (http://attasi.com/labs/picsselz/). But it's also important to know when just using an SVG image, or maybe doing something in canvas is the right solution.

In general it's absolutely relevant to not just solving A problem but the RIGHT problem. People might ask for X when they really want Y.

Of course the "why" matters! What happened to intellectual curiosity? In any interesting problem, "why" is just as interesting as "how," and "how" has now been thoroughly and professionally covered.

True ... so long as nobody combines this technique with marquee.

"The 'why' should not matter."

The 'why' absolutely matters - frequently, there are tradeoffs to be made in an implementation; if you don't understand "why" something is being done than it's difficult-to-impossible to evaluate which tradeoff is going to work.

In this particular case, the tradeoffs appear (based on the SO answers) to mostly revolve around how much text the technique is applied to and what the intended uses of that text are (doe selection work, does wrapping work, does accessibility work).

That's cheating :) CSS is applied to the whole character.. I'm sure that you can avoid javascript by using content:attr(letter) in before and after. like <span letter="X" class="half-red-half-green"></span>

If you're sure that it can be done without javascript, adding your solution as an answer on the SO question would probably be greatly appreciated.

That is the exact technique that is used in the accepted answer. It does appear that the answer was recently edited though so perhaps these comments were made before that.

Those are some imaginative solutions. One problem[1] with drawing over half the character is anti-alias. The border gets a blend of both colors.

[1] http://i.imgur.com/5KspGyc.png

I'd say do the same thing with the "after" selector, display only the other half, hide the original character, and that should take care of that.

http://jsfiddle.net/CL82F/14/ did it with just CSS pseudoselectors

The background of the underlying element is still showing through, messing up the antialiasing and subpixel smoothing.

looks correct on latest firefox. what browser are you using?

So this is just the ::before pseudo-element? I feel like I'm missing something.

that and the use of css attr()

.halfStyle:before includes positioning like: "position:absolute; top: 0; left:0;" which puts the :before element on top of the existing element.

"width: 50%" says it's only half as wide.

The possibly fancy thing being used here is the use of "attr(data-content)" which use the data-content attribute of the element to fill the pseudo-element's content.

::after would work as well. It just adds something before or after the selected DOM element, in this case, a half-shown copy of the letter on top of the original.

And now apply it to half a character diagonally. :-)

http://jsfiddle.net/pbhj/X53Ju/ works but only with -webkit as background-clip text isn't supported elsewhere (for shame).

Or, using lettering.js to wrap individual letters in spans - http://jsfiddle.net/pbhj/3P7eU/.

Edit: here's a polyfill that might help, https://github.com/TimPietrusky/background-clip-text-polyfil....

I don't know why, but I felt compelled to make it spin. http://jsfiddle.net/X53Ju/7/

relevant code snip:

  .halfStyle:before {
    width: 50%;
    color: #f00;
  }

  content: attr(data-content);

This is pretty interesting, too.

Not looking forward to when this catches on.

It's cool seeing the solution for this, but I never would have imagined such a random request.

Now, go make striped characters.

Striped? What about checkered? http://jsfiddle.net/F3KAc/5/

Excellent work. Make that your next interview question.

My eyes hurt just seeing these examples. I hope such technique will not get much attention outside of SO and HN.

thinking of a ton of new usage cases for this example. would be nice to see this implemented in pure CSS in the next revision perhaps. is that even possible?

yes, but why?

It's sad to see that this kind of questions gather so much attention, and other questions closer to the real world receive NONE. StackOverflow has reached his max hipster level.

I'm as much a "real / big problems" guy as anyone. But I don't begrudge this.

If you feel there's something missing from HN, how about posting some submissions. I see you've got ... none.

Remember, if you're not part of the solution, you're part of the precipitate.

I've posted plenty of questions in StackOverflow that have gone unanswered, some of them (in my opinion) pretty important. For instance, my last question has turned out to be a bug in Django. They however have no place here in HN because this is not that kind of site.

Anyways, everyone knows that the quality of the answers in SO has declined a lot in the last few years. It's not something strange.

What's your SO username?

Just because you can do something...

This was my initial thought too. Why not just use an image, right? But, I guess if we always said that, where would we be now? We wouldn't have a lot of the amazing tools and resources we do today. Sure, it might not be fully practical but it doesn't hurt to research the problem and learn from it. :-)

the web is evidence of a massive local maxima in presentation technology.

It's more "Just because the solution isn't obvious or it wasn't designed with something in mind"... People that push tools past their limits with clever tricks can be very helpful, or very annoying.

This looks repugnant. Just because it can be done, doesn't mean you should do it! :-)

I think it would be fine for a single fancy beginning-of-article letter. Whole titles or sentences is too much.

So, should we make it blink?

No, you should make half of it blink.

And the other half scroll ;-)

http://jsfiddle.net/pd9yB/156/

Like so? (Code from libressl.org and Arbel’s demo).

Yeah, or maybe this - http://jsfiddle.net/pd9yB/198/

(I now need to go and forget I ever heard about the internet, this may take a lot of rum)

http://jsfiddle.net/pd9yB/160/ I am not proud of myself :)

Edit: http://jsfiddle.net/pd9yB/238/ should work in Chrome/FF/IE/Opera and most modern browsers (previous link is Webkit-browsers only)

I tried that first but it didn’t work in Firefox :\

Try the new link (see my edited comment).

You just made my day

http://jsfiddle.net/pd9yB/498/

Slide-y chars. Had to be done.

The blink I find annoying, but a fade in/out is kind of interesting:

    -webkit-animation: blink 4s steps(20,end) infinite;

I don't see a lot of utility in it, but I like that people are trying things out and pushing themselves. I certainly thought it was an interesting solution to for a problem that doesn't exist.

You could maybe make a funny 3D website with the old red and blue glasses with this.

It does have some niche use cases - e.g., implementing a logo in css instead of embedded picture.

> This looks repugnant

Can I ask why you might want to say hurtful things to someone who is trying to be helpful?

I think you misunderstood. Its cool programming but the effect is a design anti-pattern, see the <blink> discussion on top.

Reply on news.ycombinator.com