A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 52KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the `title` element
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>What makes writing more readable? (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://pudding.cool/2022/02/plain/">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>What makes writing more readable?</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://pudding.cool/2022/02/plain/" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <div class="toggle svelte-1k1jl04"><p class="sr-only">The following is a toggle that allows you to change whether the text is standard or translated
  71. into plain language. Press the p key at any time to switch between standard and plain language
  72. versions of the article. If you are using a screen reader, you will need to disable your the quick
  73. navigation keyboard commands in order for the P key to function.
  74. </p>
  75. <p class="toggle toggle--inner svelte-1nyzcas"><span class="label svelte-1nyzcas" id="toggle-471912">Plain Language</span>
  76. <button role="switch" aria-checked="false" aria-labelledby="toggle-471912" class="svelte-1nyzcas"><span class="svelte-1nyzcas">on</span>
  77. <span class="svelte-1nyzcas">off</span></button></p>
  78. <p aria-hidden class="use-keyboard plain-style svelte-1nyzcas">(Or use the "p" key)</p></div>
  79. <section id="part-1" class="svelte-192zsyu">
  80. <div class="sr-only"><p>Writing text that can be understood by as many people as possible seems like an obvious best practice. But from news media to legal guidance to academic research, the way we write often creates barriers to who can read it. Plain language—a style of writing that uses simplified sentences, everyday vocabulary, and clear structure—aims to remove those barriers.</p></div>
  81. <div aria-hidden class="svelte-1xg41jv outer">
  82. <div class="svelte-1xg41jv inner show-standard"><div class="text standard svelte-1xg41jv"><p class="svelte-1xg41jv">Writing text that can be understood by as many people as possible seems like an obvious best practice. But from news media to legal guidance to academic research, the way we write often creates barriers to who can read it. Plain language—a style of writing that uses simplified sentences, everyday vocabulary, and clear structure—aims to remove those barriers.</p>
  83. </div><button class="text plain svelte-1xg41jv faded"><p class="svelte-1xg41jv">Good writing is easy to read. But a lot of writing is hard to read. Some people can’t read hard writing. Plain language fixes this problem. It makes writing easy to read for more people.</p>
  84. </button></div>
  85. </div><div class="sr-only"><p><span class="tap-icon"></span><strong>You can see it in action right here!</strong> Click the text next to each paragraph to read it in <span class="plain-style">plain language</span>.</p></div>
  86. <div aria-hidden class="svelte-1xg41jv outer no-plain">
  87. <div class="svelte-1xg41jv inner info-box"><p class="svelte-1xg41jv"><span class="tap-icon"></span><strong>You can see it in action right here!</strong> Click the text next to each paragraph to read it in <span class="plain-style">plain language</span>.</p></div>
  88. </div><div class="sr-only"><p>You can also use the toggle on the top right to switch <strong>everything</strong> to <span class="plain-style">plain language</span>. Or use the <span class="plain-style">“p”</span> key on your keyboard.</p></div>
  89. <div aria-hidden class="svelte-1xg41jv outer no-plain">
  90. <div class="svelte-1xg41jv inner info-box"><p class="svelte-1xg41jv">You can also use the toggle on the top right to switch <strong>everything</strong> to <span class="plain-style">plain language</span>. Or use the <span class="plain-style">“p”</span> key on your keyboard.</p></div>
  91. </div>
  92. <div aria-hidden class="svelte-1xg41jv outer">
  93. <div class="svelte-1xg41jv inner show-standard"><div class="text standard svelte-1xg41jv"><p class="svelte-1xg41jv">Plain language is useful for everyone, but especially for those who are often denied the opportunity to engage with and comment on public writing. This includes the <a href="https://www.ncld.org/research/state-of-learning-disabilities">20% of the population with learning disabilities</a>, a number of the <a href="https://ici-s.umn.edu/files/aCHyYaFjMi/risp_2017">more than 7 million people in the US</a> with intellectual disabilities (ID), readers for whom English is not a first language and people with limited access to education, among others.</p>
  94. </div><button class="text plain svelte-1xg41jv faded"><p class="svelte-1xg41jv">Plain language is helpful for everyone. But it is really good for people who may find other kinds of writing hard to read. That includes:</p><ul><li>People with learning disabilities.</li><li>People with intellectual disabilities (ID).</li><li>People who are learning to speak English.</li><li>People who did not go to school or went to school less than they wanted to.</li>
  95. </ul>
  96. </button></div>
  97. </div><div class="sr-only"><p>These audiences are routinely excluded from public dialogues, including dialogues about themselves. People with disabilities are also often excluded from writing or sharing their own stories first-hand due to lower vocabulary skills, learning differences, and intellectual disabilities. For example, throughout much of US history, people with ID <a href="https://ncd.gov/sites/default/files/NCD_Turning-Rights-into-Reality_508_0.pdf">have had decisions made on their behalf</a> based on the presumption that they do not and cannot understand. This, on top of discriminatory attitudes and stigma, has led to <a href="https://www.google.com/url?q=http://nosmag.org/mental-age-theory-hurts-people-with-intellectual-disabilities/&amp;sa=D&amp;source=docs&amp;ust=1641598391812179&amp;usg=AOvVaw1oFiTrpzcEMoYjnn3cB96G">infantilization</a>, <a href="https://journals.sagepub.com/doi/full/10.1177/1744629518767001">institutionalization and eugenic sterilization</a>.</p></div>
  98. <div aria-hidden class="svelte-1xg41jv outer">
  99. <div class="svelte-1xg41jv inner show-standard"><div class="text standard svelte-1xg41jv"><p class="svelte-1xg41jv">These audiences are routinely excluded from public dialogues, including dialogues about themselves. People with disabilities are also often excluded from writing or sharing their own stories first-hand due to lower vocabulary skills, learning differences, and intellectual disabilities. For example, throughout much of US history, people with ID <a href="https://ncd.gov/sites/default/files/NCD_Turning-Rights-into-Reality_508_0.pdf">have had decisions made on their behalf</a> based on the presumption that they do not and cannot understand. This, on top of discriminatory attitudes and stigma, has led to <a href="https://www.google.com/url?q=http://nosmag.org/mental-age-theory-hurts-people-with-intellectual-disabilities/&amp;sa=D&amp;source=docs&amp;ust=1641598391812179&amp;usg=AOvVaw1oFiTrpzcEMoYjnn3cB96G">infantilization</a>, <a href="https://journals.sagepub.com/doi/full/10.1177/1744629518767001">institutionalization and eugenic sterilization</a>.</p>
  100. </div><button class="text plain svelte-1xg41jv faded"><p class="svelte-1xg41jv">These groups of people get left out of the conversation a lot. Even when the conversation is about them.</p><p class="svelte-1xg41jv">For example, many people think people with ID don’t understand how to make choices for themselves. Nondisabled people make choices for them. These choices sometimes hurt people with ID. Throughout history, many people with ID have been:</p><ul><li>Treated like children.</li><li>Forced to live in institutions, group homes, and nursing homes.</li><li>Forced to have surgery so they could not have children.</li>
  101. </ul>
  102. </button></div>
  103. </div><div class="sr-only"><p>Additionally, there is a tendency to censor content for these audiences rather than explain it, which can contribute to continued disparities, like the <a href="https://thearc.org/wp-content/uploads/forchapters/Sexual%20Violence.pdf">higher rate</a> at which people with ID experience sexual violence than nondisabled people.</p></div>
  104. <div aria-hidden class="svelte-1xg41jv outer">
  105. <div class="svelte-1xg41jv inner show-standard"><div class="text standard svelte-1xg41jv"><p class="svelte-1xg41jv">Additionally, there is a tendency to censor content for these audiences rather than explain it, which can contribute to continued disparities, like the <a href="https://thearc.org/wp-content/uploads/forchapters/Sexual%20Violence.pdf">higher rate</a> at which people with ID experience sexual violence than nondisabled people.</p>
  106. </div><button class="text plain svelte-1xg41jv faded"><p class="svelte-1xg41jv">Writers will censor writing for these groups. To censor something means to take out information the writer thinks is not appropriate. Taking out information can make some problems worse.</p><p class="svelte-1xg41jv">For example, people with ID experience sexual violence more than nondisabled people. But some writers think people with ID should not read about sex or sexual violence. So, readers don’t have all the information they need.</p>
  107. </button></div>
  108. </div><div class="sr-only"><p>The benefits of plain language aren’t limited to universally challenging texts like legal documents and tax forms. Even everyday writing, like news articles, can still pose a barrier for some readers.</p></div>
  109. <div aria-hidden class="svelte-1xg41jv outer">
  110. <div class="svelte-1xg41jv inner show-standard"><div class="text standard svelte-1xg41jv"><p class="svelte-1xg41jv">The benefits of plain language aren’t limited to universally challenging texts like legal documents and tax forms. Even everyday writing, like news articles, can still pose a barrier for some readers.</p>
  111. </div><button class="text plain svelte-1xg41jv faded"><p class="svelte-1xg41jv">Some kinds of writing are hard for everyone to read, like tax forms. But everyday writing, like the news, can be hard to read too.</p>
  112. </button></div>
  113. </div><p class="sr-only"></p>
  114. <div aria-hidden class="svelte-1xg41jv outer no-plain">
  115. <p class="svelte-1xg41jv inner"><h2 class="text svelte-1xg41jv">How does a human assess readability?</h2></p>
  116. </div><div class="sr-only"><p>Let’s walk through how Rebecca, an expert in plain language, translates a text to be more readable. We'll use an excerpt from her <a href="https://www.propublica.org/article/arizona-promised-to-help-people-with-developmental-disabilities-but-some-had-to-wait-a-long-time-some-did-not-get-help-at-all-plain-text">translation</a> of a <a href="https://www.propublica.org/article/people-with-developmental-disabilities-were-promised-help-instead-they-face-delays-and-denials">ProPublica article</a> by Amy Silverman in the following example.</p></div>
  117. <div aria-hidden class="svelte-1xg41jv outer">
  118. <div class="svelte-1xg41jv inner show-standard"><div class="text standard svelte-1xg41jv"><p class="svelte-1xg41jv">Let’s walk through how Rebecca, an expert in plain language, translates a text to be more readable. We'll use an excerpt from her <a href="https://www.propublica.org/article/arizona-promised-to-help-people-with-developmental-disabilities-but-some-had-to-wait-a-long-time-some-did-not-get-help-at-all-plain-text">translation</a> of a <a href="https://www.propublica.org/article/people-with-developmental-disabilities-were-promised-help-instead-they-face-delays-and-denials">ProPublica article</a> by Amy Silverman in the following example.</p>
  119. </div><button class="text plain svelte-1xg41jv faded"><p class="svelte-1xg41jv">Here is an example for how to make writing easier to read. Rebecca wrote this example. She is an expert in plain language. This quote is from a news article. Amy Silverman wrote it for ProPublica. Rebecca wrote it in plain language.</p>
  120. </button></div>
  121. </div><div class="sr-only"><p><span class="tap-icon"></span><strong>Read the translation below.</strong> Click the <span class="highlight">highlights</span> to see what Rebecca thinks.</p></div>
  122. <div aria-hidden class="svelte-1xg41jv outer no-plain">
  123. <div class="svelte-1xg41jv inner info-box"><p class="svelte-1xg41jv"><span class="tap-icon"></span><strong>Read the translation below.</strong> Click the <span class="highlight">highlights</span> to see what Rebecca thinks.</p></div>
  124. </div><figure><figcaption class="sr-only">An example of translating text from standard to plain language where you can select Rebecca's
  125. comments to learn more about her translation process.
  126. </figcaption>
  127. <h3 class="svelte-1yv5b92">Plain language translating: side-by-side comparison</h3>
  128. <div class="container svelte-1yv5b92"><div class="texts svelte-1yv5b92">
  129. <div class="after svelte-1yv5b92"><p class="head svelte-1yv5b92">PLAIN LANGUAGE</p>
  130. <p class="plain-style svelte-1yv5b92"><span class="after-step" id="after-0">Kyra is autistic and deaf.</span> <span class="after-step" id="after-1">She was born early.</span> <span class="after-step" id="after-2">She was very small when she was born.</span> <span class="after-step" id="after-3">She has trouble seeing, hearing, eating and sleeping.</span> <span class="after-step" id="after-4">Her hand shakes so she does not do sign language.</span> <span class="after-step" id="after-5">Her parents think she knows some signs.</span></p></div></div>
  131. <p class="description-title svelte-1yv5b92">Rebecca's comments</p>
  132. </div>
  133. <div class="sr-only"><p>Click the <span class="highlight">highlighted</span> text to see Rebecca's comments.</p></div>
  134. <div aria-hidden class="svelte-1xg41jv outer">
  135. <div class="svelte-1xg41jv inner show-standard"><div class="text standard svelte-1xg41jv"><p class="svelte-1xg41jv">Click the <span class="highlight">highlighted</span> text to see Rebecca's comments.</p>
  136. </div><button class="text plain svelte-1xg41jv faded"><p class="svelte-1xg41jv">Click the <span class="highlight">highlighted</span> text to see Rebecca's comments.</p>
  137. </button></div>
  138. </div>
  139. </figure><details class="svelte-192zsyu"><summary class="svelte-192zsyu">More about Rebecca’s translation process</summary>
  140. <div class="sr-only"><p>When doing a plain language translation, my first step is always to do a close read of the original text. I identify the main points, the order information is presented, and any terms or concepts that I think will need to be defined or replaced. I always think to myself “what does this sentence/idea/concept assume the reader already knows?” There is so much implied in how we write, and plain language should aim to make the implicit more explicit.</p></div>
  141. <div aria-hidden class="svelte-1xg41jv outer deep-dive">
  142. <div class="svelte-1xg41jv inner show-standard"><div class="text standard svelte-1xg41jv"><p class="svelte-1xg41jv">When doing a plain language translation, my first step is always to do a close read of the original text. I identify the main points, the order information is presented, and any terms or concepts that I think will need to be defined or replaced. I always think to myself “what does this sentence/idea/concept assume the reader already knows?” There is so much implied in how we write, and plain language should aim to make the implicit more explicit.</p>
  143. </div><button class="text plain svelte-1xg41jv faded"><p class="svelte-1xg41jv">My first step is to read the whole paragraph. I look for:</p><ul><li>The main points.</li><li>The order things are written in.</li><li>Any words or ideas that I will need to explain.</li>
  144. </ul><p class="svelte-1xg41jv">A lot of writing assumes the reader already knows something about the topic. Plain language should not assume that. I will explain things fully.</p>
  145. </button></div>
  146. </div><div class="sr-only"><p>Once I start translating, I typically take a paragraph-by-paragraph approach rather than sentence-by-sentence, because often I will need to re-order information, add definitions or examples, or reintroduce characters and ideas at the top of a new paragraph. Focusing too much on the sentence-level translation can mean losing sight of the bigger picture.</p></div>
  147. <div aria-hidden class="svelte-1xg41jv outer deep-dive">
  148. <div class="svelte-1xg41jv inner show-standard"><div class="text standard svelte-1xg41jv"><p class="svelte-1xg41jv">Once I start translating, I typically take a paragraph-by-paragraph approach rather than sentence-by-sentence, because often I will need to re-order information, add definitions or examples, or reintroduce characters and ideas at the top of a new paragraph. Focusing too much on the sentence-level translation can mean losing sight of the bigger picture.</p>
  149. </div><button class="text plain svelte-1xg41jv faded"><p class="svelte-1xg41jv">When I write something in plain language, I don’t take every sentence from the original writing. I look at the big ideas. I:</p><ul><li>Put things in a different order.</li><li>Add definitions and examples.</li><li>Remind the reader about key characters and ideas.</li>
  150. </ul>
  151. </button></div>
  152. </div>
  153. </details>
  154. </section>
  155. <section id="part-2" class="svelte-192zsyu"><h2 class="svelte-192zsyu">How do algorithms try to assess readability?</h2>
  156. <div class="sr-only"><p>As more people have recognized the practical value of plain language, researchers have sought to quantify the “plainness” of writing through readability formulas—mathematical models that assign numerical scores to text, indicating how understandable they are.</p></div>
  157. <div aria-hidden class="svelte-1xg41jv outer">
  158. <div class="svelte-1xg41jv inner show-standard"><div class="text standard svelte-1xg41jv"><p class="svelte-1xg41jv">As more people have recognized the practical value of plain language, researchers have sought to quantify the “plainness” of writing through readability formulas—mathematical models that assign numerical scores to text, indicating how understandable they are.</p>
  159. </div><button class="text plain svelte-1xg41jv faded"><p class="svelte-1xg41jv">Researchers try to measure how easy something is to read. They use math to give the writing a score. The score tells us how easy something is to read. These are called “readability scores.”</p>
  160. </button></div>
  161. </div><div class="sr-only"><p>Though most readability formulas were designed to offer rough difficulty estimates for specific groups of readers, their usage varies greatly, with the Agency for Healthcare Research and Quality <a href="https://www.ahrq.gov/talkingquality/resources/writing/tip6.html">warning</a> that “these formulas are often interpreted and used in ways that go well beyond what they measure.”</p></div>
  162. <div aria-hidden class="svelte-1xg41jv outer">
  163. <div class="svelte-1xg41jv inner show-standard"><div class="text standard svelte-1xg41jv"><p class="svelte-1xg41jv">Though most readability formulas were designed to offer rough difficulty estimates for specific groups of readers, their usage varies greatly, with the Agency for Healthcare Research and Quality <a href="https://www.ahrq.gov/talkingquality/resources/writing/tip6.html">warning</a> that “these formulas are often interpreted and used in ways that go well beyond what they measure.”</p>
  164. </div><button class="text plain svelte-1xg41jv faded"><p class="svelte-1xg41jv">Readability scores just give us an “estimate” about how hard something is to read. That means the scores are not perfect. But they give us a good idea about how hard it might be for different groups of people to read something.</p><p class="svelte-1xg41jv">But the Agency for Healthcare Research and Quality said, “these formulas are often interpreted and used in ways that go well beyond what they measure.” This quote means people use these scores in ways they were not made to be used.</p>
  165. </button></div>
  166. </div><div class="sr-only"><p>Moreover, the simplicity of readability checkers has enabled their widespread adoption. Military engineers use them to help write technical documents. Governments and doctors use them to guide communication for a general audience. Schools and textbook manufacturers use them to tailor reading assignments to particular grade levels and students.</p></div>
  167. <div aria-hidden class="svelte-1xg41jv outer">
  168. <div class="svelte-1xg41jv inner show-standard"><div class="text standard svelte-1xg41jv"><p class="svelte-1xg41jv">Moreover, the simplicity of readability checkers has enabled their widespread adoption. Military engineers use them to help write technical documents. Governments and doctors use them to guide communication for a general audience. Schools and textbook manufacturers use them to tailor reading assignments to particular grade levels and students.</p>
  169. </div><button class="text plain svelte-1xg41jv faded"><p class="svelte-1xg41jv">Readability scores are easy to understand. Many people use these scores to help them write. Some groups that use readability scores are:</p><ul><li>The military.</li><li>The government.</li><li>Doctors.</li><li>Schools.</li>
  170. </ul>
  171. </button></div>
  172. </div><div class="sr-only"><p>To better understand how readability scores work—and how they can fail—let’s look at three representative examples.</p></div>
  173. <div aria-hidden class="svelte-1xg41jv outer">
  174. <div class="svelte-1xg41jv inner show-standard"><div class="text standard svelte-1xg41jv"><p class="svelte-1xg41jv">To better understand how readability scores work—and how they can fail—let’s look at three representative examples.</p>
  175. </div><button class="text plain svelte-1xg41jv faded"><p class="svelte-1xg41jv">Let’s look at three examples of readability scores. They can help us understand how these scores work and how they can fail.</p>
  176. </button></div>
  177. </div><p class="sr-only"></p>
  178. <div aria-hidden class="svelte-1xg41jv outer no-plain">
  179. <p class="svelte-1xg41jv inner"><h3 class="text svelte-1xg41jv">Algorithm #1: Syllable Count</h3></p>
  180. </div><div class="sr-only"><p>The Flesch-Kincaid Grade level formula looks, in part, at syllable count, based on the idea that words with fewer syllables are easier to understand.</p></div>
  181. <div aria-hidden class="svelte-1xg41jv outer">
  182. <div class="svelte-1xg41jv inner show-standard"><div class="text standard svelte-1xg41jv"><p class="svelte-1xg41jv">The Flesch-Kincaid Grade level formula looks, in part, at syllable count, based on the idea that words with fewer syllables are easier to understand.</p>
  183. </div><button class="text plain svelte-1xg41jv faded"><p class="svelte-1xg41jv">The Flesch-Kincaid formula measures two things:</p><ul><li>How long words are.</li><li>How many words are in a sentence.</li>
  184. </ul><p class="svelte-1xg41jv">The formula says the shorter the words and sentence, the easier it is to read.</p>
  185. </button></div>
  186. </div><figure class="container svelte-18drwk1"><figcaption class="sr-only">An interactive showing what the Flesch-Kincaid algorithm considers a easy, medium, and hard
  187. sentence. The algorithm deems sentences with lower syllable counts to be easier, so when long
  188. multisyllabic words are added (even if they are easy words), the algorithm says it's a hard
  189. sentence. If we add short but obscure words, the algorithm thinks it's an easier sentence. We
  190. see that the Flesch-Kincaid algorithm isn't able to handle much complexity when it comes to
  191. assessing readability.</figcaption>
  192. <h3 class="svelte-18drwk1">What happens if we only care about <strong>syllables</strong></h3>
  193. <p class="reading-level svelte-18drwk1">The below text is at a <span class="grade svelte-18drwk1">2.34 (2nd grade)</span>
  194. grade reading level according to Flesch-Kincaid</p>
  195. <div class="container svelte-9tsnz9"><p class="spacer svelte-9tsnz9">The quick brown fox jumped over the lazy dog.</p>
  196. <p class="text hide svelte-9tsnz9" aria-hidden><span id="Flesch-Kincaid-The-0">The </span><span id="Flesch-Kincaid-dun-0">dun </span><span id="Flesch-Kincaid-fox-0">fox </span><span id="Flesch-Kincaid-cleared-0">cleared </span><span id="Flesch-Kincaid-that-0">that </span><span id="Flesch-Kincaid-slouch-0">slouch </span><span id="Flesch-Kincaid-of-0">of </span><span id="Flesch-Kincaid-a-0">a </span><span id="Flesch-Kincaid-dog-0">dog </span><span id="Flesch-Kincaid-at-0">at </span><span id="Flesch-Kincaid-full-0">full </span><span id="Flesch-Kincaid-tilt-0">tilt. </span></p>
  197. <p class="text hide svelte-9tsnz9" aria-hidden><span id="Flesch-Kincaid-The-1">The </span><span id="Flesch-Kincaid-quick-1">quick </span><span id="Flesch-Kincaid-brown-1">brown </span><span id="Flesch-Kincaid-fox-1">fox </span><span id="Flesch-Kincaid-jumped-1">jumped </span><span id="Flesch-Kincaid-over-1">over </span><span id="Flesch-Kincaid-the-1">the </span><span id="Flesch-Kincaid-lazy-1">lazy </span><span id="Flesch-Kincaid-dog-1">dog. </span></p>
  198. <p class="text hide svelte-9tsnz9" aria-hidden><span id="Flesch-Kincaid-The-2">The </span><span id="Flesch-Kincaid-wonderful-2">wonderful, </span><span id="Flesch-Kincaid-beautiful-2">beautiful </span><span id="Flesch-Kincaid-fox-2">fox </span><span id="Flesch-Kincaid-jumped-2">jumped </span><span id="Flesch-Kincaid-over-2">over </span><span id="Flesch-Kincaid-the-2">the </span><span id="Flesch-Kincaid-unbelievably-2">unbelievably </span><span id="Flesch-Kincaid-lazy-2">lazy </span><span id="Flesch-Kincaid-dog-2">dog. </span></p>
  199. </div>
  200. <p class="explanation svelte-18drwk1">The two factors considered by Flesch–Kincaid are number of words per sentence and number of syllables per word. This is a short sentence with only two multi-syllable words (<strong>“over”</strong> and <strong>“lazy”</strong>), so the Flesch–Kincaid formula assigns it a low grade level.</p>
  201. </figure><details class="svelte-192zsyu"><summary class="svelte-192zsyu">More about this algorithm</summary>
  202. <div class="sr-only"><p>The author Rudolf Flesch made a career as an early evangelist for plain language in the mid-20th century, promoting his namesake Flesch Reading-Ease Test and its cousin, the Flesch-Kincaid Grade Level Formula, developed in 1975 under contract with the U.S. Navy. It was calibrated on the reading comprehension scores of 531 enlisted Navy personnel, in order to measure readability in the specific context of technical communication. Today, perhaps thanks to its misleading name, the F-K Grade Level Formula is used in schools to estimate reading difficulty for children, overlooking the obvious fact that elementary school students and naval cadets may not agree on whether the same text is easy or difficult to understand.</p></div>
  203. <div aria-hidden class="svelte-1xg41jv outer deep-dive">
  204. <div class="svelte-1xg41jv inner show-standard"><div class="text standard svelte-1xg41jv"><p class="svelte-1xg41jv">The author Rudolf Flesch made a career as an early evangelist for plain language in the mid-20th century, promoting his namesake Flesch Reading-Ease Test and its cousin, the Flesch-Kincaid Grade Level Formula, developed in 1975 under contract with the U.S. Navy. It was calibrated on the reading comprehension scores of 531 enlisted Navy personnel, in order to measure readability in the specific context of technical communication. Today, perhaps thanks to its misleading name, the F-K Grade Level Formula is used in schools to estimate reading difficulty for children, overlooking the obvious fact that elementary school students and naval cadets may not agree on whether the same text is easy or difficult to understand.</p>
  205. </div><button class="text plain svelte-1xg41jv faded"><p class="svelte-1xg41jv">Rudolf Flesch was an author. He lived in the 1900s. He thought plain language was very important. He made two scores to measure how easy something was to read:</p><ul><li>The Flesch Reading-Ease Test</li><li>The Flesch-Kincaid Grade Level Formula</li>
  206. </ul><p class="svelte-1xg41jv">Rudolf Flesch created the Flesch-Kincaid Grade Level Formula when he was working for the Navy. He measured how well 531 people in the Navy could read technical communications. Technical communications have special information that people in the Navy need to do their jobs.</p><p class="svelte-1xg41jv">Now we use the Flesch-Kincaid Grade Level Formula to measure readings for children. But the score has never been tested with children.</p>
  207. </button></div>
  208. </div>
  209. </details><p class="sr-only"></p>
  210. <div aria-hidden class="svelte-1xg41jv outer no-plain">
  211. <p class="svelte-1xg41jv inner"><h3 class="text svelte-1xg41jv">Algorithm #2: Difficult words</h3></p>
  212. </div><div class="sr-only"><p>The Dale-Chall Readability Formula considers the proportion of difficult words, where it deems a word “difficult” if it is not on a list of 3,000 words familiar to fourth-grade students.</p></div>
  213. <div aria-hidden class="svelte-1xg41jv outer">
  214. <div class="svelte-1xg41jv inner show-standard"><div class="text standard svelte-1xg41jv"><p class="svelte-1xg41jv">The Dale-Chall Readability Formula considers the proportion of difficult words, where it deems a word “difficult” if it is not on a list of 3,000 words familiar to fourth-grade students.</p>
  215. </div><button class="text plain svelte-1xg41jv faded"><p class="svelte-1xg41jv">Dale-Chall is another readability score. It measures two things:</p><ul><li>How long each sentence is.</li><li>The number of easy or hard words.</li>
  216. </ul><p class="svelte-1xg41jv">Dale-Chall uses a list of 3,000 easy words. Dale-Chall says these are words most 4th graders know. Any other word is a hard word.</p>
  217. </button></div>
  218. </div><div class="sr-only"><p>One risk in the use of vocabulary lists is that the vocabulary of the readers surveyed to create them may not match the vocabulary of the intended audience. The original Dale-Chall list of “familiar words” was compiled in 1948 through a survey of U.S. fourth-graders, and even the most recent update to the list in 1995 retains obsolete words like “Negro” and “homely” while omitting “computer.”</p></div>
  219. <div aria-hidden class="svelte-1xg41jv outer">
  220. <div class="svelte-1xg41jv inner show-standard"><div class="text standard svelte-1xg41jv"><p class="svelte-1xg41jv">One risk in the use of vocabulary lists is that the vocabulary of the readers surveyed to create them may not match the vocabulary of the intended audience. The original Dale-Chall list of “familiar words” was compiled in 1948 through a survey of U.S. fourth-graders, and even the most recent update to the list in 1995 retains obsolete words like “Negro” and “homely” while omitting “computer.”</p>
  221. </div><button class="text plain svelte-1xg41jv faded"><p class="svelte-1xg41jv">But not everyone knows the same words. Dale-Chall made the first easy word list in 1948. They updated the list in 1995.</p><p class="svelte-1xg41jv">We don’t use the same words now that we did back then. The list has words most people don’t use now, like “Negro” and “homely.” And it doesn’t have words a lot of people use now, like “computer.”</p>
  222. </button></div>
  223. </div><figure class="container svelte-18drwk1"><figcaption class="sr-only">An interactive showing what the Dale-Chall algorithm considers a easy, medium, and hard
  224. sentence. Dale-Chall considers average sentence length along with how many difficult words are
  225. used, where “difficult” words are words that don't appear on the Dale-Chall list. If we add
  226. words that are unfamiliar (like dinosaur or dude) the algorithm says it's a difficult
  227. sentence. If we simply add a sentence that just contains the exclamation "Yes!", that lowers
  228. the average sentence length and makes the algorithm say it's an easier sentence. We see that
  229. the Dale-Chall algorithm isn't able to handle much complexity when it comes to assessing
  230. readability.</figcaption>
  231. <h3 class="svelte-18drwk1">What happens if we only care about <strong>“difficult” words</strong></h3>
  232. <p class="reading-level svelte-18drwk1">The below text is at a <span class="grade svelte-18drwk1">0.45 (4th grade or below)</span>
  233. grade reading level according to Dale-Chall</p>
  234. <div class="container svelte-9tsnz9"><p class="spacer svelte-9tsnz9">The quick brown fox jumped over the lazy dog.</p>
  235. <p class="text hide svelte-9tsnz9" aria-hidden><span id="Dale-Chall-Yes-0">Yes! </span><span id="Dale-Chall-The-0">The </span><span id="Dale-Chall-quick-0">quick </span><span id="Dale-Chall-brown-0">brown </span><span id="Dale-Chall-fox-0">fox </span><span id="Dale-Chall-jumped-0">jumped </span><span id="Dale-Chall-over-0">over </span><span id="Dale-Chall-the-0">the </span><span id="Dale-Chall-lazy-0">lazy </span><span id="Dale-Chall-dog-0">dog. </span></p>
  236. <p class="text hide svelte-9tsnz9" aria-hidden><span id="Dale-Chall-The-1">The </span><span id="Dale-Chall-quick-1">quick </span><span id="Dale-Chall-brown-1">brown </span><span id="Dale-Chall-fox-1">fox </span><span id="Dale-Chall-jumped-1">jumped </span><span id="Dale-Chall-over-1">over </span><span id="Dale-Chall-the-1">the </span><span id="Dale-Chall-lazy-1">lazy </span><span id="Dale-Chall-dog-1">dog. </span></p>
  237. <p class="text hide svelte-9tsnz9" aria-hidden><span id="Dale-Chall-The-2">The </span><span id="Dale-Chall-quick-2">quick </span><span id="Dale-Chall-brown-2">brown </span><span id="Dale-Chall-dinosaur-2">dinosaur </span><span id="Dale-Chall-jumped-2">jumped </span><span id="Dale-Chall-over-2">over </span><span id="Dale-Chall-the-2">the </span><span id="Dale-Chall-lazy-2">lazy </span><span id="Dale-Chall-dude-2">dude. </span></p>
  238. </div>
  239. <p class="explanation svelte-18drwk1">Dale–Chall considers average sentence length along with percentage of difficult words (PDW), where “difficult” words are words that don't appear on the Dale–Chall list. This is a short sentence made entirely of words on the Dale–Chall list, so its ASL score is low and its PDW score is zero, yielding a score of 0.45. Since the formula was calibrated on a group of 4th grade students, all scores below 5.0 are collapsed into a single readability category representing “4th grade and below.”</p>
  240. </figure><p class="sr-only"></p>
  241. <div aria-hidden class="svelte-1xg41jv outer no-plain">
  242. <p class="svelte-1xg41jv inner"><h3 class="text svelte-1xg41jv">Algorithm #3: Algorithmic black boxes</h3></p>
  243. </div><div class="sr-only"><p>More recently, US schools and textbook manufacturers have standardized their curricula on the Lexile Framework for Reading, a set of readability algorithms and vocabulary lists designed to automatically match students with appropriately difficult books. Publishers apply Lexile to their texts to rate their difficulty. A Lexile score of 210 indicates an easy-to-read book, while a score of 1730 indicates a very challenging one. A reading comprehension test assigns a corresponding reading score to each student, after which teachers pair students with texts that have comparable Lexile scores.</p></div>
  244. <div aria-hidden class="svelte-1xg41jv outer">
  245. <div class="svelte-1xg41jv inner show-standard"><div class="text standard svelte-1xg41jv"><p class="svelte-1xg41jv">More recently, US schools and textbook manufacturers have standardized their curricula on the Lexile Framework for Reading, a set of readability algorithms and vocabulary lists designed to automatically match students with appropriately difficult books. Publishers apply Lexile to their texts to rate their difficulty. A Lexile score of 210 indicates an easy-to-read book, while a score of 1730 indicates a very challenging one. A reading comprehension test assigns a corresponding reading score to each student, after which teachers pair students with texts that have comparable Lexile scores.</p>
  246. </div><button class="text plain svelte-1xg41jv faded"><p class="svelte-1xg41jv">Lexile Framework for Reading is another formula to measure how easy something is to read. Schools and textbook writers use Lexile. Lexile helps match students with books they are able to read.</p><p class="svelte-1xg41jv">Here is how it works:</p><ul><li>Lexile scores books. It rates them as easy or hard to read.</li><li>Students take a reading test. It tells them how well they read.</li><li>Teachers give students books that won’t be too easy or too hard for them to read.</li>
  247. </ul>
  248. </button></div>
  249. </div><div class="sr-only"><p>The approach sounds simple enough, but critics have pointed out absurdities in Lexile's results. According to Lexile, The Grapes of Wrath (Lexile score: 680) is easier to understand than the Nancy Drew mystery Nancy's Mysterious Letter (score: 720), but neither of these is as challenging as The Library Mouse (score: 860), a 32-page illustrated children's book.</p></div>
  250. <div aria-hidden class="svelte-1xg41jv outer">
  251. <div class="svelte-1xg41jv inner show-standard"><div class="text standard svelte-1xg41jv"><p class="svelte-1xg41jv">The approach sounds simple enough, but critics have pointed out absurdities in Lexile's results. According to Lexile, The Grapes of Wrath (Lexile score: 680) is easier to understand than the Nancy Drew mystery Nancy's Mysterious Letter (score: 720), but neither of these is as challenging as The Library Mouse (score: 860), a 32-page illustrated children's book.</p>
  252. </div><button class="text plain svelte-1xg41jv faded"><p class="svelte-1xg41jv">But the scores Lexile gives books don’t always make sense. Here’s an example. Lexile says:</p><ul><li>Lexile says that The Grapes of Wrath is a pretty easy book to read. The Grapes of Wrath is a book for adults. It is over 400 pages long and has many complex themes and ideas.</li><li>Lexile says the Nancy Drew book Nancy’s Mysterious Letter is harder to read than The Grapes of Wrath. Nancy Drew books are made for preteens. Most people would consider it much easier to read than The Grapes of Wrath.</li><li>Lexile says The Library Mouse is harder to read than the Nancy Drew book or The Grapes of Wrath. The Library Mouse is a picture book for children.</li>
  253. </ul><p class="svelte-1xg41jv">It does not make sense that a children’s picture book would be harder to read than a book for adults.</p>
  254. </button></div>
  255. </div><figure class="container svelte-19y896n"><figcaption class="sr-only">Images of three book covers arranged by how difficult the Lexile algorithm thinks they are. It
  256. says Grapes of Wrath is the easiest, followed by Nancy's Mysterious Letter, and the hardest is
  257. The Library Mouse, a 32-page illustrated children's book. This doesn't make much sense, most
  258. people would say that Grapes of Wrath is much more difficult than a simple children's book.
  259. </figcaption>
  260. <h3 class="svelte-19y896n">How Lexile scores popular books for children</h3>
  261. <div class="books svelte-19y896n"><div class="book svelte-19y896n"><img src="assets/img/grapes.jpeg" alt="the grapes of wrath cover" class=" svelte-19y896n">
  262. <p class="score svelte-19y896n">680</p>
  263. <p class="grade svelte-19y896n">(5th grade)</p>
  264. </div><div class="book svelte-19y896n"><img src="assets/img/nancy.jpeg" alt="nancy drew cover" class=" svelte-19y896n">
  265. <p class="score svelte-19y896n">720</p>
  266. <p class="grade svelte-19y896n">(7th grade)</p>
  267. </div><div class="book svelte-19y896n"><img src="assets/img/mouse.jpeg" alt="the library mouse cover" class=" svelte-19y896n">
  268. <p class="score svelte-19y896n">860</p>
  269. <p class="grade svelte-19y896n">(10th grade)</p>
  270. </div></div>
  271. </figure><div class="sr-only"><p>How exactly are Lexile scores calculated? Unfortunately for us, the Lexile Framework is the intellectual property of MetaMetrics, the private company that created it, so we can only guess at the secret recipe, but it's a pretty good bet that Lexile scores depend on a mixture of the same factors used in Flesch–Kincaid and other open-source readability measures.</p></div>
  272. <div aria-hidden class="svelte-1xg41jv outer">
  273. <div class="svelte-1xg41jv inner show-standard"><div class="text standard svelte-1xg41jv"><p class="svelte-1xg41jv">How exactly are Lexile scores calculated? Unfortunately for us, the Lexile Framework is the intellectual property of MetaMetrics, the private company that created it, so we can only guess at the secret recipe, but it's a pretty good bet that Lexile scores depend on a mixture of the same factors used in Flesch–Kincaid and other open-source readability measures.</p>
  274. </div><button class="text plain svelte-1xg41jv faded"><p class="svelte-1xg41jv">We don’t know how Lexile decides how hard each book is. MetaMetrics is the company that made Lexile. They do not share what math they do to get their readability scores. But it is probably close to the other formulas we looked at. We know Lexile looks at:</p><ul><li>How long words are.</li><li>How long each sentence is.</li><li>How familiar the words are.</li><li>If things are repeated.</li>
  275. </ul>
  276. </button></div>
  277. </div><div class="sr-only"><p>Formulas based on surface level text properties and word frequency have clear limitations. None of them consider how well organized the information is, or whether the sentences and paragraphs are coherent. None consider the role of grammatical tense. None account for the explanation of acronyms and jargon. None would balk at Jack Torrance's rambling and meaningless draft in The Shining, endlessly repeating “All work and no play makes Jack a dull boy.”</p></div>
  278. <div aria-hidden class="svelte-1xg41jv outer">
  279. <div class="svelte-1xg41jv inner show-standard"><div class="text standard svelte-1xg41jv"><p class="svelte-1xg41jv">Formulas based on surface level text properties and word frequency have clear limitations. None of them consider how well organized the information is, or whether the sentences and paragraphs are coherent. None consider the role of grammatical tense. None account for the explanation of acronyms and jargon. None would balk at Jack Torrance's rambling and meaningless draft in The Shining, endlessly repeating “All work and no play makes Jack a dull boy.”</p>
  280. </div><button class="text plain svelte-1xg41jv faded"><p class="svelte-1xg41jv">None of these formulas are perfect. They don’t measure:</p><ul><li>The order of the sentences.</li><li>If the writing makes sense.</li><li>Grammar.</li><li>If the writer explains hard words and phrases.</li>
  281. </ul><p class="svelte-1xg41jv">These formulas would have no problem with the scene in The Shining where Jack Torrance writes “All work and no play makes Jack a dull boy,” over and over again. They do not check if the writing means anything.</p>
  282. </button></div>
  283. </div><div class="sr-only"><p>But proprietary tech like Lexile has some of the most disconcerting aspects of both worlds. As flawed as Flesch-Kincaid or Dale-Chall, but opaque and unexplainable. The main benefit of the F-K and D-C formulas (and other simple algorithms like Gunning-Fog and SMOG) is their transparency. A broken system locked in a black box can't even offer this.</p></div>
  284. <div aria-hidden class="svelte-1xg41jv outer">
  285. <div class="svelte-1xg41jv inner show-standard"><div class="text standard svelte-1xg41jv"><p class="svelte-1xg41jv">But proprietary tech like Lexile has some of the most disconcerting aspects of both worlds. As flawed as Flesch-Kincaid or Dale-Chall, but opaque and unexplainable. The main benefit of the F-K and D-C formulas (and other simple algorithms like Gunning-Fog and SMOG) is their transparency. A broken system locked in a black box can't even offer this.</p>
  286. </div><button class="text plain svelte-1xg41jv faded"><p class="svelte-1xg41jv">At least we know how Flesch-Kincaid and Dale-Chall work. They are not perfect but we can explain them. We don’t even know what Lexile measures.</p>
  287. </button></div>
  288. </div>
  289. </section>
  290. <div class="svelte-16d9zvc"><h3>Authors' note</h3>
  291. <p>A lot of people helped us write this article.</p><p>Thank you to Zoe Gross and Leah Mapstead for being our expert readers. Zoe and Leah told us how to make the article better. Zoe is Director of Advocacy at the Autistic Self-Advocacy Network. Leah is a disability advocate and actor.</p><p>Thank you to:</p><p>They made our article interactive. They helped brainstorm ideas. They told us how to make our writing better.</p><p>Thank you to Matt Hackert for making sure the article works on a screen reader. Matt leads the Center of Excellence in Nonvisual Accessibility at the National Federation of the Blind.</p><p>Thank you to Amy Silverman for helping come up with the idea for this article.</p><p>You can learn more about Kyra <a href="https://www.propublica.org/article/people-with-developmental-disabilities-were-promised-help-instead-they-face-delays-and-denials">here</a>.</p><p>You can learn more about how to write plain language and Easy Read <a href="https://autisticadvocacy.org/resources/accessibility/easyread/">here</a>, <a href="https://www.plainlanguage.gov/">here</a>, and <a href="https://www.easy-read-online.co.uk/media/10609/making-myself-clear.pdf">here</a>.</p>
  292. </div>
  293. </article>
  294. <hr>
  295. <footer>
  296. <p>
  297. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  298. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  299. </svg> Accueil</a> •
  300. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  301. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  302. </svg> Suivre</a> •
  303. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  304. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  305. </svg> Pro</a> •
  306. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  307. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  308. </svg> Email</a> •
  309. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  310. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  311. </svg> Légal</abbr>
  312. </p>
  313. <template id="theme-selector">
  314. <form>
  315. <fieldset>
  316. <legend><svg class="icon icon-brightness-contrast">
  317. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  318. </svg> Thème</legend>
  319. <label>
  320. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  321. </label>
  322. <label>
  323. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  324. </label>
  325. <label>
  326. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  327. </label>
  328. </fieldset>
  329. </form>
  330. </template>
  331. </footer>
  332. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  333. <script>
  334. function loadThemeForm(templateName) {
  335. const themeSelectorTemplate = document.querySelector(templateName)
  336. const form = themeSelectorTemplate.content.firstElementChild
  337. themeSelectorTemplate.replaceWith(form)
  338. form.addEventListener('change', (e) => {
  339. const chosenColorScheme = e.target.value
  340. localStorage.setItem('theme', chosenColorScheme)
  341. toggleTheme(chosenColorScheme)
  342. })
  343. const selectedTheme = localStorage.getItem('theme')
  344. if (selectedTheme && selectedTheme !== 'undefined') {
  345. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  346. }
  347. }
  348. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  349. window.addEventListener('load', () => {
  350. let hasDarkRules = false
  351. for (const styleSheet of Array.from(document.styleSheets)) {
  352. let mediaRules = []
  353. for (const cssRule of styleSheet.cssRules) {
  354. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  355. continue
  356. }
  357. // WARNING: Safari does not have/supports `conditionText`.
  358. if (cssRule.conditionText) {
  359. if (cssRule.conditionText !== prefersColorSchemeDark) {
  360. continue
  361. }
  362. } else {
  363. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  364. continue
  365. }
  366. }
  367. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  368. }
  369. // WARNING: do not try to insert a Rule to a styleSheet you are
  370. // currently iterating on, otherwise the browser will be stuck
  371. // in a infinite loop…
  372. for (const mediaRule of mediaRules) {
  373. styleSheet.insertRule(mediaRule.cssText)
  374. hasDarkRules = true
  375. }
  376. }
  377. if (hasDarkRules) {
  378. loadThemeForm('#theme-selector')
  379. }
  380. })
  381. </script>
  382. </body>
  383. </html>