Template talk:Routemap

Changes to BSsplit and BSto display

I have modified the display of {{BSsplit}} and {{BSto}} by using TemplateStyles to ensure that the font size is always the same for the templates when they are used within {{Routemap}}. This is accomplished by adding font-size: 90% to those cases where they are used in the main text cell.

The main result of this is presumably that visual gaps will no longer appear between rows in older diagrams that were constructed before the 2020 font size changes. I believe the templates still comply with the accessibility guidelines, as the smaller font size in both {{BSsplit}} and {{BSto}} is still 85.5% of the regular font size. Please let me know if I broke anything. Jc86035 (talk) 19:58, 26 February 2024 (UTC)

Thanks @Jc86035. Using BSsplit is broken in the mobile view. See Template:Kuala Lumpur–Singapore High Speed Rail for example. Is this something you are able to fix while you're at it? Screenshots: https://ibb.co/b58CHtw (desktop) https://ibb.co/y0CpmT4 (mobile). It feels like there's some CSS cell width inheritance issue in the mobile view, but that's beyond my understanding to try and fix. Thanks. - DCvibes529 ^talk 04:48, 1 March 2024 (UTC)

@DCvibes529: The reason that this occurs is that there are Minerva CSS rules that only come into effect when the window width is 720 px or less. I think width would have to be used with !important in the TemplateStyles stylesheet to override this.

@media all and (max-width:720px) {
  .content table {
    display:block;
    width:100% !important;
    box-sizing:border-box
  }
  (...)
}

Jc86035 (talk) 09:05, 1 March 2024 (UTC)

@DCvibes529: It should have been fixed, although that diagram in particular still doesn't look great on the mobile site because the uses of {{BSsplit}} are on adjacent rows and have overlapping text. It would help to redesign the diagram so that the text isn't so cramped. Jc86035 (talk) 09:54, 1 March 2024 (UTC)

Thank you, that's awesome! - DCvibes529 ^talk 17:29, 5 March 2024 (UTC)

@Jc86035 I'm not sure if this is related to the CSS changes that were done (I'm unable to use preview to test since I don't have edit rights on the template). The mobile view is now broken when used inside an infobox: https://ibb.co/NmYXHFC Example article here: http://en.m.wiki.x.io/wiki/Johor_Bahru%E2%80%93Singapore_Rapid_Transit_System Not sure exactly when it broke but it definitely did not have the horizontal gaps in the past. Is this something you're able to take a look and fix? Thanks - DCvibes529 ^talk 05:33, 18 April 2024 (UTC)

@Jc86035 Another clue from the Yellow Line (BART) page, it appears there are thick borders around the icons now: https://ibb.co/YdkLtrx - DCvibes529 ^talk 05:41, 18 April 2024 (UTC)

@DCvibes529: This appears to have happened due to changes to the mobile CSS for infoboxes. I'll use !important to make the selectors in the {{Routemap}} CSS override the CSS for infoboxes. Jc86035 (talk) 15:59, 11 May 2024 (UTC)

Looks great now. Thanks! - DCvibes529 ^talk 14:31, 12 May 2024 (UTC)

Horizontal/rotated text alignment

Test
one one two three one two three four five one two three four five six seven one two one two three four one two three four five six one two three four five six seven eight

Hello, how would I go about aligning text cells in icon rows so that they align properly with icons? Longer text tends to go askew (first example), but works for short text (second example).

Test
1 3 5 7 2 4 6 8

Beeperbeeper5 (talk) 13:11, 7 June 2024 (UTC)

Will using "align" as per Template:Routemap help? - DCvibes529 ^talk 07:08, 11 June 2024 (UTC)

Template-protected edit request on 28 August 2024

Special:Diff/1242768726/1242768909

Fixes [1]. Andumé (talk) 17:00, 28 August 2024 (UTC)

