Template talk:Transform-rotate: Difference between revisions
Appearance
Content deleted Content added
→Table cell width: +reply |
|||
Line 35: | Line 35: | ||
::::::Good read [http://kizu.ru/en/fun/rotated-text/ here], especially for use in confined spaces, like table headers. <code style="font-size:small;white-space:nowrap">-- [[[[User:Edokter|<span style="color:#006">User:Edokter</span>]]]] {{[[User talk:Edokter|<span style="color:#060">talk</span>]]}}</code> 21:42, 22 February 2015 (UTC) |
::::::Good read [http://kizu.ru/en/fun/rotated-text/ here], especially for use in confined spaces, like table headers. <code style="font-size:small;white-space:nowrap">-- [[[[User:Edokter|<span style="color:#006">User:Edokter</span>]]]] {{[[User talk:Edokter|<span style="color:#060">talk</span>]]}}</code> 21:42, 22 February 2015 (UTC) |
||
:::::::[https://gist.github.com/aiboy/7406727 Here] is a cross-browser version. Please get this implemented! <span style="border:1px solid #f57900;padding:1px;">[[User:SharkD|<span style="color:#8f5902;padding-left:1px;">SharkD</span>]] [[User_talk:SharkD|<span style="color:#fff;background:#fcaf3e;"> Talk </span>]]</span> 05:45, 8 December 2015 (UTC) |
:::::::[https://gist.github.com/aiboy/7406727 Here] is a cross-browser version. Please get this implemented! <span style="border:1px solid #f57900;padding:1px;">[[User:SharkD|<span style="color:#8f5902;padding-left:1px;">SharkD</span>]] [[User_talk:SharkD|<span style="color:#fff;background:#fcaf3e;"> Talk </span>]]</span> 05:45, 8 December 2015 (UTC) |
||
==Monthly project page views== |
|||
Here is a use case. <span style="border:1px solid #f57900;padding:1px;">[[User:SharkD|<span style="color:#8f5902;padding-left:1px;">SharkD</span>]] [[User_talk:SharkD|<span style="color:#fff;background:#fcaf3e;"> Talk </span>]]</span> 05:33, 11 December 2015 (UTC) |
|||
<div style="overflow: auto;"> |
|||
{| class="wikitable" style="text-align:center;" |
|||
|- style="line-height:15em;" |
|||
! |
|||
!<span style="{{Transform-rotate|-90}};width:2em;white-space:nowrap;top:6em;position:relative;">Main page</span> |
|||
!<span style="{{Transform-rotate|-90}};width:2em;white-space:nowrap;top:6em;position:relative;">Talk page</span> |
|||
!<span style="{{Transform-rotate|-90}};width:2em;white-space:nowrap;top:6em;position:relative;">Article guidelines</span> |
|||
!<span style="{{Transform-rotate|-90}};width:2em;white-space:nowrap;top:6em;position:relative;">Naming conventions</span> |
|||
!<span style="{{Transform-rotate|-90}};width:2em;white-space:nowrap;top:6em;position:relative;">Templates</span> |
|||
!<span style="{{Transform-rotate|-90}};width:2em;white-space:nowrap;top:6em;position:relative;">Sources</span> |
|||
!<span style="{{Transform-rotate|-90}};width:2em;white-space:nowrap;top:6em;position:relative;">Assessment</span> |
|||
!<span style="{{Transform-rotate|-90}};width:2em;white-space:nowrap;top:6em;position:relative;">Assessment requests</span> |
|||
!<span style="{{Transform-rotate|-90}};width:2em;white-space:nowrap;top:6em;position:relative;">Peer review</span> |
|||
!<span style="{{Transform-rotate|-90}};width:2em;white-space:nowrap;top:6em;position:relative;">Collaboration</span> |
|||
!<span style="{{Transform-rotate|-90}};width:2em;white-space:nowrap;top:6em;position:relative;">Reference library</span> |
|||
!<span style="{{Transform-rotate|-90}};width:2em;white-space:nowrap;top:6em;position:relative;">Newsletter</span> |
|||
!<span style="{{Transform-rotate|-90}};width:2em;white-space:nowrap;top:6em;position:relative;">Current issue</span> |
|||
!<span style="{{Transform-rotate|-90}};width:2em;white-space:nowrap;top:6em;position:relative;">Video game images</span> |
|||
!<span style="{{Transform-rotate|-90}};width:2em;white-space:nowrap;top:6em;position:relative;">Article alerts</span> |
|||
!<span style="{{Transform-rotate|-90}};width:2em;white-space:nowrap;top:6em;position:relative;">Pages for deletion</span> |
|||
!<span style="{{Transform-rotate|-90}};width:2em;white-space:nowrap;top:6em;position:relative;">New pages</span> |
|||
!<span style="{{Transform-rotate|-90}};width:2em;white-space:nowrap;top:6em;position:relative;">Article requests</span> |
|||
!<span style="{{Transform-rotate|-90}};width:2em;white-space:nowrap;top:6em;position:relative;">Essential articles</span> |
|||
!<span style="{{Transform-rotate|-90}};width:2em;white-space:nowrap;top:6em;position:relative;">Popular articles</span> |
|||
!<span style="{{Transform-rotate|-90}};width:2em;white-space:nowrap;top:6em;position:relative;">Featured content</span> |
|||
!<span style="{{Transform-rotate|-90}};width:2em;white-space:nowrap;top:6em;position:relative;">Good content</span> |
|||
!<span style="{{Transform-rotate|-90}};width:2em;white-space:nowrap;top:6em;position:relative;">Project portal</span> |
|||
!<span style="{{Transform-rotate|-90}};width:2em;white-space:nowrap;top:6em;position:relative;">Project category</span> |
|||
!<span style="{{Transform-rotate|-90}};width:2em;white-space:nowrap;top:6em;position:relative;">Inactive project cleanup</span> |
|||
!<span style="{{Transform-rotate|-90}};width:2em;white-space:nowrap;top:6em;position:relative;">Traffic statistics</span> |
|||
!<span style="{{Transform-rotate|-90}};width:2em;white-space:nowrap;top:6em;position:relative;">Article statistics</span> |
|||
!<span style="{{Transform-rotate|-90}};width:2em;white-space:nowrap;top:6em;position:relative;">Member category</span> |
|||
!<span style="{{Transform-rotate|-90}};width:2em;white-space:nowrap;top:6em;position:relative;">Wikipedia 0.7 workshop</span> |
|||
|- |
|||
|09/07||2514||6021||1372||80||195||349||864||313||406||174||208||296||95||388||247||1267||1026||707||135||252||285||238||5090||81||79||75||57||166||50 |
|||
|- |
|||
|09/08||2837||8116||1330||120||203||339||858||373||431||193||254||236||62||400||177||953||581||621||232||144||339||223||6833||98||55||59||52||201||31 |
|||
|- |
|||
|09/09||2216||3972||884||95||132||257||715||264||343||150||160||216||47||344||145||855||654||424||126||66||266||140||6355||95||64||65||54||189||31 |
|||
|- |
|||
|09/10||2271||4072||1206||229||184||280||777||337||331||143||182||292||78||348||178||823||702||591||152||105||231||221||6923||97||88||88||61||146||49 |
|||
|- |
|||
|09/11||1833||5372||969||313||153||277||730||384||289||160||155||185||70||379||170||675||563||388||144||133||202||139||6201||79||138||147||69||123||51 |
|||
|- |
|||
|09/12||2093||4235||986||261||207||299||670||297||313||152||198||247||67||384||173||958||1058||509||174||107||255||171||5910||83||74||90||49||121||57 |
|||
|- |
|||
|10/01||2172||4412||856||257||192||351||696||400||431||132||171||318||77||401||166||1356||927||674||145||111||248||150||6690||101||64||90||46||115||55 |
|||
|- |
|||
|10/02||1907||4257||829||251||216||329||650||513||350||122||180||334||80||359||148||1065||909||433||250||111||287||189||5689||111||94||161||80||147||70 |
|||
|- |
|||
|10/03||2498||4056||943||262||233||389||798||474||402||151||201||555||83||277||180||886||676||541||207||107||256||227||8133||148||93||113||55||105||58 |
|||
|- |
|||
|10/04||2574||3498||868||230||197||356||582||313||327||135||210||301||79||281||172||797||426||446||199||87||211||232||9150||122||93||62||72||111||80 |
|||
|- |
|||
|10/05||2140||2682||809||176||188||306||672||237||260||113||162||262||64||267||106||582||340||449||149||83||207||184||8793||116||76||61||58||88||62 |
|||
|- |
|||
|10/06||1386||2314||701||114||130||139||515||161||202||91||117||141||54||155||86||432||409||310||153||63||174||144||5884||70||45||52||38||63||40 |
|||
|- |
|||
|10/07||1386||2477||794||107||131||230||490||182||229||83||143||127||49||170||61||463||221||323||169||63||135||103||8655||78||54||44||26||69||59 |
|||
|- |
|||
|10/08||2115||2896||1137||166||179||289||769||337||291||117||145||254||87||275||95||623||400||344||276||118||264||218||14843||126||71||72||76||106||64 |
|||
|- |
|||
|10/09||2257||3038||1163||169||133||467||752||333||236||111||145||264||72||267||103||527||380||397||201||126||268||217||12520||102||62||67||57||114||58 |
|||
|- |
|||
|10/10||2014||3240||819||158||119||325||586||308||210||84||133||170||69||271||80||798||444||503||115||107||179||145||14611||76||60||64||64||68||29 |
|||
|- |
|||
|10/11||2123||3293||797||156||128||344||507||275||238||103||169||107||61||257||69||440||393||237||167||106||322||226||12365||100||56||62||53||80||56 |
|||
|- |
|||
|10/12||2058||3215||798||149||151||420||565||261||245||525||169||114||67||266||261||474||434||374||131||166||206||201||9141||100||69||84||68||80||61 |
|||
|- |
|||
|11/01||2434||5416||793||171||157||547||718||437||219||1529||137||139||96||283||251||660||466||402||146||159||217||203||12903||136||70||67||76||74||54 |
|||
|- |
|||
|11/02||2292||5078||726||182||143||407||694||420||209||744||133||92||48||266||172||623||378||359||151||152||219||192||10876||142||63||58||59||73||53 |
|||
|- |
|||
|11/03||2670||3958||809||210||178||917||812||370||324||1099||153||109||68||281||166||744||471||375||152||194||240||216||11832||157||90||76||67||80||56 |
|||
|- |
|||
|11/04||2450||3199||857||180||134||695||641||242||392||709||124||147||64||282||182||829||543||374||148||136||325||192||11406||142||95||90||71||83||67 |
|||
|- |
|||
|11/05||2425||2595||774||154||143||554||657||217||286||663||117||66||51||260||215||976||510||267||172||179||198||182||11366||101||71||60||44||75||34 |
|||
|- |
|||
|11/06||2608||3443||797||179||174||536||578||166||446||904||93||122||59||244||202||993||499||254||341||224||207||224||12255||103||92||83||67||66||147 |
|||
|} |
|||
</div> |
Latest revision as of 05:33, 11 December 2015
IE
[edit]For those interested in fixing this in old IE versions, see http://stackoverflow.com/questions/4617220/css-rotate-property-in-ie — Preceding unsigned comment added by 62.194.104.217 (talk) 17:05, 24 November 2012 (UTC)
- We can't use -ms-filters inline in templates; they are blocked by the parser for security resasons. — Edokter (talk) — 19:56, 24 November 2012 (UTC)
Table cell width
[edit]Testing this in a table. The cell width increases with the text length. Any ideas on how to fix this? -- Gadget850 talk 17:24, 22 February 2015 (UTC)
{| class="wikitable" |- style="line-height:30em;" ! <span style="width: 5em; {{transform-rotate|-90}}">HHHHH</span> ! <span style="width: 5em; {{transform-rotate|-90}}">HHHHHHHHHH</span> ! <span style="width: 5em; {{transform-rotate|-90}}">HHHHHHHHHHHHHHHHHHHH</span> ! <span style="width: 5em; {{transform-rotate|-90}}">HHHHHHHHHHHHHHHHHHHHHHHHHHHHHH</span> |}
HHHHH | HHHHHHHHHH | HHHHHHHHHHHHHHHHHHHH | HHHHHHHHHHHHHHHHHHHHHHHHHHHHHH |
---|
- The parent element always retains its original dimensions.
So you will have to hardcode them as well.A possible way is to use absolute/relative positioning, but you'd have to hardcode everything to make that work reliable.-- [[User:Edokter]] {{talk}}
18:09, 22 February 2015 (UTC)- It would help if you have a use case. The template is pretty bare-bones, so I'm thinking if intergating transform-origin (to negate the necessity for relative positioning) and moving it to {{rotate}} (which now redirects to here).
-- [[User:Edokter]] {{talk}}
18:38, 22 February 2015 (UTC)
- It would help if you have a use case. The template is pretty bare-bones, so I'm thinking if intergating transform-origin (to negate the necessity for relative positioning) and moving it to {{rotate}} (which now redirects to here).
- Just stumbled across this and thought it might be better than the use of SVG for rotated text at Help:Table. I had played with both transform-origin and positioning without success. Your comment made me try putting the width in the span and that seems to work. -- Gadget850 talk 18:42, 22 February 2015 (UTC)
- So it seems, but the position is a bit off. That is one of the reasons I want to incorporate transform-origin.
-- [[User:Edokter]] {{talk}}
18:55, 22 February 2015 (UTC)
- So it seems, but the position is a bit off. That is one of the reasons I want to incorporate transform-origin.
- Just stumbled across this and thought it might be better than the use of SVG for rotated text at Help:Table. I had played with both transform-origin and positioning without success. Your comment made me try putting the width in the span and that seems to work. -- Gadget850 talk 18:42, 22 February 2015 (UTC)
- I can make it move with the new parameter, but not as I expected. -- Gadget850 talk 20:18, 22 February 2015 (UTC)
- Adding display=flex aligns the first cell with the others, but I don't understand why. -- Gadget850 talk 20:35, 22 February 2015 (UTC)
- Flex does nothing for me. When I said transform-origin, I actually ment transform:translate, which basically moves the transformed object.
-- [[User:Edokter]] {{talk}}
21:12, 22 February 2015 (UTC) - Good read here, especially for use in confined spaces, like table headers.
-- [[User:Edokter]] {{talk}}
21:42, 22 February 2015 (UTC)- Here is a cross-browser version. Please get this implemented! SharkD Talk 05:45, 8 December 2015 (UTC)
- Flex does nothing for me. When I said transform-origin, I actually ment transform:translate, which basically moves the transformed object.
Monthly project page views
[edit]Here is a use case. SharkD Talk 05:33, 11 December 2015 (UTC)
Main page | Talk page | Article guidelines | Naming conventions | Templates | Sources | Assessment | Assessment requests | Peer review | Collaboration | Reference library | Newsletter | Current issue | Video game images | Article alerts | Pages for deletion | New pages | Article requests | Essential articles | Popular articles | Featured content | Good content | Project portal | Project category | Inactive project cleanup | Traffic statistics | Article statistics | Member category | Wikipedia 0.7 workshop | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
09/07 | 2514 | 6021 | 1372 | 80 | 195 | 349 | 864 | 313 | 406 | 174 | 208 | 296 | 95 | 388 | 247 | 1267 | 1026 | 707 | 135 | 252 | 285 | 238 | 5090 | 81 | 79 | 75 | 57 | 166 | 50 |
09/08 | 2837 | 8116 | 1330 | 120 | 203 | 339 | 858 | 373 | 431 | 193 | 254 | 236 | 62 | 400 | 177 | 953 | 581 | 621 | 232 | 144 | 339 | 223 | 6833 | 98 | 55 | 59 | 52 | 201 | 31 |
09/09 | 2216 | 3972 | 884 | 95 | 132 | 257 | 715 | 264 | 343 | 150 | 160 | 216 | 47 | 344 | 145 | 855 | 654 | 424 | 126 | 66 | 266 | 140 | 6355 | 95 | 64 | 65 | 54 | 189 | 31 |
09/10 | 2271 | 4072 | 1206 | 229 | 184 | 280 | 777 | 337 | 331 | 143 | 182 | 292 | 78 | 348 | 178 | 823 | 702 | 591 | 152 | 105 | 231 | 221 | 6923 | 97 | 88 | 88 | 61 | 146 | 49 |
09/11 | 1833 | 5372 | 969 | 313 | 153 | 277 | 730 | 384 | 289 | 160 | 155 | 185 | 70 | 379 | 170 | 675 | 563 | 388 | 144 | 133 | 202 | 139 | 6201 | 79 | 138 | 147 | 69 | 123 | 51 |
09/12 | 2093 | 4235 | 986 | 261 | 207 | 299 | 670 | 297 | 313 | 152 | 198 | 247 | 67 | 384 | 173 | 958 | 1058 | 509 | 174 | 107 | 255 | 171 | 5910 | 83 | 74 | 90 | 49 | 121 | 57 |
10/01 | 2172 | 4412 | 856 | 257 | 192 | 351 | 696 | 400 | 431 | 132 | 171 | 318 | 77 | 401 | 166 | 1356 | 927 | 674 | 145 | 111 | 248 | 150 | 6690 | 101 | 64 | 90 | 46 | 115 | 55 |
10/02 | 1907 | 4257 | 829 | 251 | 216 | 329 | 650 | 513 | 350 | 122 | 180 | 334 | 80 | 359 | 148 | 1065 | 909 | 433 | 250 | 111 | 287 | 189 | 5689 | 111 | 94 | 161 | 80 | 147 | 70 |
10/03 | 2498 | 4056 | 943 | 262 | 233 | 389 | 798 | 474 | 402 | 151 | 201 | 555 | 83 | 277 | 180 | 886 | 676 | 541 | 207 | 107 | 256 | 227 | 8133 | 148 | 93 | 113 | 55 | 105 | 58 |
10/04 | 2574 | 3498 | 868 | 230 | 197 | 356 | 582 | 313 | 327 | 135 | 210 | 301 | 79 | 281 | 172 | 797 | 426 | 446 | 199 | 87 | 211 | 232 | 9150 | 122 | 93 | 62 | 72 | 111 | 80 |
10/05 | 2140 | 2682 | 809 | 176 | 188 | 306 | 672 | 237 | 260 | 113 | 162 | 262 | 64 | 267 | 106 | 582 | 340 | 449 | 149 | 83 | 207 | 184 | 8793 | 116 | 76 | 61 | 58 | 88 | 62 |
10/06 | 1386 | 2314 | 701 | 114 | 130 | 139 | 515 | 161 | 202 | 91 | 117 | 141 | 54 | 155 | 86 | 432 | 409 | 310 | 153 | 63 | 174 | 144 | 5884 | 70 | 45 | 52 | 38 | 63 | 40 |
10/07 | 1386 | 2477 | 794 | 107 | 131 | 230 | 490 | 182 | 229 | 83 | 143 | 127 | 49 | 170 | 61 | 463 | 221 | 323 | 169 | 63 | 135 | 103 | 8655 | 78 | 54 | 44 | 26 | 69 | 59 |
10/08 | 2115 | 2896 | 1137 | 166 | 179 | 289 | 769 | 337 | 291 | 117 | 145 | 254 | 87 | 275 | 95 | 623 | 400 | 344 | 276 | 118 | 264 | 218 | 14843 | 126 | 71 | 72 | 76 | 106 | 64 |
10/09 | 2257 | 3038 | 1163 | 169 | 133 | 467 | 752 | 333 | 236 | 111 | 145 | 264 | 72 | 267 | 103 | 527 | 380 | 397 | 201 | 126 | 268 | 217 | 12520 | 102 | 62 | 67 | 57 | 114 | 58 |
10/10 | 2014 | 3240 | 819 | 158 | 119 | 325 | 586 | 308 | 210 | 84 | 133 | 170 | 69 | 271 | 80 | 798 | 444 | 503 | 115 | 107 | 179 | 145 | 14611 | 76 | 60 | 64 | 64 | 68 | 29 |
10/11 | 2123 | 3293 | 797 | 156 | 128 | 344 | 507 | 275 | 238 | 103 | 169 | 107 | 61 | 257 | 69 | 440 | 393 | 237 | 167 | 106 | 322 | 226 | 12365 | 100 | 56 | 62 | 53 | 80 | 56 |
10/12 | 2058 | 3215 | 798 | 149 | 151 | 420 | 565 | 261 | 245 | 525 | 169 | 114 | 67 | 266 | 261 | 474 | 434 | 374 | 131 | 166 | 206 | 201 | 9141 | 100 | 69 | 84 | 68 | 80 | 61 |
11/01 | 2434 | 5416 | 793 | 171 | 157 | 547 | 718 | 437 | 219 | 1529 | 137 | 139 | 96 | 283 | 251 | 660 | 466 | 402 | 146 | 159 | 217 | 203 | 12903 | 136 | 70 | 67 | 76 | 74 | 54 |
11/02 | 2292 | 5078 | 726 | 182 | 143 | 407 | 694 | 420 | 209 | 744 | 133 | 92 | 48 | 266 | 172 | 623 | 378 | 359 | 151 | 152 | 219 | 192 | 10876 | 142 | 63 | 58 | 59 | 73 | 53 |
11/03 | 2670 | 3958 | 809 | 210 | 178 | 917 | 812 | 370 | 324 | 1099 | 153 | 109 | 68 | 281 | 166 | 744 | 471 | 375 | 152 | 194 | 240 | 216 | 11832 | 157 | 90 | 76 | 67 | 80 | 56 |
11/04 | 2450 | 3199 | 857 | 180 | 134 | 695 | 641 | 242 | 392 | 709 | 124 | 147 | 64 | 282 | 182 | 829 | 543 | 374 | 148 | 136 | 325 | 192 | 11406 | 142 | 95 | 90 | 71 | 83 | 67 |
11/05 | 2425 | 2595 | 774 | 154 | 143 | 554 | 657 | 217 | 286 | 663 | 117 | 66 | 51 | 260 | 215 | 976 | 510 | 267 | 172 | 179 | 198 | 182 | 11366 | 101 | 71 | 60 | 44 | 75 | 34 |
11/06 | 2608 | 3443 | 797 | 179 | 174 | 536 | 578 | 166 | 446 | 904 | 93 | 122 | 59 | 244 | 202 | 993 | 499 | 254 | 341 | 224 | 207 | 224 | 12255 | 103 | 92 | 83 | 67 | 66 | 147 |