Add top-to-bottom support #36
Conversation
Add support for changing to any direction/writing-mode. Two new optional arguments added, "sourceDir" and "targetDir", which function as the source and target directions, defaulting to "lr-tb" and "rl-tb", respectively. Additionally, added support for multiple background-positions (background-position: 5% 10%, 15% 20%; ), combined edge-value background-positions (background-position: right 5% bottom 10px; ), full URLs in background images, multiple text-shadows and box-shadows, border-images, and bidirectional cursors (such as cursor: nesw; ). Fixed bugs: box shadows with both inset and color before position ( box-shadow: inset red 1px 2px; ), double-quotes in attribute selectors no longer breaks class-flip suppressing, fixed text-shadows with both nonzero X and nonzero Y values, fixed issue with background-positions with horizontal edge values (background-position: left 10%;) and numerical background-colors (background: rgba( 0 , 0 , 0 , 0 ) url(foo.png) 10% 5%).
(With additional slots for tb-lr and tb-rl.)
(apparently elision and trailing commas aren't valid)
|
It occurs to me that the way this handles "ltr"/"rtl" in image urls might not actually be the best way. It treats them like CSS directions, so lr-tb > tb-lr leaves "url(foo-ltr.png)" the same, instead of using "ttb" in the urls. Otoh, there might be applications for having images based on simple direction. Not sure. |
|
I'm blocking this on #37 as I am unable to otherwise verify or imagine what a transformation does. It's difficult enough with LTR/RTL. Seeing it visually seems like the only sensible way to decide what is "right". |
|
...Are there any issues still blocking this? |
Conflicts: src/cssjanus.js test/data.json
… Y, Z, 3d), matrix), transform-origin, perspective-origin, allow + and e notation in numbers per the spec
…ents inside CSS rules
|
Ping? |
|
@YairRand Sorry, but I just can't find the time to review a change of this size and complexity. The (the php port of) CSSJanus is actively used at Wikimedia, there are close to no resources committed to its maintenance. And until or unless ttb support is needed at Wikimedia, given the complexity in understanding and maintaining it forward, I can't allocate the time for it. I'll also admit that even with the visual demo (Thanks again for helping with that!), I still am not confident in what outcome I would expect when enabling ttb. It would help a lot if you can show an existing (realistic, as opposed to demo) example of a top-to-bottom website that uses the kind of layout we're proposing here. The best advice I can give at this point is to split the change up in smaller well-documented and well-tested chunks that we can review and land one at a time. For example, it seems various internal refactors are part of this change which we can also apply to the current code base first, as a way of generalising and preparing the code for ttb support. Landing those separately first would be something that is easier to review as a way of more slowly getting used to the new shape of the code. It will also provide some time to prepare the PHP port in lockstep. I apologise for not setting the right expectations ahead of time. I was too optimistic in thinking I'd find spare time to figure this out and land it. |
|
@Krinkle Thanks for the suggestion, I've split off some of this into #56 . Some links:
|
Add support for changing to any direction/writing-mode. Two new optional arguments added, "sourceDir" and "targetDir", which function as the source and target directions, defaulting to "lr-tb" and "rl-tb", respectively.
Additionally, added support for multiple background-positions (background-position: 5% 10%, 15% 20%; ), combined edge-value background-positions (background-position: right 5% bottom 10px; ), full URLs in background images, multiple text-shadows and box-shadows, border-images, and bidirectional cursors (such as cursor: nesw; ). Fixed bugs: box shadows with both inset and color before position ( box-shadow: inset red 1px 2px; ), double-quotes in attribute selectors no longer breaks class-flip suppressing, fixed text-shadows with both nonzero X and nonzero Y values, fixed issue with background-positions with horizontal edge values (background-position: left 10%;) and numerical background-colors (background: rgba( 0 , 0 , 0 , 0 ) url(foo.png) 10% 5%).
See: issue #25