feat: adding ea-font-issue page

src/index.tsx

@@ -25,6 +25,7 @@ import Error404 from './pages/error/404.mdx';
 import Header from './components/index/header/header';
 import Footer from './components/index/footer/footer';
 import Resume from './pages/resume/resume';
+import EAFontIssue from './pages/test/ea-font-issue/ea-font-issue.tsx';
 
 // App ---------------------------------------------------------------------------------------------
 ReactDOM.createRoot(document.getElementById('root')!).render(
@@ -69,6 +70,14 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
 							</div>
 						}
 					/>
+					<Route
+						path='/ea-font-issue'
+						element={
+							<div className='content' id='ea-font-issue'>
+								<EAFontIssue />
+							</div>
+						}
+					/>
 					<Route path='/*' element={<Error404 id='error-404' />} />
 				</Routes>
 				<Footer />

src/pages/test/ea-font-issue/ea-font-issue.scss

@@ -0,0 +1,54 @@
+@use 'src/styles/colors';
+
+@font-face {
+	font-family: 'ElectronicArtsTextOriginal';
+	src: url('ElectronicArtsText-RegularOriginal.otf');
+	font-style: normal;
+	font-weight: 400;
+}
+
+@font-face {
+	font-family: 'ElectronicArtsTextNew';
+	src: url('ElectronicArtsText-RegularNew.otf');
+	font-style: normal;
+	font-weight: 400;
+}
+
+#ea-font-issue-page {
+	.fonts {
+		margin-top: 2.5rem;
+
+		.table-scroll {
+			overflow-x: scroll;
+			padding-bottom: 1rem;
+
+			table {
+				width: 100%;
+				font-family: sans-serif;
+				text-align: center;
+				border-collapse: collapse;
+				border: 1px solid grey;
+
+				th {
+					background-color: grey;
+					color: colors.$background-primary;
+				}
+
+				th,
+				td {
+					border: 1px solid grey;
+					white-space: nowrap;
+					padding: 0.25rem 1rem;
+				}
+
+				tbody > tr > td:nth-child(2) {
+					font-family: ElectronicArtsTextOriginal !important;
+				}
+
+				tbody > tr > td:nth-child(3) {
+					font-family: ElectronicArtsTextNew !important;
+				}
+			}
+		}
+	}
+}

src/pages/test/ea-font-issue/ea-font-issue.tsx

@@ -0,0 +1,60 @@
+import './ea-font-issue.scss';
+
+export default function EAFontIssue() {
+	return (
+		<div id='ea-font-issue-page'>
+			<h2>EA Font Issue</h2>
+			<p>
+				The font 'ElectronicArtsText-Regular.otf' has lookup table rules that universally
+				replace instances of 1/2, 1/4, 3/4, and 0/0 with other ascii characters ½, ¼, ¾, and
+				% respectively, regardless of the context. This issue can be especially eggregious
+				when manifesting in dates.
+			</p>
+			<p>
+				Below is a table displaying how these character combos look in a baseline font
+				(sans-serif), the original 'ElectronicArtsText' font, and finally my updated/fixed
+				'ElectronicArtsText' font.
+			</p>
+			<div className='fonts'>
+				<div className='table-scroll'>
+					<table>
+						<thead>
+							<tr>
+								<th>Default Font</th>
+								<th>ElectronicArtsText (Original)</th>
+								<th>ElectronicArtsText (Fixed)</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr>
+								<td>1/2</td>
+								<td>1/2</td>
+								<td>1/2</td>
+							</tr>
+							<tr>
+								<td>1/4</td>
+								<td>1/4</td>
+								<td>1/4</td>
+							</tr>
+							<tr>
+								<td>3/4</td>
+								<td>3/4</td>
+								<td>3/4</td>
+							</tr>
+							<tr>
+								<td>0/0</td>
+								<td>0/0</td>
+								<td>0/0</td>
+							</tr>
+							<tr>
+								<td>01/2017</td>
+								<td>01/2017</td>
+								<td>01/2017</td>
+							</tr>
+						</tbody>
+					</table>
+				</div>
+			</div>
+		</div>
+	);
+}