text rotation in receipts and slips

[Jason Etheridge]

collab/phasefx/rotated_receipt_text @ working/Evergreen.git
http://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/collab/phasefx/rotated_receipt_text

This requires the Mozilla Print strategy. You could use Mozilla-specific CSS directly to accomplish the same, but this abstracts it a bit, which could be useful if xulrunner ever changes, or receipt templates ever get ported to a non-Mozilla environment.

No pullrequest yet; thoughts?

commit 65cf372b67a0a7e6633af02317ae40fabf4b6d2d
Author: Jason Etheridge <email address hidden>
Date: Mon May 14 12:14:30 2012 -0400

    text rotation macro for receipts/slips

    %ROTATE(degrees)%
    %ROTATE(degrees,'extra CSS')%
    %ROTATE_END%

    Degrees is an integer, but typically you'd use values like 90, -90, 180, 45 etc.

    The things between %ROTATE% and %ROTATE_END% macros will be rotated by the
    specified number of degrees. Negative values rotate counter-clockwise. Except
    for very minimal receipts with judicious use of line breaks, simple rotation
    will probably truncate part of whatever is being rotated. So, there's an
    'extra CSS' variant where you can specify more CSS to fine tune positioning of
    the rotated text/objects.

    For an example, try this for a hold_slip template:

        Header:
            This item needs to be routed to <b>%route_to%</b>:<br/>
            Barcode: %item_barcode%<br/>
            Title: %item_title%<br/>
            <br/>
            %ROTATE(90,'position: absolute; top: 150px; left: 100px')%
            %hold_for_msg%<br/>
            Barcode: %PATRON_BARCODE%<br/>
            Notify by phone: %notify_by_phone%<br/>
            Notified by text: %notify_by_text%<br/>
            Notified by email: %notify_by_email%<br/>
            %ROTATE_END%
            %ROTATE(760,'position: absolute; top: 150px; left: 50px')%

        Line Item:
            %formatted_note%<br/>

        Footer:
            %ROTATE_END%
            <br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/>
            Request date: %request_date%<br/>
            Slip Date: %TODAY_TRIM%<br/>
            Printed by %STAFF_FIRSTNAME% at %SHORTNAME%<br/>
            <br/>

    And then try replacing the

            %ROTATE(90,'position: absolute; top: 150px; left: 100px')%

    with a mere

            %ROTATE(90)%

    and note how the text starts overlapping and becomes truncated.

    Signed-off-by: Jason Etheridge <email address hidden>

[Jason Etheridge (phasefx)]

Any security loopholes with the extra CSS part?

[Thomas Berezansky (tsbere)]

I don't see any obvious security loopholes, but I question several things.

1 - Why? The entire thing is apparently going to be mostly useless without the extra CSS, and if we are going to make them do that then why not make them include the "-moz-transform: rotate()" too? Coupled with details like mozilla allowing the origin of the rotation to be changed and such with more CSS, IMO it would be better to point at documentation of the CSS being generated instead, to be applied as CSS by the end user.

2 - The use of span. Or rather, the exclusive use of span. Perhaps your CSS does weird things with spans, and you want a div, or need a class on the tag that can't be easily provided by the macro, etc. The most flexible option is to just point at documentation and let them build the element(s) they need.

3 - The fact that you can have %ROTATE()% without matching %ROTATE_END% and vice-versa. This is a recipe for broken tags, IMO (and is my biggest implementation complaint).

4 - The requirement that the extra CSS be put in single quotes when the style tag is built with double. That would imply, to me, that it is safe to use double quotes in the extra CSS when in fact it is not. I would either use the same kind of quotes that the user provided, require the same kind being used in the style tag definition, or don't require the extra quotes at all.

[Jason Etheridge (phasefx)]

Thanks Thomas. There's no mandate for using macros for this; just seemed easy with some potential benefits, so I wanted to try it out. If -moz-transform does get changed to some future standard, this could ease some massive editing effort of existing templates. I suspect it'd also be less intimidating for end-users, but maybe not. My first cut required matching tags, but I wasn't sure how to get it to work across multiple lines, so I punted. :)

I'm not going to push for this unless other folks want it.

Do you think it might be possible to work out text rotation without making the user specify things like top, left, etc? Could always do server-side rendering in some CGI process and spit back an image. :D

-- Jason

[Thomas Berezansky (tsbere)]

On multi-line matching, from elsewhere in the very file you edited:

// Sanity check, no javascript in templates
// Note: [\s\S] is a workaround for . not including newlines.
s=s.replace(/<script[^>]*>[\s\S]*?<\/script[^>]*>/gi,'')

As for rotation without top/left/etc (and translations in general), I think the best bet would be to provide documented pre-made styles in an external CSS file. Then just have people do things like apply classes:

<div class="flip"> for a 180 degree rotation based on the center of the block

<div class="alongside"> to rotate 90 degrees and force to the left of the slip. Maybe with left/right variants

<div class="mirrored"> to reverse left/right with a non-rotation transformation for who knows what reason

etc. Then the list is easily expanded without additional code, and the CSS file could include the browser-specific commands for all the supported browsers in one shot too if desired.

[Jason Etheridge (phasefx)]

I think I'm too easily discouraged. Classnames was the first tact I
took (right90, etc.), but I ran away upon realizing global.css wasn't
being loaded (imagining I had avoided that on purpose for cross-site
constraints). But no reason we can't pull in CSS files afterall, eh?

I'm still not sure how to get around the need for pixel munging. Some
variation of position: relative; and use em; instead of px; with top,
left, etc?

[Terran McCanna (tmccanna)]

Marked 'Won't Fix' since this now works with CSS: style="transform: rotate(-90deg);"