Show time in monospace

base.css

@@ -255,6 +255,12 @@ body {
 	font-family: -apple-system, BlinkMacSystemFont, Ubuntu, 'Segoe UI', 'Roboto', Sans-Serif, sans-serif;
 }
 
+pre {
+	margin: 0;
+	display: inline;
+	font-family: 'Martian Mono', Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
+}
+
 .tabs {
 	display: flex;
 	flex-direction: row;

view-station.js

@@ -39,7 +39,9 @@ function onStationData(data) {
 			var timeDiv = document.createElement('p')
 			trainItem.appendChild(timeDiv)
 			timeDiv.classList.add('pri', 'time')
-			timeDiv.textContent = new Date(train.time).toLocaleTimeString([], { 'hour': '2-digit', 'minute': '2-digit' })
+			var timeDivPre = document.createElement('pre')
+			timeDiv.appendChild(timeDivPre)
+			timeDivPre.textContent = new Date(train.time).toLocaleTimeString([], { 'hour': '2-digit', 'minute': '2-digit' })
 
 			if (train.status && train.status.delay != 0) {
 				var delayDiv = document.createElement('p')
@@ -61,20 +63,24 @@ function onStationData(data) {
 
 			var rankDiv = document.createElement('p')
 			trainItem.appendChild(rankDiv)
-			rankDiv.textContent = train.train.rank
 			rankDiv.classList.add('sec', 'rank', train.train.rank)
+			var rankDivPre = document.createElement('pre')
+			rankDiv.appendChild(rankDivPre)
+			rankDivPre.textContent = train.train.rank
 
 			var trainDiv = document.createElement('p')
 			trainItem.appendChild(trainDiv)
 			trainDiv.classList.add('pri', 'train')
 			var trainDivHref = document.createElement('a')
 			trainDiv.appendChild(trainDivHref)
-			trainDivHref.textContent = train.train.number
 			trainDivHref.classList.add('no-a-custom')
 			var trainUrl = new URL('/view-train.html', window.location.origin)
 			trainUrl.searchParams.append('train', train.train.number)
 			trainUrl.searchParams.append('date', train.train.departureDate)
 			trainDivHref.href = trainUrl.toString()
+			var trainDivHrefPre = document.createElement('pre')
+			trainDivHref.appendChild(trainDivHrefPre)
+			trainDivHrefPre.textContent = train.train.number
 
 			var terminusDiv = document.createElement('p')
 			trainItem.appendChild(terminusDiv)
@@ -85,7 +91,9 @@ function onStationData(data) {
 				var platformDiv = document.createElement('div')
 				trainItem.appendChild(platformDiv)
 				platformDiv.classList.add('thi', 'platform')
-				platformDiv.textContent = train.status.platform
+				var platformDivPre = document.createElement('pre')
+				platformDiv.appendChild(platformDivPre)
+				platformDivPre.textContent = train.status.platform
 			}
 
 			if (train.status && train.status.cancelled) {

view-train.js

@@ -285,7 +285,7 @@ function onTrainData(data, fetchDate) {
 
 			var originalArr = document.createElement('p')
 			stationArrival.appendChild(originalArr)
-			var originalArrSpan = document.createElement('span')
+			var originalArrSpan = document.createElement('pre')
 			originalArr.appendChild(originalArrSpan)
 			var arrDate = new Date(station.arrival.scheduleTime)
 			originalArrSpan.textContent = arrDate.toLocaleTimeString([], { 'hour': '2-digit', 'minute': '2-digit' })
@@ -303,11 +303,13 @@ function onTrainData(data, fetchDate) {
 				var actualArr = document.createElement('p')
 				stationArrival.appendChild(actualArr)
 				arrDate.setMinutes(arrDate.getMinutes() + station.arrival.status.delay)
-                actualArr.textContent = arrDate.toLocaleTimeString([], { 'hour': '2-digit', 'minute': '2-digit' })
 				actualArr.classList.add('pri', station.arrival.status.delay > 0 ? 'late' : 'early')
 				if (!station.arrival.status.real) {
 					actualArr.classList.add('not-real')
 				}
+				var actualArrPre = document.createElement('pre')
+				actualArr.appendChild(actualArrPre)
+                actualArrPre.textContent = arrDate.toLocaleTimeString([], { 'hour': '2-digit', 'minute': '2-digit' })
 			}
 		}
 
@@ -319,7 +321,7 @@ function onTrainData(data, fetchDate) {
 			var originalDep = document.createElement('p')
 			stationDeparture.appendChild(originalDep)
 			var depDate = new Date(station.departure.scheduleTime)
-			var originalDepSpan = document.createElement('span')
+			var originalDepSpan = document.createElement('pre')
 			originalDep.appendChild(originalDepSpan)
 			originalDepSpan.textContent = depDate.toLocaleTimeString([], { 'hour': '2-digit', 'minute': '2-digit' })
 			originalDep.classList.add('pri')
@@ -336,11 +338,13 @@ function onTrainData(data, fetchDate) {
 				var actualDep = document.createElement('p')
 				stationDeparture.appendChild(actualDep)
 				depDate.setMinutes(depDate.getMinutes() + station.departure.status.delay)
-                actualDep.textContent = depDate.toLocaleTimeString([], { 'hour': '2-digit', 'minute': '2-digit' })
 				actualDep.classList.add('pri', station.departure.status.delay > 0 ? 'late' : 'early')
 				if (!station.departure.status.real) {
 					actualDep.classList.add('not-real')
 				}
+				var actualDepPre = document.createElement('pre')
+				actualDep.appendChild(actualDepPre)
+                actualDepPre.textContent = depDate.toLocaleTimeString([], { 'hour': '2-digit', 'minute': '2-digit' })
 			}
 		}