First, please ignore what I previously wrote about preventing below/right overflow by forcing the field rectangle positions to remain “in bounds”. I didn’t particularly like that solution, as it prevents field placements that MIGHT be desireable in some circumstances.
In any case, I’ve reverted that code change because I found a MUCH better way to address the issue:
The new solution uses a combination of zoom and overflow handling that properly hides the layout grid “bleed over” rendering when a field is rotated and the layout grid is zoomed out… and, because this solution uses overflow:hidden CSS, it also prevents dragging items outside the containing grid layout!
With regard to the new issue you’ve raised about using transform:scale(3):
Because of the removal of overflow:hidden from field rendering (to permit better handling for rotated content), the field rectangles now function more like “anchor points” for the field content rather than as strict “bounding boxes”.
A side-effect of this is that it is not possible to interact with any field contents (not just images) that are rendered outside of their field rectangle, which is what you have observed when you used transform:scale(3) (and to a lesser extent when rotated content overflows its field rectangle).
While TiddlyTools PasteUp does not prevent you from using any CSS attributes you want – including attributes that cause overflow rendering to occur – the general principle should be to always try to use field rectangles that completely enclose their content and avoid “bleed over” rendering whenever you can.
For example, when rendering image contents you should omit transform:scale(...) entirely and change the dimensions (top, left, width, and height) of the field rectangle. This will automatically scale the image to fill the available field rectangle (while preserving the original image proportions). For text content, you can use font-size:... or zoom:... to get the desired appearance, and then adjust the field rectangle to fit that text.
-e
