Improve how tests work

[wamoyo]

> hanging-punctuation@0.2.3 test /home/costa/projects/hacker school/hanging-punctuation
> static -H '{"Cache-Control": "no-cache, must-revalidate"}'

serving "." at http://127.0.0.1:8080
18:2:08 [404]: /
18:2:08 [404]: /favicon.ico
18:2:08 [404]: /favicon.ico
18:2:16 [404]: /

[kennethormandy]

Hey, thanks for opening an issue. You can visit http://127.0.0.1:8080/test/ and see what I have working, it’s more of an example than a proper test suite really:

It’s pretty early still, though. This project is still really important to me, but I haven’t dedicated time to it in a while. Ideally, it will be a full implementation of hanging-punctuation CSS property and a series of tests that run entirely from the CLI in a headless browser.

If you’re interested in collaborating on it together, let me know! I might get me back into it more.

[wamoyo]

I'm going to implement a small JavaScript solution for my site, so I'll be working on something. I'm sure we'll overlap a bit. Could you share what the goal is? From a typography standpoint that is.

For me, the ideal would be to get the following characters to hang left or right when they end up at the begining or end of a line:

• .
• '
• "
• ...
• ,
• «
• »
• ;
• maybe a few more...
• ² (end only)
• ³ (end only)

The challenge being detecting when these characters show up at the edge of a line and how wide they are for any font.

[kennethormandy]

Sure! My goal is to implement something with the same results as hanging-punctuation, which is actually a real CSS property, but defined as “optional,” and so far seems unlikely to ever be implemented in the browser.

Rather than specific characters, there’s a range of unicode characters that this property should to, which I am not doing yet. I wanted to follow that documentation as closely as I could (especially since it accounts for considerations in other languages that I didn’t know about, esp. right-to-left text).

I actually have the basic cases done already (maybe I should make better docs…), which is based of the jQuery.exdent plugin I forked this from, but re-wrote to use without jQuery. If you are looking for a simple solution and already using jQuery, that plugin still works well. Building out what’s defined in that document is what I saw as the next, more widely-applicable step beyond that—if you’re interested in that it would definitely be cool to see if there’s parts we could work on together!

[wamoyo]

Yeah, I'd love to know what approaches are possible for implementing hanging punctuation. It seems like a really tricky thing to try to implement.

Here were my initial ideas on how it could be done:

1. Grab all text nodes or just grab p, span, h1-h6, blockquote and q.
2. Look for leading or ending punctuation, slice it out, and put it back with ::before or ::after.
3. Split paragraphs on line breaks and do step two on the splits.
4. Split paragraphs on line breaks, crop leading or ending punctuation and put it back in a span, then step offset spans.

[kennethormandy]

That’s fairly close to what the code does now: https://github.com/kennethormandy/hanging-punctuation/blob/master/hanging-punctuation.js#L82-L88

But rather than applying it to all text nodes, it does it to the ones you’ve applied hanging-punctuation to in your CSS. I’ll see if I can improve the examples and docs for this, it sounds like your use case might be covered already.

[wamoyo]

Well, I'm struggling with something. Also, side note, I like the absolute positioning approach: http://dabblet.com/gist/9623025 Seems to be more precise and less reliant on knowing how wide "s and 's are.

I'm struggling to understand how to detect punctuation that's not at the very first line of a body of text, but in subsequent lines...

[kennethormandy]

Here’s a working example for you: http://codepen.io/kennethormandy/pen/OPpNQp

[wamoyo]

Awesome! How do you get it to work in the middle of a paragraph?