Code wrapping for real (try #2)

[mbucc]

Another approach. Updated index file so you can see some examples.

[crmackay]

are <line>...</line> elements really a thing though? I can't find them in any standard? I like the solution and the semantics of <line> I just can find anything to reference that's suggests its a real html tag.

[mbucc]

Live example: http://markbucciarelli.com/2016-06-22_parsing_text_with_erlang_pattern_matching_and_guards.html

Renders fine on the following browsers:

OSX, Chrome Version 51.0.2704.103 (64-bit) OSX, Firefox 47.0 Windows 8 Mobile (IE 11) Android Chrome 5.14.32.21.arm

[adamschwartz]

@mbucc thanks for providing the live example. Looks great! My only gripe is that the image does not appear to be retina. Would you mind adding retina support?

[bandali0]

@mbucc thanks for the effort, works pretty good on mid-sized screens and resolutions, but sadly the issue is still present on smaller widths.

To see what I mean, open up the live example in Firefox, then use Firefox's Responsive Design Mode and try out various resolutions, such as 320x480.

[mbucc]

@aminb When I open in 320x480, the only issue I see is that long strings without whitespace don't wrap.

For example, the parse_time_part in fourth link in the attached screen shot is actually parse_time_parts(strip_tokens(S,.

But I don't see what you can do about that with CSS, that is more about how the browser decides to wrap.

[mbucc]

@adamschwartz I don't think I can increase the pixels, as the pixel height of each arrow must match the pixels of the code line-height. (This is the main fragility of this approach).

But I can try to add more colors than just a single gray, which will make the arrow look smoother.

Would that solve your objection?

[adamschwartz]

@mbucc what if you adjust the background-size property?

[mbucc]

What can I do to finish this? Here are the only two issues I know of:

• reduction in code font not applied consistently
• address @adamschwartz retina gripe

Are there others, or is this not heading in the right direction ...

[adamschwartz]

@mbucc I just committed a version which addresses the issues it had. It uses a ::before pseudo-element so background-repeat can be used and uses an SVG image for non-pixelated scaling.

[mbucc]

@adamschwartz Looks great, arrows are cleaner and perfectly centered vertically.

One thing I miss is the full width code. With a pre tag like this:

<pre class="code with-wrapping fullwidth">

I don't get full-width code block unless I include this css rule:

pre.code.fullwidth { width: 90%; }

Can you put that back in?

[adamschwartz]

Thanks!

That’s a little out of scope of this issue (by its title). Please create a new issue and I’d be happy to address it there. However, I’ll likely want to defer to @daveliepmann on how best to handle that. Thanks!

[daveliepmann]

That arrow is really nice, Adam. Unfortunately I find line wrapping not served well by a consistent indent. Line wrapping well is hard! The proposed solution here demonstrates how complex the topic is: some elements are indivisible (e.g. single quoted HTML attributes), there are logical places to split lines (e.g. the end of an HTML tag) that need to be detected, and often the degree of indentation should match the first line (for instance, in HTML or lisps). The web folks I've showed this to in person agree.

I think the relevant principle here is that given the choice, I'd rather have 'simple imperfect solution' than 'imperfect solution that introduces complexity'. That's why Tufte CSS doesn't provide general-case classes for tables. It's why Tufte CSS, as I see it, should avoid most problems of displaying code! Tufte CSS covers the most basic case with the principle of least surprise: you format your code the way you want it; we will mark it as code with a font, and provide a home for it. People who want more functionality can reach for tools like embedded GitHub snippets, which provide syntax highlighting, line numbering, and access to the raw text.

One way I do think this should be fixed is with smaller text within code snippets, so that line wrapping happens less frequently.

[adamschwartz]

Agreed!

[mbucc]

@daveliepmann Thanks for your considered opinion!

I will maintain a fork with this patch, as to my eyes is it more correct than either (1) wrapped lines with no visual indicator or (2) hidden content that requires a scroll right. (And my blog contains a lot of code.)

This is a typesetting challenge that currently has no good solution!

[daveliepmann]

@mbucc Best of luck. Communicating code is indeed one of the hard things.

[daveliepmann]

For reference to future readers, Google Code Prettify is another possibility alongside embedded Gists.

[mbucc]

Done: https://github.com/mbucc/tufte-css_with-codewrap. Thanks @adamschwartz!