Last modified: 2012-09-27 01:10:38 UTC

Wikimedia Bugzilla is closed!

Wikimedia migrated from Bugzilla to Phabricator. Bug reports are handled in Wikimedia Phabricator.
This static website is read-only and for historical purposes. It is not possible to log in and except for displaying bug reports and their history, links might be broken. See T40929, the corresponding Phabricator task for complete and up-to-date bug report information.
Bug 38929 - Pre/source code is rendered with unwanted newlines due to CSS change
Pre/source code is rendered with unwanted newlines due to CSS change
Status: RESOLVED DUPLICATE of bug 38800
Product: MediaWiki
Classification: Unclassified
Interface (Other open bugs)
unspecified
All All
: Unprioritized normal with 1 vote (vote)
: ---
Assigned To: Nobody - You can work on this!
:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2012-08-01 18:48 UTC by TMg
Modified: 2012-09-27 01:10 UTC (History)
3 users (show)

See Also:
Web browser: ---
Mobile Platform: ---
Assignee Huggle Beta Tester: ---


Attachments

Description TMg 2012-08-01 18:48:36 UTC
The latest change on the file /skins/common/commonElements.css is bad. You added a

white-space: pre-wrap;

but this is added to both the <pre> as well as the surrounding <div> element.

pre, .mw-code {
	white-space: pre-wrap;
}

This makes all whitespace outside (!) of the <pre> but inside of the <div> create unwanted newlines. Tested with Opera and Firefox. Please remove this or add it to the <pre> only.

https://gerrit.wikimedia.org/r/gitweb?p=mediawiki/core.git;a=commitdiff;h=782b9f177404f02417c03abaf96b371e1462f160
Comment 1 Krinkle 2012-08-01 22:56:13 UTC
white-space: pre (whether or not with -wrap) was added to.. preformat whitespace (which it wasn't in some cases).

This works fine in all case, even when wrapping the <pre> in a <div>. The reason it is wrapped in a <div> is because the fact that SyntaxHighlighter uses a <pre> is not controllable and the output is not changeable. Not even with ugly string searching, because it has (and needs) a CSS reset.

The mw-code class in general works just fine, so this is not a bug in the Vector skin, nor in MediaWiki core for that matter.

It can be used on a <pre> directly, or (in the case of the Geshi SyntaxHighlight extension) on a wrapper around it.

The problem is that Tidy adds *additional* new line feeds between opening tags (e.g. between <div> and <pre>) which is (and should) cause them to be visible in a preformatted context (and whether or not something is preformatted is a CSS decision, not known to HTML standalone)).

Without Tidy, all this works fine as expected.

*** This bug has been marked as a duplicate of bug 38800 ***
Comment 2 TMg 2012-08-02 08:57:10 UTC
Are you kidding me? Remove the damn pre-warp from the div! Whats the problem with that?
Comment 3 Krinkle 2012-08-02 18:25:19 UTC
(In reply to comment #2)
> Are you kidding me? Remove the damn pre-warp from the div! Whats the problem
> with that?

No need to get all excited now. The Tidy bug is more severe as it turns out. Tim Starling is looking into fixing the Tidy bug. On the short term, we've reverted the css change and re-opened the bug reports that it addressed (broken layout due to overflow, and issues with whitespace preservation in some extensions). - see also bug 260.

*** This bug has been marked as a duplicate of bug 38800 ***
Comment 4 TMg 2012-08-04 20:31:08 UTC
I don't get it. Whats the problem with adding "pre { white-space: pre-wrap; }" to the CSS file instead of "pre, .mw-code { white-space: pre-wrap; }"? From what I see this works in all cases.
Comment 5 Krinkle 2012-08-04 20:42:11 UTC
Because the output is not always a <pre>.

And also, there is no enforcement whatsoever that the class "mw-code" has to be on a <div>, or that it has to be a wrapping element around the 'real' element.

The mw-code class is a generic style rule that is to be applied to blocks of code and individual skins can  customize the look of such blocks through that class.

In the case of the SyntaxHighlight_Geshi extension the <pre> element is not generated by MediaWiki, it is generated by the geshi library. Moreoever (as already explained before) the inner element is variable. It is not always a <pre>. It can also be a different block level element (i.e. <div>) that geshi's hard-locking css rules turn into a pre-looking element.

Therefor we use a generic node name agnostic class name that can be applied to any element. Be it a <div>, <pre> or whatever. In the case of the SyntaxHighlight_Geshi extension, the <pre> or <div> can't be customized because it is generated by the library automatically, so in there we wrap it in mw-code class.

In other cases (e.g. MediaWiki:Foo/bar.js) the element wrapper is however generated by MediaWiki and in there the class can be applied to the container directly.

So, no, using only "pre {}" as the selector does:
1) not work in all cases, because it is not always a <pre>
2) does not work ever at all in the case of SyntaxHighlight_Geshi because geshi has inline style rules that override any and all stylesheets.

Note You need to log in before you can comment on or make changes to this bug.


Navigation
Links