විකිපීඩියා:How to fix bunched-up edit links
 |
මෙම පිටුව සිංහල විකිපීඩියාවේ කෙසේ භාවිතා කරයිද යන්න හා බැඳි පොදු භාවිතය ගැන ලියැවුනු එකකි. |
When there is a long strip of right-positioned images or infoboxes together with a number of article sections, it usually causes the section editing links—"[edit]"—for the sections which start after the first and before the last image or infobox to bunch up to the left of it like this: [edit] [edit] [edit] (see Example 1.)
This causes several problems:
- The edit links often partially overlap with and thus obscure the text.
- It makes it harder to use section editing when edit links are not associated with their respective sections.
- Complicating matters further, the edit link positioning varies by browser.
- It looks terrible.
There are several ways to either avoid or work around this and similar issues, as discussed below. The best (most universally effective) and easiest of these has been formalized in the template {{Fix bunching}}.
Using the Fix bunching template
සංස්කරණයThe easiest method works with both images and infoboxes. It leaves formatting virtually untouched except for unbunching the problematic edit links. Use the {{Fix bunching}} template as in the following code:
{{Fix bunching|beg}}
{{ 1st infobox, image, table, etc. }}
{{Fix bunching|mid}}
{{ 2nd infobox, image, table, etc. }}
...continue as needed with {{Fix bunching|mid}} before content:
{{Fix bunching|mid}}
{{ 3rd infobox, image, table, etc. }}
{{Fix bunching|end}}
Note that the resulting column of objects will be as wide as its widest component throughout.
See Example 2 for sample code and its results.
Clearing the floats
සංස්කරණයThis can be done if there is no problem adding extra whitespace before the next section (for instance, because the problem only shows in uncommon font sizes, or if the images are logically attached to sections).
This can be accomplished by adding an element with either of the CSS properties clear:both or clear:right before the next section. An easy way to do it is to use the template {{clear}}.
Moving the images around
සංස්කරණයWhen the article is long enough, it is possible to spread the images around, instead of having them together. It is also possible to make some of the images float left instead of right. This often is enough to fix the issue, and generally results in a prettier article.
Using a gallery
සංස්කරණයWhen you have too many images, it might make sense to move some or most of them to a gallery. However, while this avoids the issue, it has issues of its own (for instance, the captions can be small to the point of being unreadable in some cases, and the image size is fixed).
Removing some of the images
සංස්කරණයIt might be a good idea to question yourself whether all these images are really necessary. The images are supposed to be to illustrate the subject, not to turn an article into a gallery. If images are too dense, but none of them warrant removal, it may mean that the article needs to be expanded. The ideal solution might be to create a page or category combining all of them at විකිමාධ්ය කොමන්ස් and use a relevant template ({{commons}}, {{commonscat}}, {{commons-inline}} or {{commonscat-inline}}) and link to it instead, so that further images are readily found if the article is expanded.
Using a floated div
සංස්කරණයThis method has the advantage of not visibly changing anything in the article; the resulting appearance is almost identical to the original, with the only differences being that the section edit links flow naturally as expected, instead of ending bunched up to the left of the last image, slightly different spacing between the images, and a slightly different margin size. It also has the advantage of being possible to do mechanically (either with a bot or manually). However, it can only be used when the images have identical width (usually happens when all are either |thumb| or a fixed size in px, and all are more wide than tall; can also happen when thumbnails are not used).
To do this, first remove any |right| from the images, and add a |none| to them (this stops them from floating). Then wrap them in <div style="float: right; clear: right">...</div> (this makes them float together, and also puts them below any other right float [පැහැදීම ඇවැසිය] (this means that if the article has a Wikipedia template or custom XHTML code which uses styles with the option "float:right" and this appears before the right-floated "div" discussed outside these parentheses then the "div" correctly positions itself under the right-floated template or custom code discussed inside the parentheses, rather than right of it) instead of to the left of it; it's also what's normally used for the right-floated images).
See Example 3 for an example.
Using a wikitable to group
සංස්කරණයThis is actually what {{Fix bunching}} does in a simplified manner, without requiring use of the wikitable syntax. For an example of using the wikitable code, see Example 4.
Using a stacking template
සංස්කරණයThe template {{stack}} is another way to group images in a single floating box. The syntax is the following:
{{stack|[[image1.jpg]][[image2.jpg]][[image3.jpg]][[image4.jpg]]}}
or
{{stack|float=left/right|[[image1.jpg]][[image2.jpg]][[image3.jpg]][[image4.jpg]]}}
Examples
සංස්කරණයHopefully some examples will make these complicated technical matters easier to understand for non-nerds.
Example 1
සංස්කරණයThis example will demonstrate that the images on the right and sections on the right create rendering issues for each other. This manifests opposite the top edge of the bottom image where the three section edit links line up like this: [edit] [edit] [edit]
[[File:Wikipedesketch.png|thumb|right|ETAOIN SHRDLU CMFWYP VBGKQJ XZ]] [[File:Wikipedesketch.png|thumb|right|ETAOIN SHRDLU CMFWYP VBGKQJ XZ]] [[File:Wikipedesketch.png|thumb|right|ETAOIN SHRDLU CMFWYP VBGKQJ XZ]]
Section 1
සංස්කරණයLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Section 2
සංස්කරණයLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Section 3
සංස්කරණයLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Example 2
සංස්කරණයThis example uses the {{Fix bunching}} template to correct bunching [edit] [edit] [edit] links.
{{Fix bunching|beg}}
[[File:Wikipedesketch.png|thumb|right|ETAOIN SHRDLU CMFWYP VBGKQJ XZ]]
{{Fix bunching|mid}}
[[File:Wikipedesketch.png|thumb|right|ETAOIN SHRDLU CMFWYP VBGKQJ XZ]]
{{Fix bunching|mid}}
[[File:Wikipedesketch.png|thumb|right|ETAOIN SHRDLU CMFWYP VBGKQJ XZ]]
{{Fix bunching|end}}
|
|
|
|
|
|
Section 1
සංස්කරණයLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Section 2
සංස්කරණයLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Section 3
සංස්කරණයLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Example 3
සංස්කරණයDemonstrates placing the recommended div style block around the images will allow the bunched [edit] [edit] [edit] to float to the proper places on their respective section headings.
<div style="float: right; clear: right; margin-left: 1.4em"> [[File:Wikipedesketch.png|thumb|none|ETAOIN SHRDLU CMFWYP VBGKQJ XZ]] [[File:Wikipedesketch.png|thumb|none|ETAOIN SHRDLU CMFWYP VBGKQJ XZ]] [[File:Wikipedesketch.png|thumb|none|ETAOIN SHRDLU CMFWYP VBGKQJ XZ]] </div>
Section 1
සංස්කරණයLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Section 2
සංස්කරණයLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Section 3
සංස්කරණයLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Example 4
සංස්කරණයExample uses a wikitable format, where the width parameter can be left to default to auto, or specified in the style line (not shown).
- Tip: If the HTML element being enclosed is a local infobox in table format (Code will begin with {| vice {{) then the '{|' must begin on the line following the pipe of the table.
{| style="float: right; clear: right; background-color: transparent; margin-left: 1.4em"
| [[File:Wikipedesketch.png|thumb|none|ETAOIN SHRDLU CMFWYP VBGKQJ XZ]]
|-
| [[File:Wikipedesketch.png|thumb|none|ETAOIN SHRDLU CMFWYP VBGKQJ XZ]]
|-
| [[File:Wikipedesketch.png|thumb|none|ETAOIN SHRDLU CMFWYP VBGKQJ XZ]]
|}
| |
| |
| |
Section 1
සංස්කරණයLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Section 2
සංස්කරණයLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Section 3
සංස්කරණයLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Removal of edit links
සංස්කරණයTo remove all edit links from a page, put the "magic word" __NOEDITSECTION__ anywhere in the page. Note that this should not be done on articles.
See also
සංස්කරණය- Bug 1629: Section edit links showing up in wrong place (Opened: 2005-03-04)
- Bug 5118: Text overlaps an image, when image is the 2nd right floated element
- Bug 26449: Add { overflow: hidden; } to H1, H2, H3, H4, H5, H6; this fixes bunching
- User:Drilnoth/lefteditlinks.js/doc – Gadget for moving section edit links next to the section headers (eliminating edit link bunching problem on user end).