Template talk:Latin letter info
(Redirected from Template talk:Latin alphabet sidebar/sandbox)
code changes
[edit]I have updated the code to use {{Cursive script}}, and moved the old code to the sandbox. the reason is to allow the image map to be used in places without the sidebar, but at the same time, eliminate code duplication. in the testcases, I have checked the html source generated by the current and old versions. for example, the html source for the image map for the letter A:
- Old version
<div style="width: 222px; padding: 3px; border: 1px solid #CCCCCC; margin: 3px; float:right; clear:right; ;background:#F9F9F9"> <div style="position: relative;border: 1px solid #CCCCCC; padding: 0px; width:220px"><a href="/https/en.wikipedia.org/wiki/File:Cursive.svg" class="image" title="Latin letter info/testcases (100x100)"><img alt="Latin letter info/testcases (100x100)" src="//upload.wikimedia.org/wikipedia/commons/thumb/0/00/Cursive.svg/220px-Cursive.svg.png" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/0/00/Cursive.svg/330px-Cursive.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/0/00/Cursive.svg/440px-Cursive.svg.png 2x" height="176" width="220"></a><br> <div style="position:absolute; z-index:2; top: 8.2%; left: 8.5%; height: 0; width: 0; margin: 0; padding: 0;"> <div style="position: relative; text-align: center; left: -15px; top: -15px; width: 29px; font-size: 9px; line-height:0;"><a href="/https/en.wikipedia.org/wiki/File:Circle_sheer_blue_29.gif" class="image" title="Latin letter info/testcases"><img alt="Latin letter info/testcases" src="//upload.wikimedia.org/wikipedia/commons/8/8a/Circle_sheer_blue_29.gif" height="29" width="29"></a></div> <div style="font-size: 90%; line-height: 110%; position: relative; top: -1.5em; width: 6em; top: -35px; left: 0.72397539753975em; text-align: left;"></div> </div> <div style="position:absolute; z-index:2; top: 49.8%; left: 10%; height: 0; width: 0; margin: 0; padding: 0;"> <div style="position: relative; text-align: center; left: -16px; top: -16px; width: 31px; font-size: 9px; line-height:0;"><a href="/https/en.wikipedia.org/wiki/File:Circle_sheer_blue_31.gif" class="image" title="Latin letter info/testcases"><img alt="Latin letter info/testcases" src="//upload.wikimedia.org/wikipedia/commons/2/2a/Circle_sheer_blue_31.gif" height="31" width="31"></a></div> <div style="font-size: 90%; line-height: 110%; position: relative; top: -1.5em; width: 6em; top: -36px; left: 0.73609660966097em; text-align: left;"></div> </div> </div> <div style="font-size: 90%"><a href="/https/en.wikipedia.org/wiki/Cursive" title="Cursive">Cursive</a> script 'a' and capital 'A'.</div>
- New version
<div style="width: 222px; padding: 3px; border: 1px solid #CCCCCC; margin: 3px; float:right; clear:right; background:#F9F9F9"> <div style="position: relative;border: 1px solid #CCCCCC; padding: 0px; width:220px"><a href="/https/en.wikipedia.org/wiki/File:Cursive.svg" class="image"><img alt="Cursive.svg" src="//upload.wikimedia.org/wikipedia/commons/thumb/0/00/Cursive.svg/220px-Cursive.svg.png" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/0/00/Cursive.svg/330px-Cursive.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/0/00/Cursive.svg/440px-Cursive.svg.png 2x" height="176" width="220"></a><br> <div style="position:absolute; z-index:2; top: 8.3%; left: 8.5%; height: 0; width: 0; margin: 0; padding: 0;"> <div style="position: relative; text-align: center; left: -15px; top: -15px; width: 29px; font-size: 9px; line-height:0;"><a href="/https/en.wikipedia.org/wiki/File:Circle_sheer_blue_29.gif" class="image"><img alt="Circle sheer blue 29.gif" src="//upload.wikimedia.org/wikipedia/commons/8/8a/Circle_sheer_blue_29.gif" height="29" width="29"></a></div> </div> <div style="position:absolute; z-index:2; top: 50.2%; left: 10.0%; height: 0; width: 0; margin: 0; padding: 0;"> <div style="position: relative; text-align: center; left: -16px; top: -16px; width: 31px; font-size: 9px; line-height:0;"><a href="/https/en.wikipedia.org/wiki/File:Circle_sheer_blue_31.gif" class="image"><img alt="Circle sheer blue 31.gif" src="//upload.wikimedia.org/wikipedia/commons/2/2a/Circle_sheer_blue_31.gif" height="31" width="31"></a></div> </div> </div> <div style="font-size: 90%"><a href="/https/en.wikipedia.org/wiki/Cursive" title="Cursive">Cursive</a> script 'a' and capital 'A'</div> </div>
- note that the new version does not generate the empty div for the empty label, but is otherwise generally equivalent in terms of the generated html. I checked several IE and non-IE browsers and see no significant differences. Frietjes (talk) 21:25, 25 February 2013 (UTC)