r65923 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:r65922‎ | r65923 | r65924 >
Date:00:08, 5 May 2010
Author:hartman
Status:resolved (Comments)
Tags:
Comment:
Improve CSS for print versions

* No backgrounds for thumb and gallery frames.
* Proper aligning for gallery frames
* Support RTL languages (floatleft/right, thumbs and tocindent) Fixes bug 20344.
Modified paths:
  • /trunk/phase3/skins/common/commonPrint.css (modified) (history)

Diff [purge]

Index: trunk/phase3/skins/common/commonPrint.css
@@ -10,15 +10,17 @@
1111 a.stub,
1212 a.new{ color:#ba0000; text-decoration:none; }
1313
14 -#toc {
15 - /*border:1px solid #2f6fab;*/
 14+#toc {
1615 border:1px solid #aaaaaa;
1716 background-color:#f9f9f9;
1817 padding:5px;
1918 }
20 -.tocindent {
 19+body.ltr .tocindent {
2120 margin-left: 2em;
2221 }
 22+body.rtl .tocindent {
 23+ margin-right: 2em;
 24+}
2325 .tocline {
2426 margin-bottom: 0px;
2527 }
@@ -27,52 +29,79 @@
2830 div.floatright {
2931 float: right;
3032 clear: right;
31 - margin: 0;
32 - position:relative;
33 - border: 0.5em solid White;
34 - border-width: 0.5em 0 0.8em 1.4em;
 33+ position: relative;
 34+ margin: 0.5em 0 0.8em 1.4em;
3535 }
 36+body.rtl div.floatright {
 37+ float: left;
 38+ clear: left;
 39+ margin: 0.5em 1.4em 0.8em 0;
 40+}
3641 div.floatright p { font-style: italic;}
3742 div.floatleft {
38 - float: left;
39 - margin: 0.3em 0.5em 0.5em 0;
40 - position:relative;
41 - border: 0.5em solid White;
42 - border-width: 0.5em 1.4em 0.8em 0;
 43+ float: left;
 44+ clear: left;
 45+ position: relative;
 46+ margin: 0.5em 1.4em 0.8em 0;
4347 }
44 -div.floatleft p { font-style: italic; }
 48+body.rtl div.floatleft {
 49+ float: right;
 50+ clear: right;
 51+ margin: 0.5em 0 0.8em 1.4em;
 52+}
 53+div.floatleft p { font-style: italic; }
 54+
4555 /* thumbnails */
4656 div.thumb {
47 - margin-bottom: 0.5em;
48 - border-style: solid; border-color: White;
 57+ border: none;
4958 width: auto;
50 - overflow: hidden;
 59+ margin-top: 0.5em;
 60+ margin-bottom: 0.8em;
 61+ background-color: transparent;
5162 }
5263 div.thumbinner {
5364 border:1px solid #cccccc;
5465 padding: 3px !important;
55 - background-color:#f9f9f9;
 66+ background-color: White;
5667 font-size: 94%;
5768 text-align: center;
 69+ overflow: hidden;
5870 }
5971 html .thumbimage {
6072 border:1px solid #cccccc;
6173 }
6274 html .thumbcaption {
63 - border: none;
64 - padding: 0.3em 0 0.1em 0;
 75+ border: none;
 76+ text-align: left;
 77+ line-height: 1.4em;
 78+ padding: 3px !important;
 79+ font-size: 94%;
6580 }
 81+body.rtl .thumbcaption {
 82+ text-align: right;
 83+}
 84+
6685 div.magnify { display: none; }
6786 div.tright {
6887 float: right;
6988 clear: right;
70 - border-width: 0.5em 0 0.8em 1.4em;
 89+ margin: 0.5em 0 0.8em 1.4em;
7190 }
7291 div.tleft {
7392 float: left;
74 - margin-right:0.5em;
 93+ clear: left;
 94+ margin: 0.5em 1.4em 0.8em 0;
 95+}
 96+body.rtl div.tright {
 97+ float: left;
 98+ clear: left;
7599 border-width: 0.5em 1.4em 0.8em 0;
76100 }
 101+body.rtl div.tleft {
 102+ float: right;
 103+ clear: right;
 104+ border-width: 0.5em 0 0.8em 1.4em;
 105+}
77106 img.thumbborder {
78107 border: 1px solid #dddddd;
79108 }
@@ -206,21 +235,50 @@
207236 text-decoration: inherit ! important;
208237 }
209238
210 -img { border: none; }
211 -img.tex { vertical-align: middle; }
 239+img {
 240+ border: none;
 241+ vertical-align: middle;
 242+}
 243+
 244+/* math */
212245 span.texhtml { font-family: serif; }
213246
214247 #siteNotice { display: none; }
215248
 249+/* image galleries */
 250+table.gallery {
 251+ border: 1px solid #ccc;
 252+ margin: 2px;
 253+ padding: 2px;
 254+ background-color: white;
 255+ border-collapse: collapse;
 256+}
 257+
 258+table.gallery tr {
 259+ vertical-align: top;
 260+}
 261+
 262+table.gallery td {
 263+ vertical-align: top;
 264+ padding: 1px;
 265+ border: 1px solid #ccc;
 266+}
 267+
216268 div.gallerybox {
217 - border: 1px solid #cccccc;
218 - background-color:#f9f9f9;
219 - width: 150px;
 269+ margin: 2px;
220270 }
221271
 272+div.gallerybox div.thumb {
 273+ text-align: center;
 274+ border: 1px solid #ccc;
 275+ margin: 2px;
 276+}
 277+
222278 div.gallerytext {
223 - overflow: visible;
224 -}
 279+ overflow: hidden;
 280+ font-size: 94%;
 281+ padding: 2px 4px;
 282+}
225283
226284 /*
227285 ** Diff rendering

Follow-up revisions

RevisionCommit summaryAuthorDate
r80164Remove rtl modes from Print stylesheet, since ResourceLoader now does this it...hartman11:39, 13 January 2011
r82748Removed white-background from ul.gallery; Updated commonPrint gallery styles...krinkle21:16, 24 February 2011

Comments

#Comment by Trevor Parscal (WMF) (talk | contribs)   18:08, 12 January 2011

ResourceLoader automatically flips styles to support RTL - this rev appears to manually do the same work, which actually causes the auto-flipping to screw things up because it flips the body.rtl rules, which overpower the otherwise correctly flipped rules, thus re-reversing things...

Put your wiki into enrtl, click print in your browser (which enables the print media) and click preview - you will see that these changes cause the browser to always render in left to right.

#Comment by TheDJ (talk | contribs)   20:38, 12 January 2011

This change is pre-ResourceLoader (by about 3/4 of a year). Can't help it that no one made it resource loader compatible yet. Anything else ?

#Comment by TheDJ (talk | contribs)   20:41, 12 January 2011

Filed as bug 26694

Status & tagging log