1795 lines
57 KiB
HTML
1795 lines
57 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
||
|
||
<title>gender in data models | hello hello</title>
|
||
<meta name="description" content="Lee Cattarin... on the internet!">
|
||
<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
|
||
|
||
<meta property="og:title" content="gender in data models">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:description" content="Lee Cattarin... on the internet!">
|
||
<meta property="og:site_name" content="hello hello">
|
||
|
||
<meta property="og:image" content="/img/peony.jpg">
|
||
<meta property="og:image:alt" content="Image unrelated to post. A light pink peony in full bloom, close up.">
|
||
|
||
|
||
<meta name="generator" content="Eleventy v3.1.2">
|
||
|
||
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
|
||
<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
|
||
|
||
|
||
<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<style>.post-metadata {
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
margin: 1.5rem 0 .5rem;
|
||
}
|
||
|
||
.post-metadata p {
|
||
font-size: .9rem;
|
||
margin: 0;
|
||
}
|
||
|
||
.post-tags {
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
gap: .5rem;
|
||
list-style: none;
|
||
margin: 0;
|
||
}
|
||
|
||
.post-tags li {
|
||
margin: 0;
|
||
}
|
||
|
||
.post-tags li a {
|
||
text-decoration: none;
|
||
color: var(--color-teal);
|
||
padding: 0 .5rem;
|
||
border-radius: 1rem;
|
||
box-shadow: .15rem .15rem var(--color-shadow);
|
||
border: .08rem solid var(--color-teal);
|
||
line-height: 2;
|
||
/* Click animation handling */
|
||
position: relative;
|
||
top: 0;
|
||
left: 0;
|
||
transition: top .1s ease-in, left .1s ease-in;
|
||
}
|
||
|
||
.post-tags li a:focus-visible {
|
||
outline: none;
|
||
background-color: var(--color-teal);
|
||
color: var(--color-bg);
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
.post-tags li a:hover {
|
||
outline: none;
|
||
background-color: var(--color-teal);
|
||
color: var(--color-bg);
|
||
}
|
||
}
|
||
|
||
@media (forced-colors: active) {
|
||
.post-tags li a:focus-visible {
|
||
outline-offset: .08rem;
|
||
outline: .08rem solid;
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
.post-tags li a:hover {
|
||
outline-offset: .08rem;
|
||
outline: .08rem solid;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* Click animation */
|
||
.post-tags li a:active {
|
||
top: .1rem;
|
||
left: .1rem;
|
||
box-shadow: .05rem .05rem var(--color-shadow);
|
||
}
|
||
/* Adapted from PrismJS 1.30.0 Tomorrow Night theme
|
||
https://prismjs.com/download
|
||
*/
|
||
code,
|
||
pre,
|
||
code[class*=language-],
|
||
pre[class*=language-] {
|
||
font-family: var(--font-family-code);
|
||
background-color: var(--color-bg-alt);
|
||
font-size: .9rem;
|
||
text-shadow: 0 1px var(--color-shadow);
|
||
-moz-tab-size: 4;
|
||
-o-tab-size: 4;
|
||
tab-size: 4;
|
||
-webkit-hyphens: none;
|
||
-moz-hyphens: none;
|
||
-ms-hyphens: none;
|
||
hyphens: none;
|
||
}
|
||
|
||
pre,
|
||
pre[class*=language-] {
|
||
margin: 1rem 0;
|
||
padding: 1rem;
|
||
line-height: 1.5;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
overflow-wrap: break-word;
|
||
border-radius: .5rem;
|
||
overflow: auto;
|
||
}
|
||
|
||
:not(pre)>code,
|
||
:not(pre)>code[class*=language-] {
|
||
padding: .2rem;
|
||
border-radius: .25rem;
|
||
white-space: normal;
|
||
}
|
||
|
||
/* Selected text */
|
||
code ::-moz-selection,
|
||
code::-moz-selection,
|
||
pre ::-moz-selection,
|
||
pre::-moz-selection,
|
||
code[class*=language-] ::-moz-selection,
|
||
code[class*=language-]::-moz-selection,
|
||
pre[class*=language-] ::-moz-selection,
|
||
pre[class*=language-]::-moz-selection,
|
||
code ::selection,
|
||
code::selection,
|
||
pre ::selection,
|
||
pre::selection,
|
||
code[class*=language-] ::selection,
|
||
code[class*=language-]::selection,
|
||
pre[class*=language-] ::selection,
|
||
pre[class*=language-]::selection {
|
||
text-shadow: none;
|
||
background-color: var(--color-bg);
|
||
}
|
||
|
||
/* Syntax highlighting */
|
||
.token.namespace {
|
||
opacity: .7;
|
||
}
|
||
|
||
.token.bold,
|
||
.token.important {
|
||
font-weight:700
|
||
}
|
||
|
||
.token.italic {
|
||
font-style:italic
|
||
}
|
||
|
||
.token.block-comment,
|
||
.token.cdata,
|
||
.token.comment,
|
||
.token.doctype,
|
||
.token.prolog,
|
||
.token.punctuation {
|
||
color: var(--color-grey);
|
||
}
|
||
|
||
.token.attr-name,
|
||
.token.deleted,
|
||
.token.namespace,
|
||
.token.tag {
|
||
color: var(--color-red);
|
||
}
|
||
|
||
.token.boolean,
|
||
.token.function,
|
||
.token.number {
|
||
color: var(--color-orange);
|
||
}
|
||
|
||
.token.class-name,
|
||
.token.constant,
|
||
.token.property,
|
||
.token.symbol {
|
||
color: var(--color-yellow);
|
||
}
|
||
|
||
.token.attr-value,
|
||
.token.char,
|
||
.token.regex,
|
||
.token.string,
|
||
.token.variable,
|
||
.token.inserted {
|
||
color: var(--color-green);
|
||
}
|
||
|
||
.token.entity,
|
||
.token.operator,
|
||
.token.url,
|
||
.token.function-name {
|
||
color:var(--color-blue);
|
||
}
|
||
|
||
.token.atrule,
|
||
.token.builtin,
|
||
.token.important,
|
||
.token.keyword,
|
||
.token.selector {
|
||
color: var(--color-purple);
|
||
}
|
||
#postlist,
|
||
#taglist {
|
||
list-style: none;
|
||
}
|
||
|
||
#postlist, .post,
|
||
#taglist, .tag {
|
||
margin: 0;
|
||
}
|
||
|
||
/* Odd-numbered posts & tag layout/coloration */
|
||
.post:nth-child(odd) .postlink,
|
||
.tag:nth-child(odd) .taglink {
|
||
grid-template-areas:
|
||
'img h2'
|
||
'img info'
|
||
'img .';
|
||
grid-template-columns: 45% auto;;
|
||
--color-primary: var(--color-teal);
|
||
--color-accent: var(--color-pink);
|
||
}
|
||
|
||
/* Even-numbered posts & tags layout/coloration */
|
||
.post:nth-child(even) .postlink,
|
||
.tag:nth-child(even) .taglink {
|
||
grid-template-areas:
|
||
'h2 img'
|
||
'info img'
|
||
'. img';
|
||
grid-template-columns: auto 45%;
|
||
--color-primary: var(--color-pink);
|
||
--color-accent: var(--color-teal);
|
||
}
|
||
|
||
/* Layout for all posts on mobile */
|
||
@media (max-width: 650px) {
|
||
.post:nth-child(n) .postlink,
|
||
.tag:nth-child(n) .taglink {
|
||
grid-template-areas:
|
||
'img'
|
||
'h2'
|
||
'info';
|
||
grid-template-columns: auto;
|
||
}
|
||
}
|
||
|
||
/* Link */
|
||
.postlink,
|
||
.taglink {
|
||
display: grid;
|
||
border: .25rem solid var(--color-primary);
|
||
border-radius: 1.25rem;
|
||
box-shadow: .35rem .35rem var(--color-shadow);
|
||
margin: 2rem 0;
|
||
text-decoration: none;
|
||
/* Click animation handling */
|
||
position: relative;
|
||
top: 0;
|
||
left: 0;
|
||
transition: top .05s ease-in, left .05s ease-in;
|
||
}
|
||
|
||
.postlink:focus-visible,
|
||
.taglink:focus-visible {
|
||
background-color: var(--color-primary);
|
||
outline: none;
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
.postlink:hover,
|
||
.taglink:hover {
|
||
background-color: var(--color-primary);
|
||
}
|
||
}
|
||
|
||
/* Forced colors */
|
||
@media (forced-colors: active) {
|
||
.postlink:focus-visible,
|
||
.taglink:focus-visible {
|
||
outline-offset: .25rem;
|
||
outline: .25rem solid;
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
.postlink:hover,
|
||
.taglink:hover {
|
||
outline-offset: .25rem;
|
||
outline: .25rem solid;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* Click animation */
|
||
.postlink:active,
|
||
.taglink:active {
|
||
box-shadow: none;
|
||
top: .2rem;
|
||
left: .2rem;
|
||
box-shadow: .15rem .15rem var(--color-shadow);
|
||
}
|
||
|
||
/* Post & tag elements */
|
||
.post h2, .post img,
|
||
.post ul, .post li,
|
||
.tag h2, .tag p,
|
||
.tag img {
|
||
margin: 0;
|
||
}
|
||
|
||
.post h2,
|
||
.tag h2 {
|
||
grid-area: h2;
|
||
padding: .25rem .5rem;
|
||
text-transform: uppercase;
|
||
font-size: 1.5rem;
|
||
color: var(--color-primary);
|
||
border-radius: 1rem 1rem 0 0;
|
||
border-bottom: .25rem solid var(--color-accent);
|
||
}
|
||
|
||
.post:nth-child(even) h2,
|
||
.tag:nth-child(even) h2 {
|
||
text-align: right;
|
||
}
|
||
|
||
.postlink:focus-visible h2,
|
||
.taglink:focus-visible h2 {
|
||
color: var(--color-bg);
|
||
border-color: var(--color-bg);
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
.postlink:hover h2,
|
||
.taglink:hover h2 {
|
||
color: var(--color-bg);
|
||
border-color: var(--color-bg);
|
||
}
|
||
}
|
||
|
||
/* Images */
|
||
.post img,
|
||
.tag-imgs {
|
||
grid-area: img;
|
||
}
|
||
|
||
.tag-imgs {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: .15rem;
|
||
}
|
||
|
||
.tag-imgs img {
|
||
aspect-ratio: 3 / 2;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.missing-image {
|
||
width: 100%;
|
||
aspect-ratio: 3 / 2;
|
||
background-color: var(--color-bg-alt);
|
||
border-radius: calc(1rem);
|
||
}
|
||
|
||
.taglink:focus-visible .missing-image {
|
||
opacity: .7;
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
.taglink:hover .missing-image {
|
||
opacity: .7;
|
||
}
|
||
}
|
||
|
||
/* Post tags */
|
||
.postlist-tags {
|
||
grid-area: info;
|
||
list-style: none;
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
gap: .5rem;
|
||
padding: .5rem;
|
||
}
|
||
|
||
.post:nth-child(odd) .postlist-tags {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.postlist-tags li,
|
||
.tagcount {
|
||
background-color: var(--color-primary);
|
||
color: var(--color-bg);
|
||
padding: 0 .5rem;
|
||
border-radius: 1rem;
|
||
}
|
||
|
||
.postlink:focus-visible .postlist-tags li,
|
||
.taglink:focus-visible .tagcount {
|
||
background-color: var(--color-bg);
|
||
color: var(--color-primary);
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
.postlink:hover .postlist-tags li,
|
||
.taglink:hover .tagcount {
|
||
background-color: var(--color-bg);
|
||
color: var(--color-primary);
|
||
}
|
||
}
|
||
|
||
/* Tag count */
|
||
.tag p {
|
||
grid-area: info;
|
||
padding: .5rem;
|
||
}
|
||
|
||
.tag:nth-child(odd) p {
|
||
text-align: right;
|
||
}
|
||
:root {
|
||
color-scheme: light dark;
|
||
|
||
--font-family: 'Atkinson Hyperlegible Next', sans-serif;
|
||
--font-family-code: 'Atkinson Hyperlegible Mono', monospace;
|
||
|
||
--color-dark: #2e303e;
|
||
--color-dark-alt: #3c3f52;
|
||
--color-light: #ebeeef;
|
||
--color-light-alt: #dbe1e3;
|
||
|
||
--color-teal-dark: #18737b;
|
||
--color-teal-light: #25b0bc;
|
||
--color-pink-dark: #94195d;
|
||
--color-pink-light: #ee9fcb;
|
||
|
||
--color-shadow: rgba(2, 10, 40, .25);
|
||
|
||
/* Used for syntax highlighting */
|
||
--color-red-light: #f195aa;
|
||
--color-orange-light: #fab795;
|
||
--color-yellow-light: #fbe6bc;
|
||
--color-green-light: #29d398;
|
||
--color-blue-light: #26bbd9;
|
||
--color-purple-light: #ddaeea;
|
||
--color-grey-light: #b9c3c6;
|
||
|
||
--color-red-dark: #991433;
|
||
--color-orange-dark: #883206;
|
||
--color-yellow-dark: #6a4906;
|
||
--color-green-dark: #125940;
|
||
--color-blue-dark: #125663;
|
||
--color-purple-dark: #722999;
|
||
--color-grey-dark: #4a4b64;
|
||
|
||
--color-text: light-dark(var(--color-dark), var(--color-light));
|
||
--color-bg: light-dark(var(--color-light), var(--color-dark));
|
||
|
||
--color-text-alt: light-dark(var(--color-dark-alt), var(--color-light-alt));
|
||
--color-bg-alt: light-dark(var(--color-light-alt), var(--color-dark-alt));
|
||
|
||
--color-teal: light-dark(var(--color-teal-dark), var(--color-teal-light));
|
||
--color-pink: light-dark(var(--color-pink-dark), var(--color-pink-light));
|
||
|
||
--color-red: light-dark(var(--color-red-dark), var(--color-red-light));
|
||
--color-orange: light-dark(var(--color-orange-dark), var(--color-orange-light));
|
||
--color-yellow: light-dark(var(--color-yellow-dark), var(--color-yellow-light));
|
||
--color-green: light-dark(var(--color-green-dark), var(--color-green-light));
|
||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||
}
|
||
|
||
/* Base */
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
body {
|
||
font-family: var(--font-family);
|
||
color: var(--color-text);
|
||
background-color: var(--color-bg);
|
||
}
|
||
|
||
main {
|
||
width: 60vw;
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
scroll-margin-top: 7rem;
|
||
}
|
||
|
||
@media (max-width: 1050px) {
|
||
main {
|
||
width: 75vw;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 650px) {
|
||
main {
|
||
width: 92vw;
|
||
}
|
||
}
|
||
|
||
/* Headers */
|
||
h1, h2, h3, h4, h5, h6 {
|
||
line-height: 1.25;
|
||
color: var(--color-teal);
|
||
}
|
||
|
||
h1 {
|
||
margin-top: 3rem;
|
||
font-size: 3.5rem;
|
||
text-align: center;
|
||
}
|
||
|
||
h2, h3, h4, h5, h6 {
|
||
scroll-margin-top: 5rem;
|
||
}
|
||
|
||
h2 {
|
||
margin-top: 2rem;
|
||
font-size: 2.2rem;
|
||
}
|
||
|
||
h3 {
|
||
margin-top: 1.5rem;
|
||
font-size: 1.6rem;
|
||
}
|
||
|
||
@media (max-width: 650px) {
|
||
h1 { font-size: 2.8rem; }
|
||
h2 { font-size: 1.8rem; }
|
||
h3 { font-size: 1.35rem; }
|
||
}
|
||
|
||
h4, h5, h6 {
|
||
margin-top: 1rem;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
/* Images */
|
||
img {
|
||
display: block;
|
||
max-width: 100%;
|
||
height: auto;
|
||
border-radius: 1rem;
|
||
}
|
||
|
||
/* Paragraphs */
|
||
p {
|
||
margin: 1.25rem 0;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
strong,
|
||
b {
|
||
font-weight: 900;
|
||
}
|
||
|
||
/* Links */
|
||
a {
|
||
color: var(--color-text);
|
||
border-radius: .25rem;
|
||
text-decoration: underline;
|
||
text-decoration-style: solid;
|
||
text-decoration-thickness: .2em;
|
||
text-decoration-color: var(--color-teal);
|
||
transition: text-decoration-thickness .5s;
|
||
}
|
||
|
||
a:focus-visible {
|
||
text-decoration: none;
|
||
outline: .15rem solid var(--color-teal);
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
a:hover {
|
||
text-decoration-thickness: .4em;
|
||
}
|
||
}
|
||
|
||
a:active {
|
||
text-decoration-thickness: .4em;
|
||
}
|
||
|
||
/* Heading anchors */
|
||
a.ha,
|
||
span.ha-placeholder {
|
||
color: var(--color-pink);
|
||
}
|
||
span.ha-placeholder {
|
||
opacity: .55;
|
||
}
|
||
|
||
|
||
/* Lists */
|
||
::marker {
|
||
color: var(--color-pink);
|
||
}
|
||
|
||
ul, ol, dl, li {
|
||
margin-left: 1rem;
|
||
}
|
||
|
||
li {
|
||
line-height: 1.2 5;
|
||
margin-top: .65rem;
|
||
margin-bottom: .65rem;
|
||
}
|
||
|
||
li ul, li ol {
|
||
margin: .5rem 0;
|
||
}
|
||
|
||
dt {
|
||
font-weight: 900;
|
||
margin-top: .5rem;
|
||
}
|
||
|
||
dd {
|
||
margin-left: 2rem;
|
||
margin-bottom: .75rem;
|
||
}
|
||
|
||
/* Blockquotes */
|
||
blockquote {
|
||
margin: .5rem 0;
|
||
padding: 0 1rem;
|
||
border-radius: .25rem 1rem 1rem .25rem;
|
||
line-height: 1.25;
|
||
border-left: .5rem solid var(--color-pink);
|
||
}
|
||
|
||
blockquote,
|
||
blockquote p,
|
||
blockquote ol,
|
||
blockquote ul {
|
||
background-color: var(--color-bg-alt);
|
||
padding: .5rem;
|
||
}
|
||
|
||
blockquote p {
|
||
margin: 0;
|
||
}
|
||
|
||
/* Tables */
|
||
table {
|
||
width: 100%;
|
||
border-spacing: 0; /* border collapse doesn't play nice with radii */
|
||
border-radius: .3rem;
|
||
border: thin solid var(--color-pink);
|
||
}
|
||
|
||
th {
|
||
color: var(--color-bg);
|
||
background-color: var(--color-pink);
|
||
}
|
||
|
||
th code {
|
||
color: var(--color-text); /* Yes, I actually do this somewhere */
|
||
}
|
||
|
||
th, td {
|
||
padding: .5rem;
|
||
text-align: left;
|
||
}
|
||
|
||
tr:nth-child(even) { background-color: var(--color-bg-alt); }
|
||
th:not(:first-child) { border-left: thin solid var(--color-bg); }
|
||
th:first-child { border-top-left-radius: .25rem; }
|
||
th:last-child { border-top-right-radius: .25rem; }
|
||
td:not(:first-child) { border-left: thin solid var(--color-pink); }
|
||
|
||
/* Times */
|
||
time {
|
||
color: var(--color-grey);
|
||
}
|
||
|
||
/* Horizontal rules */
|
||
hr {
|
||
border: .25rem solid var(--color-pink);
|
||
margin: 2rem 0;
|
||
}
|
||
|
||
/* Used on home, reference, gallery pages */
|
||
.centered {
|
||
text-align: center;
|
||
}
|
||
|
||
/* Currently only used for resume, but it's generalizable */
|
||
.upper {
|
||
text-transform: uppercase;
|
||
}
|
||
/* Header */
|
||
header {
|
||
position: sticky;
|
||
top: 0;
|
||
background-color: var(--color-bg);
|
||
padding: .75rem 0;
|
||
z-index: 10;
|
||
border-bottom: thick solid var(--color-teal);
|
||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||
}
|
||
|
||
/* Header links, pagination links */
|
||
header a,
|
||
.pagination a,
|
||
.webring ul a {
|
||
border-radius: 1rem;
|
||
border: .125rem solid var(--color-pink);
|
||
color: var(--color-pink);
|
||
text-decoration: none;
|
||
padding: 0 .25rem;
|
||
box-shadow: .15rem .15rem var(--color-shadow);
|
||
font-size: 1.2rem;
|
||
/* Click animation handling */
|
||
position: relative;
|
||
top: 0;
|
||
left: 0;
|
||
transition: top .05s ease-in, left .05s ease-in;
|
||
}
|
||
|
||
header a,
|
||
.pagination .older a,
|
||
.webring .prev a,
|
||
.webring .rand a {
|
||
padding-right: .35rem;
|
||
}
|
||
|
||
.pagination .newer a,
|
||
.webring .next a,
|
||
.webring .rand a {
|
||
padding-left: .35rem;
|
||
}
|
||
|
||
header a:focus-visible,
|
||
.pagination a:focus-visible,
|
||
.webring ul a:focus-visible {
|
||
color: var(--color-bg);
|
||
border-color: var(--color-pink);
|
||
background-color: var(--color-pink);
|
||
outline: none;
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
header a:hover,
|
||
.pagination a:hover,
|
||
.webring ul a:hover {
|
||
color: var(--color-bg);
|
||
border-color: var(--color-pink);
|
||
background-color: var(--color-pink);
|
||
}
|
||
}
|
||
|
||
@media (forced-colors: active) {
|
||
header a:focus-visible,
|
||
.pagination a:focus-visible,
|
||
.webring ul a:focus-visible {
|
||
outline-offset: .125rem;
|
||
outline: .125rem solid;
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
header a:hover,
|
||
.pagination a:hover,
|
||
.webring ul a:hover {
|
||
outline-offset: .125rem;
|
||
outline: .125rem solid;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* Click animation */
|
||
header a:active,
|
||
.pagination a:active,
|
||
.webring ul a:active {
|
||
top: .1rem;
|
||
left: .1rem;
|
||
box-shadow: .05rem .05rem var(--color-shadow);
|
||
}
|
||
|
||
/* Current page */
|
||
header a[aria-current="page"] {
|
||
border-color: var(--color-teal);
|
||
color: var(--color-teal);
|
||
}
|
||
|
||
header a[aria-current="page"]:focus-visible {
|
||
color: var(--color-bg);
|
||
border-color: var(--color-teal);
|
||
background-color: var(--color-teal);
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
header a[aria-current="page"]:hover {
|
||
color: var(--color-bg);
|
||
background-color: var(--color-teal);
|
||
border-color: var(--color-teal);
|
||
}
|
||
}
|
||
|
||
/* Header link icons, pagination icons */
|
||
header i,
|
||
.pagination i,
|
||
.webring ul i {
|
||
color: var(--color-teal);
|
||
}
|
||
|
||
header i,
|
||
.pagination .older i,
|
||
.webring .prev i,
|
||
.webring .rand i:nth-child(1) {
|
||
padding-left: .25rem;
|
||
}
|
||
|
||
.pagination .newer i,
|
||
.webring .next i,
|
||
.webring .rand i:nth-child(2) {
|
||
padding-right: .25rem;
|
||
}
|
||
|
||
header a[aria-current="page"] i {
|
||
color: var(--color-pink);
|
||
}
|
||
|
||
header a:focus-visible i,
|
||
a[aria-current="page"] a:focus-visible i,
|
||
.pagination a:focus-visible i,
|
||
.webring ul a:focus-visible i {
|
||
color: var(--color-bg);
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
header a:hover i,
|
||
header a[aria-current="page"]:hover i,
|
||
.pagination a:hover i,
|
||
.webring ul a:hover i {
|
||
color: var(--color-bg);
|
||
}
|
||
}
|
||
|
||
/* Skip link */
|
||
#skip {
|
||
left: -999px;
|
||
position: absolute;
|
||
top: auto;
|
||
width: 1px;
|
||
height: 1px;
|
||
overflow: hidden;
|
||
z-index: -99;
|
||
}
|
||
|
||
#skip:focus-visible {
|
||
display: inline-block;
|
||
left: auto;
|
||
top: auto;
|
||
width: auto;
|
||
height: auto;
|
||
overflow: auto;
|
||
margin: 0 10%;
|
||
z-index: 999;
|
||
}
|
||
|
||
/* Nav */
|
||
header ul {
|
||
display: flex;
|
||
list-style: none;
|
||
gap: 1rem;
|
||
justify-content: center;
|
||
}
|
||
|
||
header ul,
|
||
header li {
|
||
margin: 0;
|
||
}
|
||
|
||
@media (max-width: 650px) {
|
||
.menu-text {
|
||
display: none; /* Icons only on small screens */
|
||
}
|
||
|
||
header a {
|
||
padding: .15rem .5rem;
|
||
}
|
||
|
||
header i {
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
/* Footer */
|
||
footer {
|
||
padding: 1rem 0;
|
||
font-size: .9rem;
|
||
border-top: thick solid var(--color-pink);
|
||
}
|
||
|
||
footer ul {
|
||
display: flex;
|
||
list-style: none;
|
||
gap: .5rem;
|
||
justify-content: center;
|
||
margin: 0;
|
||
}
|
||
|
||
footer li {
|
||
margin: 0;
|
||
}
|
||
|
||
footer li:nth-child(2)::before,
|
||
footer li:nth-child(2)::after {
|
||
content: " ● " / "";
|
||
color: var(--color-teal);
|
||
}
|
||
|
||
@media (max-width: 650px) {
|
||
footer ul {
|
||
flex-flow: column;
|
||
text-align: center;
|
||
}
|
||
|
||
footer li:nth-child(2)::before,
|
||
footer li:nth-child(2)::after {
|
||
content: none;
|
||
}
|
||
}
|
||
|
||
footer a {
|
||
text-decoration-color: var(--color-pink);
|
||
}
|
||
|
||
footer a:focus-visible {
|
||
outline-color: var(--color-pink);
|
||
}
|
||
|
||
/* Pagination */
|
||
.pagination,
|
||
.pagination li {
|
||
margin: 0;
|
||
}
|
||
|
||
.pagination {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
grid-template-areas: "older newer";
|
||
list-style: none;
|
||
margin-top: 3rem;
|
||
}
|
||
|
||
@media (max-width: 650px) {
|
||
.post-pagination {
|
||
grid-template-columns: 1fr;
|
||
grid-template-areas:
|
||
"older"
|
||
"newer";
|
||
gap: .75rem;
|
||
}
|
||
}
|
||
|
||
.pagination .older {
|
||
grid-area: older;
|
||
}
|
||
|
||
.pagination .newer {
|
||
grid-area: newer;
|
||
text-align: right;
|
||
}
|
||
|
||
/* webring navigation */
|
||
.webring {
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.webring ul {
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
list-style: none;
|
||
justify-content: space-around;
|
||
gap: .35rem;
|
||
}
|
||
|
||
.webring ul,
|
||
.webring li {
|
||
margin-left: 0;
|
||
}
|
||
@media print {
|
||
/* Nav elements */
|
||
header,
|
||
footer,
|
||
nav {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Base */
|
||
body {
|
||
background-color: #fff;
|
||
color: #000;
|
||
}
|
||
|
||
main {
|
||
width: 95vw;
|
||
}
|
||
|
||
h1,h2,h3,h4,h5,h6 {
|
||
color: #000;
|
||
}
|
||
|
||
/* Links */
|
||
/* Hover is not really necessary, but it's annoying when testing otherwise */
|
||
a,
|
||
a:hover {
|
||
text-decoration-style: dotted;
|
||
text-decoration-thickness: .1rem;
|
||
text-decoration-color: #000;
|
||
}
|
||
|
||
a::after{
|
||
content: " (" attr(href) ")";
|
||
}
|
||
|
||
|
||
/* Code */
|
||
code,
|
||
pre,
|
||
code[class*=language-],
|
||
pre[class*=language-] {
|
||
text-shadow: none;
|
||
background-color: var(--color-light);
|
||
color: #000 !important;
|
||
}
|
||
|
||
.token.namespace {
|
||
opacity: 1;
|
||
}
|
||
|
||
.token.block-comment,
|
||
.token.cdata,
|
||
.token.comment,
|
||
.token.doctype,
|
||
.token.prolog,
|
||
.token.punctuation,
|
||
.token.attr-name,
|
||
.token.deleted,
|
||
.token.namespace,
|
||
.token.tag,
|
||
.token.boolean,
|
||
.token.function,
|
||
.token.number,
|
||
.token.class-name,
|
||
.token.constant,
|
||
.token.property,
|
||
.token.symbol,
|
||
.token.attr-value,
|
||
.token.char,
|
||
.token.regex,
|
||
.token.string,
|
||
.token.variable,
|
||
.token.inserted,
|
||
.token.entity,
|
||
.token.operator,
|
||
.token.url,
|
||
.token.function-name,
|
||
.token.atrule,
|
||
.token.builtin,
|
||
.token.important,
|
||
.token.keyword,
|
||
.token.selector {
|
||
color: #000;
|
||
}
|
||
}</style>
|
||
|
||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||
|
||
let globalInstanceIndex = 0;
|
||
|
||
class HeadingAnchors extends HTMLElement {
|
||
static register(tagName = "heading-anchors", registry = window.customElements) {
|
||
if(registry && !registry.get(tagName)) {
|
||
registry.define(tagName, this);
|
||
}
|
||
}
|
||
|
||
static attributes = {
|
||
exclude: "data-ha-exclude",
|
||
prefix: "prefix",
|
||
content: "content",
|
||
}
|
||
|
||
static classes = {
|
||
anchor: "ha",
|
||
placeholder: "ha-placeholder",
|
||
srOnly: "ha-visualhide",
|
||
}
|
||
|
||
static defaultSelector = "h2,h3,h4,h5,h6";
|
||
|
||
static css = `
|
||
.${HeadingAnchors.classes.srOnly} {
|
||
clip: rect(0 0 0 0);
|
||
height: 1px;
|
||
overflow: hidden;
|
||
position: absolute;
|
||
width: 1px;
|
||
}
|
||
.${HeadingAnchors.classes.anchor} {
|
||
position: absolute;
|
||
left: var(--ha_offsetx);
|
||
top: var(--ha_offsety);
|
||
text-decoration: none;
|
||
opacity: 0;
|
||
}
|
||
.${HeadingAnchors.classes.placeholder} {
|
||
opacity: .3;
|
||
}
|
||
.${HeadingAnchors.classes.anchor}:is(:focus-within, :hover) {
|
||
opacity: 1;
|
||
}
|
||
.${HeadingAnchors.classes.anchor},
|
||
.${HeadingAnchors.classes.placeholder} {
|
||
display: inline-block;
|
||
padding: 0 .25em;
|
||
|
||
/* Disable selection of visually hidden label */
|
||
-webkit-user-select: none;
|
||
user-select: none;
|
||
}
|
||
|
||
@supports (anchor-name: none) {
|
||
.${HeadingAnchors.classes.anchor} {
|
||
position: absolute;
|
||
left: anchor(left);
|
||
top: anchor(top);
|
||
}
|
||
}`;
|
||
|
||
get supports() {
|
||
return "replaceSync" in CSSStyleSheet.prototype;
|
||
}
|
||
|
||
get supportsAnchorPosition() {
|
||
return CSS.supports("anchor-name: none");
|
||
}
|
||
|
||
constructor() {
|
||
super();
|
||
|
||
if(!this.supports) {
|
||
return;
|
||
}
|
||
|
||
let sheet = new CSSStyleSheet();
|
||
sheet.replaceSync(HeadingAnchors.css);
|
||
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
|
||
|
||
this.headingStyles = {};
|
||
this.instanceIndex = globalInstanceIndex++;
|
||
}
|
||
|
||
connectedCallback() {
|
||
if (!this.supports) {
|
||
return;
|
||
}
|
||
|
||
this.headings.forEach((heading, index) => {
|
||
if(!heading.hasAttribute(HeadingAnchors.attributes.exclude)) {
|
||
let anchor = this.getAnchorElement(heading);
|
||
let placeholder = this.getPlaceholderElement();
|
||
|
||
// Prefers anchor position approach for better accessibility
|
||
// https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||
if(this.supportsAnchorPosition) {
|
||
let anchorName = `--ha_${this.instanceIndex}_${index}`;
|
||
placeholder.style.setProperty("anchor-name", anchorName);
|
||
anchor.style.positionAnchor = anchorName;
|
||
}
|
||
|
||
heading.appendChild(placeholder);
|
||
heading.after(anchor);
|
||
}
|
||
});
|
||
}
|
||
|
||
// Polyfill-only
|
||
positionAnchorFromPlaceholder(placeholder) {
|
||
if(!placeholder) {
|
||
return;
|
||
}
|
||
|
||
let heading = placeholder.closest("h1,h2,h3,h4,h5,h6");
|
||
if(!heading.nextElementSibling) {
|
||
return;
|
||
}
|
||
|
||
// TODO next element could be more defensive
|
||
this.positionAnchor(heading.nextElementSibling);
|
||
}
|
||
|
||
// Polyfill-only
|
||
positionAnchor(anchor) {
|
||
if(!anchor || !anchor.previousElementSibling) {
|
||
return;
|
||
}
|
||
|
||
// TODO previous element could be more defensive
|
||
let heading = anchor.previousElementSibling;
|
||
this.setFontProp(heading, anchor);
|
||
|
||
if(this.supportsAnchorPosition) {
|
||
// quit early
|
||
return;
|
||
}
|
||
|
||
let placeholder = heading.querySelector(`.${HeadingAnchors.classes.placeholder}`);
|
||
if(placeholder) {
|
||
anchor.style.setProperty("--ha_offsetx", `${placeholder.offsetLeft}px`);
|
||
anchor.style.setProperty("--ha_offsety", `${placeholder.offsetTop}px`);
|
||
}
|
||
}
|
||
|
||
setFontProp(heading, anchor) {
|
||
let placeholder = heading.querySelector(`.${HeadingAnchors.classes.placeholder}`);
|
||
if(placeholder) {
|
||
let style = getComputedStyle(placeholder);
|
||
let props = ["font-weight", "font-size", "line-height", "font-family"];
|
||
let [weight, size, lh, family] = props.map(name => style.getPropertyValue(name));
|
||
anchor.style.setProperty("font", `${weight} ${size}/${lh} ${family}`);
|
||
let vars = style.getPropertyValue("font-variation-settings");
|
||
if(vars) {
|
||
anchor.style.setProperty("font-variation-settings", vars);
|
||
}
|
||
}
|
||
}
|
||
|
||
getAccessibleTextPrefix() {
|
||
// Useful for i18n
|
||
return this.getAttribute(HeadingAnchors.attributes.prefix) || "Jump to section titled";
|
||
}
|
||
|
||
getContent() {
|
||
if(this.hasAttribute(HeadingAnchors.attributes.content)) {
|
||
return this.getAttribute(HeadingAnchors.attributes.content);
|
||
}
|
||
return "#";
|
||
}
|
||
|
||
// Placeholder nests inside of heading
|
||
getPlaceholderElement() {
|
||
let ph = document.createElement("span");
|
||
ph.setAttribute("aria-hidden", true);
|
||
ph.classList.add(HeadingAnchors.classes.placeholder);
|
||
let content = this.getContent();
|
||
if(content) {
|
||
ph.innerHTML = content; // CHANGED HERE
|
||
}
|
||
|
||
ph.addEventListener("mouseover", (e) => {
|
||
let placeholder = e.target.closest(`.${HeadingAnchors.classes.placeholder}`);
|
||
if(placeholder) {
|
||
this.positionAnchorFromPlaceholder(placeholder);
|
||
}
|
||
});
|
||
|
||
return ph;
|
||
}
|
||
|
||
getAnchorElement(heading) {
|
||
let anchor = document.createElement("a");
|
||
anchor.href = `#${heading.id}`;
|
||
anchor.classList.add(HeadingAnchors.classes.anchor);
|
||
|
||
let content = this.getContent();
|
||
anchor.innerHTML = `<span class="${HeadingAnchors.classes.srOnly}">${this.getAccessibleTextPrefix()}: ${heading.textContent}</span>${content ? `<span aria-hidden="true">${content}</span>` : ""}`;
|
||
|
||
anchor.addEventListener("focus", e => {
|
||
let anchor = e.target.closest(`.${HeadingAnchors.classes.anchor}`);
|
||
if(anchor) {
|
||
this.positionAnchor(anchor);
|
||
}
|
||
});
|
||
|
||
anchor.addEventListener("mouseover", (e) => {
|
||
// when CSS anchor positioning is supported, this is only used to set the font
|
||
let anchor = e.target.closest(`.${HeadingAnchors.classes.anchor}`);
|
||
this.positionAnchor(anchor);
|
||
});
|
||
|
||
return anchor;
|
||
}
|
||
|
||
get headings() {
|
||
return this.querySelectorAll(this.selector.split(",").map(entry => `${entry.trim()}[id]`));
|
||
}
|
||
|
||
get selector() {
|
||
return this.getAttribute("selector") || HeadingAnchors.defaultSelector;
|
||
}
|
||
}
|
||
|
||
HeadingAnchors.register();
|
||
|
||
export { HeadingAnchors }</script>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
|
||
<a href="#main" id="skip" title="skip to main content">
|
||
<i class="fa-solid fa-forward" aria-hidden="true"></i> skip
|
||
</a>
|
||
|
||
<nav aria-label="main navigation">
|
||
<ul>
|
||
|
||
<li>
|
||
<a href="/reference/" title="read reference posts">
|
||
<i class="fa-regular fa-folder-open" aria-hidden="true"></i>
|
||
<span class="menu-text">reference</span>
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/gallery/" title="view the gallery">
|
||
<i class="fa-regular fa-images" aria-hidden="true"></i>
|
||
<span class="menu-text">gallery</span>
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/" title="">
|
||
<i class="fa fa-solid fa-crow" aria-hidden="true"></i>
|
||
<span class="menu-text">home</span>
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/about/" title="about Lee">
|
||
<i class="fa-regular fa-user" aria-hidden="true"></i>
|
||
<span class="menu-text">about</span>
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/contact/" title="contact Lee">
|
||
<i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
|
||
<span class="menu-text">contact</span>
|
||
</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</nav>
|
||
|
||
</header>
|
||
|
||
|
||
<main id="main">
|
||
|
||
|
||
|
||
|
||
|
||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||
<article>
|
||
<h1 id="gender-in-data-models">gender in data models</h1>
|
||
|
||
<div class="post-metadata">
|
||
<p>
|
||
posted on
|
||
<time datetime="2023-06-22">June 22, 2023</time>
|
||
by Lee Cattarin
|
||
</p>
|
||
|
||
|
||
<ul class="post-tags">
|
||
|
||
<li>
|
||
|
||
<a href="/tags/gender/">gender</a>
|
||
</li>
|
||
|
||
<li>
|
||
|
||
<a href="/tags/software/">software</a>
|
||
</li>
|
||
|
||
<li>
|
||
|
||
<a href="/tags/highlight/">highlight</a>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
|
||
<img src="/img/peony.jpg" alt="Image unrelated to post. A light pink peony in full bloom, close up." loading="lazy" decoding="async" width="1000" height="666">
|
||
|
||
|
||
<!-- TOC -->
|
||
<ul>
|
||
<li><a href="#context-and-problem">Context and problem</a></li>
|
||
<li><a href="#known-limitations">Known limitations</a></li>
|
||
<li><a href="#where-do-we-need-help">Where do we need help?</a></li>
|
||
<li><a href="#scope">Scope</a>
|
||
<ul>
|
||
<li><a href="#out-of-scope">Out of scope</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="#core-definitions">Core definitions</a></li>
|
||
<li><a href="#data-on-the-transgender-community">Data on the transgender community</a></li>
|
||
<li><a href="#issues-and-considerations">Issues and considerations</a>
|
||
<ul>
|
||
<li><a href="#do-you-need-gender-data">Do you need gender data?</a></li>
|
||
<li><a href="#safety-and-prevention-of-abuse">Safety and prevention of abuse</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="#anti-patterns">Anti-patterns</a>
|
||
<ul>
|
||
<li><a href="#legal-gender-markers">Legal gender markers</a></li>
|
||
<li><a href="#biological-sex">Biological sex</a></li>
|
||
<li><a href="#other-or-similarly-named-categories">"Other" or similarly named categories</a></li>
|
||
<li><a href="#expansive-lists">Expansive lists</a></li>
|
||
<li><a href="#free-text-entry">Free text entry</a></li>
|
||
<li><a href="#assumptions-that-a-single-term-will-fully-encompass-gender-especially-in-a-more-exhaustive-list-of-options">Assumptions that a single term will fully encompass gender, especially in a more exhaustive list of options</a></li>
|
||
<li><a href="#automatic-detection-of-gender">Automatic detection of gender</a></li>
|
||
<li><a href="#using-gender-as-a-proxy-for-pronouns">Using gender as a proxy for pronouns</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="#patterns-and-solutions">Patterns and solutions</a>
|
||
<ul>
|
||
<li><a href="#decline-to-specify">Decline to specify</a></li>
|
||
<li><a href="#not-listed-here">Not listed here</a></li>
|
||
<li><a href="#allow-for-changes">Allow for changes</a></li>
|
||
<li><a href="#two--or-multi--step-approach">Two- or multi- step approach</a></li>
|
||
<li><a href="#organ-inventory">Organ inventory</a></li>
|
||
<li><a href="#differentiate-with-cis-and-trans">Differentiate with ‘cis’ and ‘trans’</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="#healthcare-or-legal-systems">Healthcare or legal systems</a></li>
|
||
<li><a href="#examples-in-existing-systems">Examples in existing systems</a>
|
||
<ul>
|
||
<li><a href="#wpath-guidelines-on-emr">WPATH guidelines on EMR</a></li>
|
||
<li><a href="#facebook">Facebook</a></li>
|
||
<li><a href="#drupal">Drupal</a></li>
|
||
<li><a href="#salesforce-health-cloud">Salesforce Health Cloud</a></li>
|
||
<li><a href="#adobe-xdm">Adobe XDM</a></li>
|
||
<li><a href="#epic-healthcare-emr">Epic Healthcare EMR</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<!-- /TOC -->
|
||
<h2 id="context-and-problem">Context and problem</h2>
|
||
<p>As transgender and nonbinary people gain visibility and legal identification expands gender fields to include nonbinary genders and/or "X" markers, data models that only support "male" and "female" (or "M"/"F") are no longer sufficient to align with individuals' legal records or personal identity. However, with the large range of terminology used by transgender and nonbinary people, tackling this problem can seem challenging and brings the potential to further harm or exclude already marginalized individuals.</p>
|
||
<h2 id="known-limitations">Known limitations</h2>
|
||
<ul>
|
||
<li>This is a work in progress</li>
|
||
<li>While I have relied on many articles and talks in collating this resource, as well as on my own experiences as a nonbinary trans person enmeshed in nonbinary and trans communities, it is still largely the work of one person at present and will not represent the views of all trans, nonbinary, or gender-expansive people</li>
|
||
</ul>
|
||
<h2 id="where-do-we-need-help">Where do we need help?</h2>
|
||
<p>Proofreading and commentary from all readers!</p>
|
||
<p>If you're knowledgeable on this topic, additional information and viewpoints are tremendously useful.</p>
|
||
<p>If you're new, where do you have questions? What hasn't been explained enough? What do you leave this document still wondering about?</p>
|
||
<h2 id="scope">Scope</h2>
|
||
<p>This document will look at existing and potential solutions to modeling gender in data for use by software systems, primarily via presenting and analyzing patterns and anti-patterns.</p>
|
||
<h3 id="out-of-scope">Out of scope</h3>
|
||
<ul>
|
||
<li>The business case for building data models and software that is inclusive of all.</li>
|
||
<li>The validity of trans identities, or of any specific term or set of terms used by individuals in reference to their gender.</li>
|
||
<li>A detailed overview of trans people's experiences or understandings; a "Gender 101" or "Trans 101" document; a complete dictionary of terminology relating to the trans or gender diverse community.</li>
|
||
</ul>
|
||
<h2 id="core-definitions">Core definitions</h2>
|
||
<p>In order to more easily discuss these topics, I will note here my working definitions for some terms below.</p>
|
||
<blockquote>
|
||
<p>A note on language… Please do not assume that these definitions are fixed or can be broadly applied across cultures and countries. The language around gender has continued to change as the trans community is more able to connect, have in depth conversations, and define for ourselves how we use language. On an individual, person-to-person level, it's always preferable to mirror the language people use for themselves rather than prescriptively apply terms.</p>
|
||
</blockquote>
|
||
<ul>
|
||
<li><strong>Transgender</strong> (abbreviated trans; also trans*): anyone whose gender does not align with their sex assigned at birth. This is both an umbrella term and an individual identity. Used here, it is inclusive of but not limited to (and these identities may overlap): transgender women, transgender men, nonbinary people - including genderqueer, agender, or genderfluid people as well as many other labels - and anyone who is otherwise not <em>cisgender</em>.</li>
|
||
<li><strong>Cisgender</strong> (abbreviated cis): anyone whose gender matches their sex assigned at birth.
|
||
<blockquote>
|
||
<p>Language note: trans and cis are derived from Latin, meaning "on the other side of" and "on this side of" respectively.</p>
|
||
</blockquote>
|
||
</li>
|
||
<li><strong>Binary/Nonbinary</strong>: these terms are in reference to the idea of gender as a binary consisting only of man/male and woman/female, which is neither accurate nor effective in describing human experience.</li>
|
||
<li><strong>Nonbinary</strong> (also non-binary; abbreviated NBi, NBy, NB [recommended to avoid as it can cause language collisions around NB used to mean non-Black], enby [informal]): an umbrella term or individual identity for anyone whose gender does not wholly and solely align with one binary gender.</li>
|
||
</ul>
|
||
<h2 id="data-on-the-transgender-community">Data on the transgender community</h2>
|
||
<p>There's a dearth of data on trans individuals. That said, we do have some relevant sources that have given us broad insight into trans communities.</p>
|
||
<ul>
|
||
<li><a href="https://www.ustranssurvey.org/reports" target="_blank" rel="external">U.S. Transgender Survey</a>, the largest survey ever devoted to the lives and experiences of transgender people, with 27,715 respondents across the United States.</li>
|
||
<li><a href="https://www.gendercensus.com/" target="_blank" rel="external">Gender Census</a>, an annual survey that collects information about the language used by people whose genders are not adequately described, expressed or encompassed by the restrictive gender binary.</li>
|
||
</ul>
|
||
<p>Both of these sources use ‘nonbinary’ as their usual spelling; I am mirroring that here.</p>
|
||
<h2 id="issues-and-considerations">Issues and considerations</h2>
|
||
<h3 id="do-you-need-gender-data">Do you need gender data?</h3>
|
||
<p>It's always worthwhile to stop and look at how relevant or necessary gender information is to your goals.</p>
|
||
<blockquote>
|
||
<p>"'I would argue that you almost never have to ask for gender,' Stevens said.</p>
|
||
<p>"If you’re collecting gender identity data to personalize user-facing copy, try asking for preferred pronouns instead. If you’re asking because you want to make in-app content recommendations, try asking about the user’s content preferences. If you’re asking to generate a user avatar, let the user generate their own. Gender identity is a poor proxy variable — stick to asking for the information you actually want.</p>
|
||
</blockquote>
|
||
<p><a href="https://builtin.com/software-engineering-perspectives/trans-inclusivity-tips-developers" target="_blank" rel="external">(Hunter, 2020)</a></p>
|
||
<p>Drupal's gender field includes the following guidance in its description:</p>
|
||
<blockquote>
|
||
<ol>
|
||
<li>Do you need to address a person with pronouns? Genders do not necessarily map easily onto the pronouns a person uses. If you need to associate pronouns with a person, ask for those pronouns directly.</li>
|
||
<li>Do you need to address a person with a title or prefix (such as Mr./Ms./Mx.)? Genders also do not necessarily correspond to a person's preferred title, and moreover would leave out honorifics related to profession, such as Dr., Rev., or Capt. If you need to associate titles with a person, ask for those titles directly.</li>
|
||
<li>Do you need to collect gender information for demographic data reasons? If you do, make sure you are able to accurately record a person's gender, rather than forcing them into choosing from limited options. If you need to use the data for recording trends, writing reports, or segmentation for advertising or other reasons, consider post-processing the data to group related genders depending on your specific use-case.</li>
|
||
<li>Do you need to know a person's health needs, clothing preferences or bathroom use? If you are organizing an event, for instance, you might want to know what sort of facilities to provide or what sorts of t-shirts to order. Genders, however, do not necessarily correspond to specific body types, body functions, health requirements (such as menstrual supplies) or reflect what types of facilities a person would feel safest using in a public environment. If you are collecting gender data for this purpose, ask the more precise questions specifically.</li>
|
||
<li>Do you want to publicly display a person's gender on a profile? This is often a choice made by social media and dating/relationship sites. If you do this, consider making the field optional altogether. If you are providing user avatars, remember that human bodies come in all sorts, and allow individuals to choose an avatar separately from collecting this data.</li>
|
||
<li>Do you need to know assigned gender for legal, medical or regulatory reasons? Current gender does not necessarily correspond to assigned sex at birth or legal gender marker, so be sure you are clear in what you are requesting of a person. It's particularly critical to be transparent about your privacy policy and the how this data will be used.</li>
|
||
</ol>
|
||
</blockquote>
|
||
<p><a href="https://www.drupal.org/project/gender" target="_blank" rel="external">(McCabe and Beach, 2019)</a></p>
|
||
<h3 id="safety-and-prevention-of-abuse">Safety and prevention of abuse</h3>
|
||
<blockquote>
|
||
<p>....if this information is displayed publicly there is potential for abuse by people who like to make discriminatory jokes about gender identity, and any such system would need to put steps in place to prevent such abuse.</p>
|
||
<p>...</p>
|
||
<p>Instead of putting the burden on a user to fully understand the risks of sharing their highly personal information, let’s put the burden on ourselves to treat that information right. If we have no strong reason to collect it, or can’t guarantee its safety, we shouldn’t collect it.</p>
|
||
</blockquote>
|
||
<p><a href="https://medium.com/@SorenSpicknall/protecting-queer-communities-through-data-4707ae0cb562" target="_blank" rel="external">(Spicknall, 2019)</a></p>
|
||
<p>If you do collect gender data, inform the user what it is used for and who it will be shared with.</p>
|
||
<h2 id="anti-patterns">Anti-patterns</h2>
|
||
<h3 id="legal-gender-markers">Legal gender markers</h3>
|
||
<p>The availability of nonbinary gender options in legal systems varies by location. The ability to change one's gender marker (from one binary category to another or from binary to nonbinary) varies even more widely, with requirements ranging from simple voluntary declaration, to verification by medical professional(s) of varying treatments which vary in how accessible they are and whether they are actually desired by individuals for whom this is relevant, to only changing in response to proven "error," etc.</p>
|
||
<p><a href="http://transgenderlawcenter.org/wp-content/uploads/2016/12/Birth-Cert-overview-state-by-state.pdf" target="_blank" rel="external">(Transgender Law Center, 2017)</a> <a href="https://www.lgbtmap.org/equality-maps/identity_document_laws" :target="_blank">(Movement Advancement Project)</a> <a href="https://www.hrw.org/world-report/2016/country-chapters/africa-americas-asia-europe/central-asia-middle-east/north-0" :target="_blank">(Knight and Ghosal, 2016)</a></p>
|
||
<p>If you are not specifically trying to refer to an individual’s legal identification, don’t tie gender to it.</p>
|
||
<h3 id="biological-sex">Biological sex</h3>
|
||
<p>This is variously defined to refer to sex assigned at birth, legal gender/sex markers, or current physical sex based on any number of characteristics, which may include</p>
|
||
<ul>
|
||
<li>chromosomes</li>
|
||
<li>gonads</li>
|
||
<li>genitalia</li>
|
||
<li>primary sex hormones</li>
|
||
<li>secondary sex characteristics</li>
|
||
</ul>
|
||
<p>and more. This identifier may or may not be treated as binary and may or may not take into account an individual's medical history.</p>
|
||
<p><a href="https://blogs.scientificamerican.com/sa-visual/visualizing-sex-as-a-spectrum/" target="_blank" rel="external">(Montañez, 2017)</a></p>
|
||
<p>Outside of healthcare, this is largely unnecessary. For healthcare, see <a href="#two--or-multi--step-approach">Two- or multi- step approach</a> and <a href="#organ-inventory">Organ inventory</a>.</p>
|
||
<h3 id="other-or-similarly-named-categories">"Other" or similarly named categories</h3>
|
||
<p>As a way to accurately represent gender diverse people, "other" is, quite literally, othering. "Prefer not to say" or similar wording can be an excellent option, but not if it is the only option outside the traditional gender binary that is available to users - in that case, it becomes no longer a preference but a requirement not to say.</p>
|
||
<blockquote>
|
||
<p>"Researchers have also developed methods to respond to challenges involved in data collection about sexual and gender identities which are culturally specific and unique. For example, in 2011, the government of Nepal attempted the world’s first census in which respondents had the option of choosing 'Male,' 'Female,' or 'Third Gender.' The effort was not successful for a number of reasons, among which was that large proportions of the gender minority population did not identify with the term 'third gender.' Subsequent research determined that the use of culturally specific terms such as 'Methi' and 'Kothi' would have increased the effectiveness of the census effort."</p>
|
||
</blockquote>
|
||
<p><a href="https://williamsinstitute.law.ucla.edu/publications/data-collection-sogi/" target="_blank" rel="external">(Park, 2016)</a></p>
|
||
<h3 id="expansive-lists">Expansive lists</h3>
|
||
<p>While these can be appealing for the choice they afford users, they come with notable use and implementation considerations.</p>
|
||
<ul>
|
||
<li><strong>Timeliness.</strong> This area of language moves quickly and terms are coming into and out of use fast. Larger sets of options require more work to stay up to date and include recent terminology, as well as prompting more questions about which terms, if any, are no longer used to the point they should be removed.</li>
|
||
<li><strong>Localization.</strong> Hyper-specific terms are easy targets for localization issues, and a more detailed list requires more in-depth research to localize.</li>
|
||
<li><strong>User overwhelm.</strong> A list with a large set of options, particularly if it's many unfamiliar words, may confuse users.</li>
|
||
<li><strong>Exclusive choice.</strong> Mentioned briefly above, the more options a list of gender terms offers, the more likely two or more terms are to overlap. Unless offering a "check all that apply" system, this makes accurate choice more difficult for the user rather than easier.</li>
|
||
</ul>
|
||
<h3 id="free-text-entry">Free text entry</h3>
|
||
<p>This approach provides much of the benefits of an expansive list, and removes the drawbacks discussed above. However, it comes at the cost of making data storage and analysis more expensive, challenging, and time-consuming. It may additionally still contribute to user confusion for anyone who is uncertain where or how the information will be used or whether there are expected responses.</p>
|
||
<p>For smaller projects, however, this is still an option. Or you can offer this to a small subset of users who find that the available options don't fit - see <a href="#not-listed-here">Not listed here</a>.</p>
|
||
<h3 id="assumptions-that-a-single-term-will-fully-encompass-gender-especially-in-a-more-exhaustive-list-of-options">Assumptions that a single term will fully encompass gender, especially in a more exhaustive list of options</h3>
|
||
<p>Especially when providing expansive lists or allowing write in fields, ensure that terms that are not mutually exclusive must be chosen as though they are. This is the reasoning behind guidance for a two-step approach, described in more detail in <a href="#two--or-multi--step-approach">Two- or multi- step approach</a>, which "measures assigned sex at birth and self-reported gender identity at the time of the survey" <a href="https://williamsinstitute.law.ucla.edu/publications/data-collection-sogi/" target="_blank" rel="external">(Park, 2016)</a></p>
|
||
<blockquote>
|
||
<p>"...some terms aren’t mutually exclusive, and framing them as such is offensive, Mons said: 'For example, if we list Man, Woman, Non-Binary, Trans Man and Trans Woman, <strong>does that separation imply that someone who is trans and identifies as a man is not a man?</strong>'"</p>
|
||
</blockquote>
|
||
<p><a href="https://builtin.com/data-science/dscout-gender-identity-data-practice" target="_blank" rel="external">(Gossett, 2020)</a> emphasis mine</p>
|
||
<h3 id="automatic-detection-of-gender">Automatic detection of gender</h3>
|
||
<p>In addition to reinforcing binarism, this approaches tends to reinforce sexism as well, and can further reinforce other prejudices as they intersect with gender.</p>
|
||
<blockquote>
|
||
<p>"Moreover, these works tend to codify (literally, to write into code) essentialist, stereotypical characterizations of male and female communication patterns and present them as universal, context-free, scientific truths."</p>
|
||
</blockquote>
|
||
<p><a href="https://civic.mit.edu/index.html%3Fp=1165.html" target="_blank" rel="external">(kanarinka, 2016)</a></p>
|
||
<p>For transgender individuals, automatic categorization as a gender they are not is often a frequent and painful occurrence. We should take care not to introduce unnecessary causes of harm into our systems, especially when they are less accurate and helpful than user self-identification.</p>
|
||
<h3 id="using-gender-as-a-proxy-for-pronouns">Using gender as a proxy for pronouns</h3>
|
||
<p>Gender isn’t one-to-one with pronouns (or terms of address). If you want to know how to refer to someone, ask pronouns separately.</p>
|
||
<h2 id="patterns-and-solutions">Patterns and solutions</h2>
|
||
<h3 id="decline-to-specify">Decline to specify</h3>
|
||
<p>Including "decline to specify" or a similar opt-out response is always a positive addition unless the information is actually necessary. However, as mentioned above, don't use this as a replacement for the inclusion of terms that actually match the identity of the individual. Opting out should be a choice, not forced due to lack of other options.</p>
|
||
<h3 id="not-listed-here">Not listed here</h3>
|
||
<p>Including "gender not listed here" or a similar response provides an out for anyone who does not feel represented by the available options. You could follow this up with a free text entry field.</p>
|
||
<h3 id="allow-for-changes">Allow for changes</h3>
|
||
<p>Avoid treating gender as an immutable category - make sure users have the ability to edit it.</p>
|
||
<h3 id="two-or-multi-step-approach">Two- or multi- step approach</h3>
|
||
<p>As mentioned briefly above, a two-step approach separates gender and assigned sex at birth, allowing healthcare systems additional information about the patient. See <a href="#wpath-guidelines-on-emr">WPATH guidelines on EMR</a> and associated reference for more details.
|
||
This may also be expanded to a multi-step approach, with questions covering some/all of</p>
|
||
<ul>
|
||
<li>Gender</li>
|
||
<li>Sex assigned at birth</li>
|
||
<li>Legal gender/sex designation</li>
|
||
<li>Transgender status
|
||
<ul>
|
||
<li>This may additionally benefit from self-identification as "gender diverse, gender non-conforming, gender variant, or gender expansive" <a href="https://nikkistevens.com/open-demographics/questions/gender.html" target="_blank" rel="external">(Stevens)</a> either in the same question or as an additional question</li>
|
||
</ul>
|
||
</li>
|
||
<li>Intersex status</li>
|
||
</ul>
|
||
<p>…but only if the data is necessary.</p>
|
||
<h3 id="organ-inventory">Organ inventory</h3>
|
||
<blockquote>
|
||
<p>Provide a means to maintain an inventory of a patient's medical transition history and current anatomy. An anatomical inventory would allow providers to record into the chart (and/or update as needed) the organs each individual patient has at any given point in time; this inventory would then drive any individualized auto-population of history and physical exam templates. This inventory should be uncoupled from the patient's recorded gender identity, assigned sex, or preferred pronouns.</p>
|
||
<p>...</p>
|
||
<p>These procedures, however, also should also be un-coupled from any gender-coded template so that an individual coded as male who has had a hysterectomy, for example, could have that history documented. In addition, sex-specific organ procedures and diagnoses relating to these organs should be un-coupled, so that (as an example) a prostatic ultrasound may be ordered on a patient registered as female, or a cervical pap smear ordered on a patient registered as male. Such practices would allow enhanced decision support for transgender-specific care, such as medication interactions, organ- and sex-specific preventive health alerts, or accommodations for sex-specific laboratory normal value ranges.</p>
|
||
</blockquote>
|
||
<p><a href="https://www.healthit.gov/isa/sites/isa/files/2017-11/JAMIA%20-%20Transgender%20Health%20and%20EMRs.pdf" target="_blank" rel="external">(Deutsch, et. al, 2013)</a></p>
|
||
<p>Refer to the reference linked above for detailed examples of organ or surgical history inventories.</p>
|
||
<p>Additional reference (added Sep 2024): <a href="https://www.rainbowhealthontario.ca/wp-content/uploads/2021/09/Guidelines-FINAL-4TH-EDITION-With-2023-Updates.pdf" target="_blank" rel="external">(Bourns, 2023)</a></p>
|
||
<h3 id="differentiate-with-cis-and-trans">Differentiate with ‘cis’ and ‘trans’</h3>
|
||
<p>Avoid questions that contrast ‘male’ and ‘trans male’ or any parallel set of terms. Either contrast ‘cis male’ and ‘trans male,' or allow respondents to choose multiple responses.</p>
|
||
<h2 id="healthcare-or-legal-systems">Healthcare or legal systems</h2>
|
||
<p>These systems add additional requirements and restrictions. In cases like these, it may be helpful to have an additional field for <strong>legal gender/sex designation</strong> (usually set to F, M, or X) in order to allow for alignment with existing documentation without preventing self-identification on the part of the individual.</p>
|
||
<p>Healthcare systems in particular may benefit from <a href="#organ-inventory">Organ inventory</a> and <a href="#two--or-multi--step-approach">Two- or multi- step approach</a>.</p>
|
||
<h2 id="examples-in-existing-systems">Examples in existing systems</h2>
|
||
<h3 id="wpath-guidelines-on-emr">WPATH guidelines on EMR</h3>
|
||
<ul>
|
||
<li>WPATH: World Professional Association for Transgender Health <a href="https://wpath.org/about/mission-and-vision" target="_blank" rel="external">(WPATH, 2023)</a></li>
|
||
<li>EMR: Electronic Medical Records</li>
|
||
</ul>
|
||
<blockquote>
|
||
<p>Preferred name, gender identity, and pronoun preference, as identified by patients, should be included as demographic variables (such as with ethnicity). These would be captured in readily amendable, optional fields that are separate from the patient’s state-listed name and sex or gender designation, which may continue to be used for billing purposes in circumstances when the patient has not yet obtained legal change of name and/or sex or gender designation. Note that some patients may identify as ‘genderqueer’ and prefer the use of neither pronoun. While lists of current common gender identities, sex options, and pronoun options are provided [in original document, see source], ideally field parameters would be easily amended to reflect changing paradigms and social trends within transgender communities.</p>
|
||
</blockquote>
|
||
<p><a href="https://www.healthit.gov/isa/sites/isa/files/2017-11/JAMIA%20-%20Transgender%20Health%20and%20EMRs.pdf" target="_blank" rel="external">(Deutsch, et. al, 2013)</a></p>
|
||
<h3 id="facebook">Facebook</h3>
|
||
<blockquote>
|
||
<p>"In 2014, Facebook expanded their gender options from 2 to 58 for English speakers in the US and UK. The gender options they added were created in consultation with the LGBTQIA community and range from 'gender non-conforming' to 'two-spirit' to 'trans female'. The corporation later added the ability to identify as more than one gender and to input a custom gender. ... While these changes may appear to be progressive, Facebook’s databases still resolve custom and non-binary genders to Male and Female on the backend based on the binary gender that users select at sign-up where the custom option is not available. Here is how the Facebook Marketing API views gender: 1 = Male, 2 = Female. So while a user and her friends may see her presented as the gender she elects, she is a 1 = Male or 2 = Female to any advertisers looking to purchase her attention."</p>
|
||
</blockquote>
|
||
<p><a href="https://civic.mit.edu/index.html%3Fp=1165.html" target="_blank" rel="external">(kanarinka, 2016)</a></p>
|
||
<h3 id="drupal">Drupal</h3>
|
||
<p>Uses a list of genders developed by the Open Demographics project. <a href="https://www.drupal.org/project/gender" target="_blank" rel="external">(McCabe and Beach, 2019)</a> <a href="https://nikkistevens.com/open-demographics/questions/gender.html" :target="_blank">(Stevens)</a></p>
|
||
<h3 id="salesforce-health-cloud">Salesforce Health Cloud</h3>
|
||
<p>Includes Male, Female, Other, and Decline to Specify as options for a gender field, and the field can be null. <a href="https://developer.salesforce.com/docs/atlas.en-us.health_cloud_object_reference.meta/health_cloud_object_reference/health_contact_custom_fields.htm#!" target="_blank" rel="external">(Salesforce)</a></p>
|
||
<h3 id="adobe-xdm">Adobe XDM</h3>
|
||
<p>Includes Male, Female, Not Specified, and Non-specific. Defaults to not specifed. <a href="https://experienceleague.adobe.com/docs/experience-platform/xdm/field-groups/profile/demographic-details.html" target="_blank" rel="external">(Adobe)</a> <a href="https://github.com/adobe/xdm/blob/master/components/datatypes/person/person.schema.json#L50" :target="_blank">(Adobe)</a></p>
|
||
<h3 id="epic-healthcare-emr">Epic Healthcare EMR</h3>
|
||
<p>Uses three different fields: sex assigned at birth, legal sex and gender identity. <a href="https://www.wired.com/story/the-battle-to-get-gender-identity-into-your-health-records/" target="_blank" rel="external">(Landman, 2017)</a></p>
|
||
|
||
</article>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<nav aria-label="pagination">
|
||
<ol class="pagination post-pagination">
|
||
|
||
<li class="older">
|
||
<a href="/five-of-them/">
|
||
<i class="fa-solid fa-hand-point-left" aria-hidden="true"></i> five of them
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li class="newer">
|
||
<a href="/nonbinary-flag/">
|
||
nonbinary flag <i class="fa-solid fa-hand-point-right" aria-hidden="true"></i>
|
||
</a>
|
||
</li>
|
||
|
||
</ol>
|
||
</nav>
|
||
|
||
|
||
|
||
<hr>
|
||
|
||
|
||
|
||
|
||
<section class="related-posts">
|
||
<h2 id="related-posts">related posts</h2>
|
||
<ol id="postlist">
|
||
|
||
<li class="post">
|
||
<a class="postlink" href="/butch-hands-pattern/">
|
||
|
||
<img src="/img/butch-hands.jpg" alt="Hands wearing a pair of pink and grey gloves with convertable mitten tops." loading="lazy" decoding="async" width="1000" height="750">
|
||
|
||
<h2 id="butch-hands-pattern">butch hands pattern</h2>
|
||
<ul class="postlist-tags">
|
||
|
||
<li>knit</li>
|
||
|
||
<li>highlight</li>
|
||
|
||
</ul>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="post">
|
||
<a class="postlink" href="/greeting-loons/">
|
||
|
||
<img src="/img/greeting-loons.jpg" alt="A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards." loading="lazy" decoding="async" width="1000" height="750">
|
||
|
||
<h2 id="greeting-loons">greeting loons</h2>
|
||
<ul class="postlist-tags">
|
||
|
||
<li>card</li>
|
||
|
||
<li>print</li>
|
||
|
||
<li>highlight</li>
|
||
|
||
</ul>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="post">
|
||
<a class="postlink" href="/trans-rights-skull/">
|
||
|
||
<img src="/img/trans-rights-print.jpg" alt="A print in mostly black ink of a smiling skull with a speech bubble. In pink and blue, the speech bubble reads 'trans rights!'" loading="lazy" decoding="async" width="1000" height="750">
|
||
|
||
<h2 id="trans-rights-skull">trans rights skull</h2>
|
||
<ul class="postlist-tags">
|
||
|
||
<li>print</li>
|
||
|
||
<li>card</li>
|
||
|
||
<li>sticker</li>
|
||
|
||
<li>pin</li>
|
||
|
||
<li>gender</li>
|
||
|
||
</ul>
|
||
</a>
|
||
</li>
|
||
|
||
</ol>
|
||
|
||
</section>
|
||
|
||
|
||
</heading-anchors>
|
||
|
||
</main>
|
||
|
||
<footer>
|
||
<ul>
|
||
<li>
|
||
<a href="/colophon/">
|
||
colophon
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/" title="go home" aria-label="go home | hello hello from Lee Cattarin in 2026">
|
||
hello hello from Lee Cattarin in 2026</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="https://heckin.technology/inherentlee/leecat.art" title="source code" aria-label="source code" target="_blank" rel="external">
|
||
src
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</footer>
|
||
|
||
|
||
<!-- This page `/gender-in-data-models/` was built on 2026-02-20T22:35:37.909Z -->
|
||
<body>
|
||
</body></body></html>
|