@I Am Andumé I think more work needs to be done before we can switch the background to black. Looking at Template:Routemap/testcases#In_infobox in dark mode, unliked text is almost unreadable (such as all the text in the first box and the word "to" or "Tai Wai Depot (Ma On Shan Line)" in the second box). The gradient as shown at Victoria Harbor would also need to be reworked so it fades to transparent instead of white. --Ahecht (TALK
PAGE) 18:16, 17 September 2024 (UTC)

 Not done for now: See #Dark mode problems below. --Ahecht (TALK
PAGE) 18:26, 17 September 2024 (UTC)

Symbols

Where can I find which code produces which symbols? Criticalthinker (talk) 04:10, 30 August 2024 (UTC)

@Criticalthinker: As noted in the documentation, for a tabulated list of many of the pictograms available for railway routemaps, see commons:BSicon/Catalogue. --Redrose64 🌹 (talk) 07:49, 30 August 2024 (UTC)

I am thoroughly confused by Template:South Shore Line. What is "BScvt"? I'm also trying to show a grade crossing with the Michigan Line in between Willard Avenue and 11th Street, but can't figure out how to do it for the life of me. Criticalthinker (talk) 11:08, 30 August 2024 (UTC)

"BScvt" is {{BScvt}}. The two braces on either side mean that it is a template. If you edit the template and then fold down "Pages transcluded onto the current version of this page", you will see the templates and modules that are used on the page. As for the grade crossing, asking on the template's talk page as you did will probably work. – Jonesey95 (talk) 13:26, 30 August 2024 (UTC)

"fold down "Pages transcluded onto the current version of this page" Excuse me, what? Edit which template? I do not see this option anywhere. Criticalthinker (talk) 00:02, 31 August 2024 (UTC)

When you are editing Template:South Shore Line, look directly below the "Publish changes" button for "Pages transcluded onto the current version of this page". You should see a little gray triangle to the left of that text. If you click it once, it will reveal a list of the templates and modules that are used on that page. One of them is Template:BScvt. You can click on that template's name to see an explanation of what that template is and how it can be used. – Jonesey95 (talk) 00:18, 31 August 2024 (UTC)

Dark mode problems

@Jonesey95, Jdlrobson, and TheDJ: Thanks for your recent edits to Template:Routemap/styles.css addressing dark mode problems. Unfortunately, there are still some issues, and I'm wondering if the solution of forcing a white background is the right one. To be clear what I'm seeing, I edit in dark mode, and when I look at Greenbush Line, the route map in the infobox has a white background, but some of the text (like "lines via") is unreadable because it is still using the dark mode text color (which is light grey). Looking at Template:Greenbush Line, I see a black background, but some of the text (namely the distances in mi and km) is unreadable because it's being forced to black by the .RMsplit block.

Given the dark mode version with black background is mostly OK, I'm wondering if we can't do the thing most friendly to dark mode users, and start letting railroad diagrams on articles display with a black background? We should be able to fix the text issues. Are there any issues with icons or anything that would cause problems if we go in that direction? I'm not even sure where the CSS is that is forcing the white background, so I can't test changing that. Thanks! -- Beland (talk) 18:50, 9 September 2024 (UTC)

I reached the limit of my technical skill in making a few small changes. I tried a few others, but they didn't work for me. I will defer to others. – Jonesey95 (talk) 00:43, 10 September 2024 (UTC)

I cant look at this until oct 3rd as my userpage mentions —TheDJ (talk • contribs) 14:20, 12 September 2024 (UTC)

In addition to unlinked text, icons such as woulnd't work on a black background, and the gradient as seen at Victoria Harbour in Template:Routemap/testcases#In_infobox would need to fade to transparent instead of fading to white. The hard blue arrows in that diagram aren't particularly readable against a black background either. --Ahecht (TALK
PAGE) 18:29, 17 September 2024 (UTC)

-collapsible formatting

Is there a way to have a -collapsible section default to expanded? Useddenim (talk) 14:39, 11 September 2024 (UTC)

