Skip to content

[doc] A matrix CSS style for matrices in docs #496

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
alugowski opened this issue Aug 29, 2023 · 2 comments · Fixed by #502
Closed

[doc] A matrix CSS style for matrices in docs #496

alugowski opened this issue Aug 29, 2023 · 2 comments · Fixed by #502

Comments

@alugowski
Copy link
Contributor

I think the docs would be both easier to understand and nicer to look at by styling the matrices a bit more.

The matrices appear to be tables using the 'inline' class, this may be as simple as applying a CSS style. Below is the one I wrote for matrepr. AFAIK you just have to copy it to the CSS file in the statics directory then just select the class. This style was written for Jupyter so may or may not be a drop-in for Sphinx.

table.matreprmatrix  {
    border-collapse: collapse;
}
/* remove thin black line under Jupyter table headers */
table.matreprmatrix > thead  {
    border: 0px;
}
/* row indices */
table.matreprmatrix > tbody tr th {
    font-size: smaller;
    vertical-align: middle;
    text-align: right;
}
/* col indices */
table.matreprmatrix > thead tr th {
    font-size: smaller;
    vertical-align: middle;
    text-align: center;
}
/* cells */
table.matreprmatrix > tbody tr td {
    vertical-align: middle;
    text-align: center;
    position: relative;
}
/* left border */
table.matreprmatrix > tbody tr td:first-of-type {
    border-left: solid 2px;
}
/* right border */
table.matreprmatrix > tbody tr td:last-of-type {
    border-right: solid 2px;
}
/* prevents empty cells from collapsing, especially empty rows */
table.matreprmatrix > tbody tr td:empty::before {
    content: "\00a0\00a0\00a0";
    visibility: hidden;
}
table.matreprmatrix > tbody tr td:empty::after {
    content: "\00a0\00a0\00a0";
    visibility: hidden;
}
/* matrix bracket ticks */
table.matreprmatrix > tbody > tr:first-child > td:first-of-type::before {
    content: "";
    width: 4px;
    position: absolute;
    top: 0;
    bottom: 0;
    visibility: visible;
    left: 0;
    right: auto;
    border-top: solid 2px;
}
table.matreprmatrix > tbody > tr:last-child > td:first-of-type::before {
    content: "";
    width: 4px;
    position: absolute;
    top: 0;
    bottom: 0;
    visibility: visible;
    left: 0;
    right: auto;
    border-bottom: solid 2px;
}
table.matreprmatrix > tbody > tr:first-child > td:last-of-type::after {
    content: "";
    width: 4px;
    position: absolute;
    top: 0;
    bottom: 0;
    visibility: visible;
    left: auto;
    right: 0;
    border-top: solid 2px;
}
table.matreprmatrix > tbody > tr:last-child > td:last-of-type::after {
    content: "";
    width: 4px;
    position: absolute;
    top: 0;
    bottom: 0;
    visibility: visible;
    left: auto;
    right: 0;
    border-bottom: solid 2px;
}
@eriknw
Copy link
Member

eriknw commented Sep 5, 2023

Thanks for sharing!

I'm still pretty terrible at CSS, but I like prettier things :)

@alugowski alugowski mentioned this issue Sep 7, 2023
Merged
@alugowski
Copy link
Contributor Author

I'm still pretty terrible at CSS

Oh me too :) Some of those styles took an embarrassingly long time to figure out :) At least fitting it into Sphinx wasn't bad.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

DOC: add a matrix style alugowski/python-graphblas
2 participants
@eriknw @alugowski