Issue
I have a numbered list inside of a table with monospace font and numbers in numbered list are off to the left. It seems to happen only for monospace fonts. Is there a way to make it appear on the same level as bullets on bullet list?
Simplest repro:
ol {
font-family: monospace;
}
ul,
ol {
margin-top: 10px;
margin-bottom: 0;
padding: 0 0 0 1.4em;
font-size: 15px;
line-height: 24px;
list-style: none;
}
ol {
list-style-type: decimal;
}
ul {
list-style: disc;
}
table {
font-family: monospace;
width: 100%;
table-layout: fixed;
border-spacing: 0;
border-collapse: collapse;
td {
position: relative;
min-width: 137px;
padding: 7px 6px;
border: 1px solid #ccc;
line-height: 20px;
}
}
<div contenteditable="true">
<ol>
<li>Hello</li>
<li>World</li>
</ol>
<ul>
<li>Hello</li>
<li>World</li>
</ul>
<table>
<tr>
<td>
<ol>
<li>Hello</li>
<li>World</li>
</ol>
<ul>
<li>Hello</li>
<li>World</li>
</ul>
</td>
<td>Another cell</td>
</tr>
</table>
</div>
Solution
We can create a custom counter-style
that removes the trailing space that the default counter-style: numeric
has.
ul,
ol {
margin-top: 10px;
margin-bottom: 0;
padding: 0 0 0 1.4em;
font-size: 15px;
line-height: 24px;
list-style: none;
}
ol {
list-style-type: custom-style;
}
ul {
list-style: disc;
}
table {
font-family: monospace;
width: 100%;
table-layout: fixed;
border-spacing: 0;
border-collapse: collapse;
td {
position: relative;
min-width: 137px;
padding: 7px 6px;
border: 1px solid #ccc;
line-height: 20px;
}
}
@counter-style custom-style {
/* These lines just basically replicate the `counter-style: numeric` */
system: numeric;
symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
/* This is what goes after the number */
suffix: ".";
/* You can imagine the default `numeric` style as */
/* suffix: ". "; */
}
<div contenteditable="true">
<table>
<tr>
<td>
<ol>
<li>Hello</li>
<li>World</li>
</ol>
<ul>
<li>Hello</li>
<li>World</li>
</ul>
</td>
<td>Another cell</td>
</tr>
</table>
</div>
Other options that produce slightly different results:
Option 1: Add space to the right of the bullet manually
The idea is to make all of the list styles have the same length of prefix since that will align them when they have monospaced font.
ul,
ol {
margin-top: 10px;
margin-bottom: 0;
padding: 0 0 0 1.4em;
font-size: 15px;
line-height: 24px;
list-style: none;
}
ol {
list-style-type: decimal;
}
ul {
list-style: custom-style;
}
table {
font-family: monospace;
width: 100%;
table-layout: fixed;
border-spacing: 0;
border-collapse: collapse;
td {
position: relative;
min-width: 137px;
padding: 7px 6px;
border: 1px solid #ccc;
line-height: 20px;
}
}
@counter-style custom-style {
system: cyclic;
symbols: "•";
suffix: " ";
}
<div contenteditable="true">
<table>
<tr>
<td>
<ol>
<li>Hello</li>
<li>World</li>
</ol>
<ul>
<li>Hello</li>
<li>World</li>
</ul>
</td>
<td>Another cell</td>
</tr>
</table>
</div>
Option 2: Make only the items monospaced (not the bullets)
This makes the list-style
(::marker
) parts of the elements look the same as they did in your first non-monospaced example.
ul,
ol {
margin-top: 10px;
margin-bottom: 0;
padding: 0 0 0 1.4em;
font-size: 15px;
line-height: 24px;
list-style: none;
}
ol {
list-style-type: decimal;
}
ul {
list-style-type: disc;
}
table {
width: 100%;
table-layout: fixed;
border-spacing: 0;
border-collapse: collapse;
td {
position: relative;
min-width: 137px;
padding: 7px 6px;
border: 1px solid #ccc;
line-height: 20px;
}
}
span {
font-family: monospace;
}
<div contenteditable="true">
<table>
<tr>
<td>
<ol>
<li><span>Hello</span></li>
<li><span>World</span></li>
</ol>
<ul>
<li><span>Hello</span></li>
<li><span>World</span></li>
</ul>
</td>
<td>Another cell</td>
</tr>
</table>
</div>
Option 3: Make list-style-position: inside
This makes the beginnings align but not the text itself.
ul,
ol {
margin-top: 10px;
margin-bottom: 0;
padding: 0 0 0 1.4em;
font-size: 15px;
line-height: 24px;
list-style: none;
list-style-position: inside;
}
ol {
list-style-type: decimal;
}
ul {
list-style-type: disc;
}
table {
font-family: monospace;
width: 100%;
table-layout: fixed;
border-spacing: 0;
border-collapse: collapse;
td {
position: relative;
min-width: 137px;
padding: 7px 6px;
border: 1px solid #ccc;
line-height: 20px;
}
}
<div contenteditable="true">
<table>
<tr>
<td>
<ol>
<li>Hello</li>
<li>World</li>
</ol>
<ul>
<li>Hello</li>
<li>World</li>
</ul>
</td>
<td>Another cell</td>
</tr>
</table>
</div>
Answered By - Zachiah
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.