Overleg sjabloon:Afbeelding label

Afwijking

Qua ontwerp laat je een reeks sjabloon:afbeelding_label voorafgaan door sjabloon:afbeelding_label_begin en eindigen met sjabloon:afbeelding_label_eind. Bij veel Amerikaanse plaatsen staat een roos met afstanden tot nabij gelegen plaatsen. Daarin is de reeks voorafgegaan door een <div style= en afgesloten met </div> zoals bij:

Plaatsen in de omgeving

Los Angeles

Beverly Hills (3 km)

Burbank (11 km)

Culver City (9 km)

Glendale (15 km)

Inglewood (15 km)

Ladera Heights (11 km)

Marina del Rey (14 km)

Santa Monica (12 km)

View Park-Windsor Hills (11 km)

West Hollywood (0 km)

De punt voor de stad Los Angeles zou in het centrum van de roos moeten staan. Als de <div style= en afgesloten met </div> worden vervangen door sjabloon:afbeelding_label_begin en sjabloon:afbeelding_label_eind zou nog steeds Los Angeles in het midden moeten staan:

Los Angeles

Beverly Hills (3 km)

Burbank (11 km)

Culver City (9 km)

Glendale (15 km)

Inglewood (15 km)

Ladera Heights (11 km)

Marina del Rey (14 km)

Santa Monica (12 km)

View Park-Windsor Hills (11 km)

West Hollywood (0 km)

Maar eerlijk gezegd zie ik de centrum dot nu twee keer uit het midden. Ad Huikeshoven (overleg) 7 jun 2017 18:37 (CEST)

ander plaatje

Met een ander plaatje waar een kruis het midden markeert, en er een punt bovenop komt. De roos (blank map.svg) is niet gecentreerd in het kader)

caption=500

Midden

Midden

Mogelijke oorzaak

(geredigeerd overgehaald van Overleg gebruiker:Ad Huikeshoven):

Ik denk te weten waardoor het probleem veroorzaakt wordt, al snap ik niet waarom het zich nu pas uit: in {{Afbeelding label}} worden de x- en y-coördinaten vermenigvuldigd met de opgegeven schaalfactor, waarna er absolute correcties van 6 respectievelijk 8 pixels gedaan worden. Richard 7 jun 2017 14:11 (CEST)

Richard in de versie op en.wp zit diezelfde absolute correctie van 6 resp 8. Ad Huikeshoven (overleg) 7 jun 2017 15:06 (CEST)

Dat kan natuurlijk, maar die absolute correctie zal volgens mij alleen precies goed uitkomen bij één specifieke grootte. Hoe groter de afbeelding, hoe minder het opvalt dat het 'midden' een stukje verschoven is.

50 

Midden

100 

Midden

250 

Midden

500 

Midden

1000 

Midden

Bij kleine(re) afbeelding is een pixel te hoog of te laag verhoudingsgewijs veel meer. Richard 7 jun 2017 15:17 (CEST)

Overigens komen ook alle andere punten niet helemaal op de goede plaats uit, maar daar valt het (in combinatie met bestand:Blank map.svg) minder op. Op een vierkant met symmetrieassen is het wel goed te zien:

Meer punten 

× 0,0

× ¼,0

× ½,0

× ¾,0

× 1,0

× 0,¼

× ¼,¼

× ½,¼

× ¾,¼

× 1,¼

× 0,½

× ¼,½

က ½,½

× ¾,½

× 1,½

× 0,¾

× ¼,¾

× ½,¾

× ¾,¾

× 1,¾

× 0,1

× ¼,1

× ½,1

× ¾,1

× 1,1

(ik heb hier een iets ander vierkant gebruikt, dat geen witte randen in de afbeelding heeft). Alle punten staan iets te ver naar links en iets te ver naar beneden, al is de afwijking niet overal even groot. Richard 8 jun 2017 09:48 (CEST)

eens kijken met een alternatief:

Meer punten 

× 0,0

× ¼,0

× ½,0

× ¾,0

× 1,0

× 0,¼

× ¼,¼

× ½,¼

× ¾,¼

× 1,¼

× 0,½

× ¼,½

က ½,½

× ¾,½

× 1,½

× 0,¾

× ¼,¾

× ½,¾

× ¾,¾

× 1,¾

× 0,1

× ¼,1

× ½,1

× ¾,1

× 1,1

Uiteraard gaat het fout met alle punten. De misplaatsing van het punt in het midden van de roos was het meest opvallend. In {{Afbeelding label/alternatief}} is het -6 en -8 eruit gehaald. Nu zie je dat de tekst op de absolute positie wordt getoond, dat wil zeggen de linkerbovenhoek van het tekstvak (de denkbeeldige rechthoek die de tekst omsluit) valt samen met het opgegeven punt. Ad Huikeshoven (overleg) 8 jun 2017 11:10 (CEST)

De correctie zou de helft van de hoogte van de tekst en de helft van de breedte van het eerste teken van de tekst moeten zijn. Ik heb de fontgrootte in het alternatief afgedwongen en de correcties daarop aangepast. Jouw laatste voorbeeld gaat nu goed. Dat geldt jammer genoeg niet voor

Met  

× 0,0

× ¼,0

× ½,0

× ¾,0

× 1,0

× 0,¼

× ¼,¼

× ½,¼

× ¾,¼

× 1,¼

× 0,½

× ¼,½

½,½

× ¾,½

× 1,½

× 0,¾

× ¼,¾

× ½,¾

× ¾,¾

× 1,¾

× 0,1

× ¼,1

× ½,1

× ¾,1

× 1,1

aangezien er in de 'text'-parameter dan ook niet-tekst voorkomt. Richard 8 jun 2017 13:31 (CEST)

Voorgestelde wijziging

Als ik naar dit sjabloon kijk, dan is de windroos de enige gebruikte positie waar centrering echt belangrijk is. Ik wil daarom voorstellen om het sjabloon aan te passen naar:

<div style="position: absolute; text-align: {{{text-align|center}}}; left:{{#expr: {{{x|0}}} * {{{scale|1}}} - 10}}px; top: {{#expr: {{{y|0}}} * {{{scale|1}}}}}px; transform: translateY(-50%); white-space: nowrap; z-index: 1;">{{{text}}}</div>

Idealiter zouden tekst en afbeelding gescheiden worden, zodat we de afbeelding apart kunnen centreren en de tekst er simpelweg naast kunnen gooien. Zonder afbeelding wordt de tekst verticaal gecentreerd en wordt het rechts van het opgegeven punt weergegeven. Met afbeelding wordt de afbeelding horizontaal en verticaal gecentreerd, ongeacht de grootte van de afbeelding, en de tekst gecentreerd naast de afbeelding weergegeven. We hebben dan wel een AWB scriptje nodig dat dit voor ons opsplitst.

<div style="position: absolute; text-align: {{{text-align|center}}}; left:{{#expr: {{{x|0}}} * {{{scale|1}}}}}px; top: {{#expr: {{{y|0}}} * {{{scale|1}}}}}px; white-space: nowrap; z-index: 1;"><div style="position: absolute; top: 0; left: 0; transform: translateX(-50%) translateY(-50%); z-index: 2;"><!-- Center this image -->{{{image|}}}<div style="white-space: nowrap; z-index:2; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);">{{#if:{{{image|}}}| |}}{{{text|}}}</div></div></div>

Sum^?urai8^? 24 aug 2019 11:05 (CEST)

z-index verwijderd

Ik heb zojuist in de CSS de z-index=1 verwijderd, omdat dit problemen gaf met de suggestie-functie van de tools voor nieuwe bewerkers. Dit is in WP:SHEIC kort besproken. --Frank Geerlings (overleg) 22 jan 2022 16:30 (CET)