Overleg sjabloon:Afbeelding label

Pagina-inhoud wordt niet ondersteund in andere talen.
Onderwerp toevoegen
Uit Wikipedia, de vrije encyclopedie
Laatste reactie: 2 jaar geleden door Frank Geerlings in het onderwerp z-index verwijderd

Afwijking[brontekst bewerken]

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
Plaatsen in de omgeving
Los Angeles
Los Angeles
Plaats met 33784 inwoners (2000). Beverly Hills (3 km)
Plaats met 100316 inwoners (2000). Burbank (11 km)
Plaats met 38816 inwoners (2000). Culver City (9 km)
Plaats met 194973 inwoners (2000). Glendale (15 km)
Plaats met 112580 inwoners (2000). Inglewood (15 km)
Plaats met 6568 inwoners (2000). Ladera Heights (11 km)
Plaats met 8176 inwoners (2000). Marina del Rey (14 km)
Plaats met 84084 inwoners (2000). Santa Monica (12 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
Los Angeles
Plaats met 33784 inwoners (2000). Beverly Hills (3 km)
Plaats met 100316 inwoners (2000). Burbank (11 km)
Plaats met 38816 inwoners (2000). Culver City (9 km)
Plaats met 194973 inwoners (2000). Glendale (15 km)
Plaats met 112580 inwoners (2000). Inglewood (15 km)
Plaats met 6568 inwoners (2000). Ladera Heights (11 km)
Plaats met 8176 inwoners (2000). Marina del Rey (14 km)
Plaats met 84084 inwoners (2000). Santa Monica (12 km)

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

ander plaatje[brontekst bewerken]

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
caption=500
MiddelMidden
MiddelMidden

Mogelijke oorzaak[brontekst bewerken]

(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)Reageren

Richard in de versie op en.wp zit diezelfde absolute correctie van 6 resp 8. Ad Huikeshoven (overleg) 7 jun 2017 15:06 (CEST)Reageren
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 
MiddelMidden
100 
MiddelMidden
250 
MiddelMidden
500 
MiddelMidden
1000 
MiddelMidden
Bij kleine(re) afbeelding is een pixel te hoog of te laag verhoudingsgewijs veel meer. Richard 7 jun 2017 15:17 (CEST)Reageren

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)Reageren
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)Reageren
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)Reageren

Voorgestelde wijziging[brontekst bewerken]

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)Reageren

z-index verwijderd[brontekst bewerken]

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)Reageren