It looks like -startCollapsible-nil works. See my sandbox for examples. – Jonesey95 (talk) 17:05, 11 September 2024 (UTC)

Thank you! Useddenim (talk) 13:47, 12 September 2024 (UTC)

Routemaps accessibility

Currently, route maps are not accessible to blind people. However, it would likely be a complex task to make them accessible. After typing this, I'm going to add {{accessibility dispute}} to the Routemap template, and hopefully we will get some discussion going on the best ways, or at least feasible ways, to improve the situation.

Issues:

• Icons in the route map do not have alternative text. For example, the BHF icon for a major station, <img alt="" src="//up.wiki.x.io/wikipedia/commons/thumb/7/76/BSicon_BHF.svg/20px-BSicon_BHF.svg.png" decoding="async" width="20" height="20" class="mw-file-element" srcset="//up.wiki.x.io/wikipedia/commons/thumb/7/76/BSicon_BHF.svg/30px-BSicon_BHF.svg.png 1.5x, //up.wiki.x.io/wikipedia/commons/thumb/7/76/BSicon_BHF.svg/40px-BSicon_BHF.svg.png 2x" data-file-width="500" data-file-height="500">, is missing alternative text reading "major station."
• Hovering the icon shows "BHF." While this may be helpful to editors trying to copy other's work, it is confusing to readers. It makes sense as a hover when editing a page but not when a random site visitor is visiting. When view a page in Read mode, it would be better for the hover to show "Major station."
• However, hover is either difficult or impossible to do on a touch screen. It's also tedious to have to do it for each icon.
• Also, for route maps with two or three columns of route line and text on both sides, it can be difficult to associate the alt text with the visible text.
• Further, sometimes the lines are actually parallel and sometimes they are going in different directions, only forced to be side by side by the routemap construction method.
• There may be icons with less than a 3:1 contrast with the background.

Possible solutions:

• Add alternative text to the icons.
• Show the tooltips in plain English in read mode, code name in edit mode.
• Add an automatically-generated collapsible section at the bottom of the map which reveals a text-only version. We still need to figure out how to handle parallel maps so they will make sense to someone using a screen reader.
• Add the ability to add a collapseable section at the bottom containing an editor-crafted equivalent table.
• Examine the icon catalog and improve contrast on problematic icons.

Thisisnotatest (talk) 04:25, 25 October 2024 (UTC)

Add city border between stops?

Line 15
Keilaniemi Otaranta Aalto-yliopisto Maari Lahdenpohja Laajalahti Linnoitustie Alberganesplanadi Leppävaara station Perkkaa Vermo Ravitie Talin siirt.puutarha Takomotie Kutomotie Vihdintie Huopalahti station Ilkantie Hämeenlinnanväylä Pirkkola Pirjontie Maunula Kustaankartano Teininpuisto Oulunkylän keskusta Oulunkylä station Veräjämäki Viikinmäki Viikin tiedepuisto Latokartano Karhukallio Kauppamyllyntie Roihupelto Itäkeskus

Is it possible to add some sort of symbol for a city border between two stops? Attached here is a copy-paste of the line 15 in the article Trams in Helsinki. I'd like to add a city border between the stops "Ravitie" and "Talin siirt.puutarha". Is this possible? JIP | Talk 15:03, 27 October 2024 (UTC)

The dark arts of {{routemap}} are a mystery to me but what you want does seem possible, see {{Oxford area RDT}}. Maybe you can raid it? --𝕁𝕄𝔽 (talk) 15:26, 27 October 2024 (UTC)

Template:Oxford area RDT (which is one of mine) draws the boundary using icons selected from those in c:Category:BSicon/hub, overlaid on regular icons for stations, junctions, etc. --Redrose64 🌹 (talk) 23:01, 27 October 2024 (UTC)

I've updated the template to show one possible technique for doing this. Mackensen (talk) 15:28, 27 October 2024 (UTC)