Skip to content

Instantly share code, notes, and snippets.

@jpbalarini

jpbalarini/gist:40e4040f4a2bb133b4f8d2241d31c28c

Last active March 13, 2024 21:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jpbalarini/40e4040f4a2bb133b4f8d2241d31c28c to your computer and use it in GitHub Desktop.
Save jpbalarini/40e4040f4a2bb133b4f8d2241d31c28c to your computer and use it in GitHub Desktop.
Download ZIP
test
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<title>PdfLayout</title>
<style>
@page {
size: A4;
margin-top: 56px;
margin-bottom: 15px;
margin-left: 8px;
margin-right: 8px;
}
/*
* CKEditor 5 (v41.2.0) content styles.
* Generated on Wed, 06 Mar 2024 11:21:36 GMT.
* For more information, check out https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/content-styles.html
*/
:root {
--ck-color-image-caption-background: hsl(0, 0%, 97%);
--ck-color-image-caption-text: hsl(0, 0%, 20%);
--ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
--ck-color-mention-text: hsl(341, 100%, 30%);
--ck-color-selector-caption-background: hsl(0, 0%, 97%);
--ck-color-selector-caption-text: hsl(0, 0%, 20%);
--ck-highlight-marker-blue: hsl(201, 97%, 72%);
--ck-highlight-marker-green: hsl(120, 93%, 68%);
--ck-highlight-marker-pink: hsl(345, 96%, 73%);
--ck-highlight-marker-yellow: hsl(60, 97%, 73%);
--ck-highlight-pen-green: hsl(112, 100%, 27%);
--ck-highlight-pen-red: hsl(0, 85%, 49%);
--ck-image-style-spacing: 1.5em;
--ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
--ck-todo-list-checkmark-size: 16px;
}
/* @ckeditor/ckeditor5-table/theme/tablecolumnresize.css */
.ck-content .table .ck-table-resized {
table-layout: fixed;
}
/* @ckeditor/ckeditor5-table/theme/tablecolumnresize.css */
.ck-content .table table {
overflow: hidden;
}
/* @ckeditor/ckeditor5-table/theme/tablecolumnresize.css */
.ck-content .table td,
.ck-content .table th {
overflow-wrap: break-word;
position: relative;
}
/* @ckeditor/ckeditor5-table/theme/tablecaption.css */
.ck-content .table > figcaption {
display: table-caption;
caption-side: top;
word-break: break-word;
text-align: center;
color: var(--ck-color-selector-caption-text);
background-color: var(--ck-color-selector-caption-background);
padding: .6em;
font-size: .75em;
outline-offset: -1px;
}
/* @ckeditor/ckeditor5-table/theme/table.css */
.ck-content .table {
margin: 0.9em auto;
display: table;
}
/* @ckeditor/ckeditor5-table/theme/table.css */
.ck-content .table table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
height: 100%;
border: 1px double hsl(0, 0%, 70%);
}
/* @ckeditor/ckeditor5-table/theme/table.css */
.ck-content .table table td,
.ck-content .table table th {
min-width: 2em;
padding: .4em;
border: 1px solid hsl(0, 0%, 75%);
}
/* @ckeditor/ckeditor5-table/theme/table.css */
.ck-content .table table th {
font-weight: bold;
background: hsla(0, 0%, 0%, 5%);
}
/* @ckeditor/ckeditor5-table/theme/table.css */
.ck-content[dir="rtl"] .table th {
text-align: right;
}
/* @ckeditor/ckeditor5-table/theme/table.css */
.ck-content[dir="ltr"] .table th {
text-align: left;
}
/* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break {
position: relative;
clear: both;
padding: 5px 0;
display: flex;
align-items: center;
justify-content: center;
}
/* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break::after {
content: '';
position: absolute;
border-bottom: 2px dashed hsl(0, 0%, 77%);
width: 100%;
}
/* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break__label {
position: relative;
z-index: 1;
padding: .3em .6em;
display: block;
text-transform: uppercase;
border: 1px solid hsl(0, 0%, 77%);
border-radius: 2px;
font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
font-size: 0.75em;
font-weight: bold;
color: hsl(0, 0%, 20%);
background: hsl(0, 0%, 100%);
box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* @ckeditor/ckeditor5-media-embed/theme/mediaembed.css */
.ck-content .media {
clear: both;
margin: 0.9em 0;
display: block;
min-width: 15em;
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content .todo-list {
list-style: none;
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content .todo-list li {
position: relative;
margin-bottom: 5px;
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content .todo-list li .todo-list {
margin-top: 5px;
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input {
-webkit-appearance: none;
display: inline-block;
position: relative;
width: var(--ck-todo-list-checkmark-size);
height: var(--ck-todo-list-checkmark-size);
vertical-align: middle;
border: 0;
left: -25px;
margin-right: -15px;
right: 0;
margin-left: 0;
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content[dir=rtl] .todo-list .todo-list__label > input {
left: 0;
margin-right: 0;
right: -25px;
margin-left: -15px;
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input::before {
display: block;
position: absolute;
box-sizing: border-box;
content: '';
width: 100%;
height: 100%;
border: 1px solid hsl(0, 0%, 20%);
border-radius: 2px;
transition: 250ms ease-in-out box-shadow;
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input::after {
display: block;
position: absolute;
box-sizing: content-box;
pointer-events: none;
content: '';
left: calc( var(--ck-todo-list-checkmark-size) / 3 );
top: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
width: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
height: calc( var(--ck-todo-list-checkmark-size) / 2.6 );
border-style: solid;
border-color: transparent;
border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0;
transform: rotate(45deg);
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input[checked]::before {
background: hsl(126, 64%, 41%);
border-color: hsl(126, 64%, 41%);
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input[checked]::after {
border-color: hsl(0, 0%, 100%);
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label .todo-list__label__description {
vertical-align: middle;
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label.todo-list__label_without-description input[type=checkbox] {
position: absolute;
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-editor__editable.ck-content .todo-list .todo-list__label > input,
.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input {
cursor: pointer;
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-editor__editable.ck-content .todo-list .todo-list__label > input:hover::before, .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input:hover::before {
box-shadow: 0 0 0 5px hsla(0, 0%, 0%, 0.1);
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input {
-webkit-appearance: none;
display: inline-block;
position: relative;
width: var(--ck-todo-list-checkmark-size);
height: var(--ck-todo-list-checkmark-size);
vertical-align: middle;
border: 0;
left: -25px;
margin-right: -15px;
right: 0;
margin-left: 0;
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-editor__editable.ck-content[dir=rtl] .todo-list .todo-list__label > span[contenteditable=false] > input {
left: 0;
margin-right: 0;
right: -25px;
margin-left: -15px;
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input::before {
display: block;
position: absolute;
box-sizing: border-box;
content: '';
width: 100%;
height: 100%;
border: 1px solid hsl(0, 0%, 20%);
border-radius: 2px;
transition: 250ms ease-in-out box-shadow;
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input::after {
display: block;
position: absolute;
box-sizing: content-box;
pointer-events: none;
content: '';
left: calc( var(--ck-todo-list-checkmark-size) / 3 );
top: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
width: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
height: calc( var(--ck-todo-list-checkmark-size) / 2.6 );
border-style: solid;
border-color: transparent;
border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0;
transform: rotate(45deg);
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input[checked]::before {
background: hsl(126, 64%, 41%);
border-color: hsl(126, 64%, 41%);
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input[checked]::after {
border-color: hsl(0, 0%, 100%);
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-editor__editable.ck-content .todo-list .todo-list__label.todo-list__label_without-description input[type=checkbox] {
position: absolute;
}
/* @ckeditor/ckeditor5-list/theme/list.css */
.ck-content ol {
list-style-type: decimal;
}
/* @ckeditor/ckeditor5-list/theme/list.css */
.ck-content ol ol {
list-style-type: lower-latin;
}
/* @ckeditor/ckeditor5-list/theme/list.css */
.ck-content ol ol ol {
list-style-type: lower-roman;
}
/* @ckeditor/ckeditor5-list/theme/list.css */
.ck-content ol ol ol ol {
list-style-type: upper-latin;
}
/* @ckeditor/ckeditor5-list/theme/list.css */
.ck-content ol ol ol ol ol {
list-style-type: upper-roman;
}
/* @ckeditor/ckeditor5-list/theme/list.css */
.ck-content ul {
list-style-type: disc;
}
/* @ckeditor/ckeditor5-list/theme/list.css */
.ck-content ul ul {
list-style-type: circle;
}
/* @ckeditor/ckeditor5-list/theme/list.css */
.ck-content ul ul ul {
list-style-type: square;
}
/* @ckeditor/ckeditor5-list/theme/list.css */
.ck-content ul ul ul ul {
list-style-type: square;
}
/* @ckeditor/ckeditor5-image/theme/imageresize.css */
.ck-content img.image_resized {
height: auto;
}
/* @ckeditor/ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized {
max-width: 100%;
display: block;
box-sizing: border-box;
}
/* @ckeditor/ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized img {
width: 100%;
}
/* @ckeditor/ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized > figcaption {
display: block;
}
/* @ckeditor/ckeditor5-image/theme/image.css */
.ck-content .image {
display: table;
clear: both;
text-align: center;
margin: 0.9em auto;
min-width: 50px;
}
/* @ckeditor/ckeditor5-image/theme/image.css */
.ck-content .image img {
display: block;
margin: 0 auto;
max-width: 100%;
min-width: 100%;
height: auto;
}
/* @ckeditor/ckeditor5-image/theme/image.css */
.ck-content .image-inline {
/*
* Normally, the .image-inline would have "display: inline-block" and "img { width: 100% }" (to follow the wrapper while resizing).;
* Unfortunately, together with "srcset", it gets automatically stretched up to the width of the editing root.
* This strange behavior does not happen with inline-flex.
*/
display: inline-flex;
max-width: 100%;
align-items: flex-start;
}
/* @ckeditor/ckeditor5-image/theme/image.css */
.ck-content .image-inline picture {
display: flex;
}
/* @ckeditor/ckeditor5-image/theme/image.css */
.ck-content .image-inline picture,
.ck-content .image-inline img {
flex-grow: 1;
flex-shrink: 1;
max-width: 100%;
}
/* @ckeditor/ckeditor5-image/theme/imagecaption.css */
.ck-content .image > figcaption {
display: table-caption;
caption-side: bottom;
word-break: break-word;
color: var(--ck-color-image-caption-text);
background-color: var(--ck-color-image-caption-background);
padding: .6em;
font-size: .75em;
outline-offset: -1px;
}
/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-yellow {
background-color: var(--ck-highlight-marker-yellow);
}
/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-green {
background-color: var(--ck-highlight-marker-green);
}
/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-pink {
background-color: var(--ck-highlight-marker-pink);
}
/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-blue {
background-color: var(--ck-highlight-marker-blue);
}
/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
.ck-content .pen-red {
color: var(--ck-highlight-pen-red);
background-color: transparent;
}
/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
.ck-content .pen-green {
color: var(--ck-highlight-pen-green);
background-color: transparent;
}
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-block-align-left,
.ck-content .image-style-block-align-right {
max-width: calc(100% - var(--ck-image-style-spacing));
}
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-left,
.ck-content .image-style-align-right {
clear: none;
}
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-side {
float: right;
margin-left: var(--ck-image-style-spacing);
max-width: 50%;
}
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-left {
float: left;
margin-right: var(--ck-image-style-spacing);
}
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-center {
margin-left: auto;
margin-right: auto;
}
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-right {
float: right;
margin-left: var(--ck-image-style-spacing);
}
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-block-align-right {
margin-right: 0;
margin-left: auto;
}
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-block-align-left {
margin-left: 0;
margin-right: auto;
}
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content p + .image-style-align-left,
.ck-content p + .image-style-align-right,
.ck-content p + .image-style-side {
margin-top: 0;
}
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-inline.image-style-align-left,
.ck-content .image-inline.image-style-align-right {
margin-top: var(--ck-inline-image-style-spacing);
margin-bottom: var(--ck-inline-image-style-spacing);
}
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-inline.image-style-align-left {
margin-right: var(--ck-inline-image-style-spacing);
}
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-inline.image-style-align-right {
margin-left: var(--ck-inline-image-style-spacing);
}
/* @ckeditor/ckeditor5-block-quote/theme/blockquote.css */
.ck-content blockquote {
overflow: hidden;
padding-right: 1.5em;
padding-left: 1.5em;
margin-left: 0;
margin-right: 0;
font-style: italic;
border-left: solid 5px hsl(0, 0%, 80%);
}
/* @ckeditor/ckeditor5-block-quote/theme/blockquote.css */
.ck-content[dir="rtl"] blockquote {
border-left: 0;
border-right: solid 5px hsl(0, 0%, 80%);
}
/* @ckeditor/ckeditor5-basic-styles/theme/code.css */
.ck-content code {
background-color: hsla(0, 0%, 78%, 0.3);
padding: .15em;
border-radius: 2px;
}
/* @ckeditor/ckeditor5-font/theme/fontsize.css */
.ck-content .text-tiny {
font-size: .7em;
}
/* @ckeditor/ckeditor5-font/theme/fontsize.css */
.ck-content .text-small {
font-size: .85em;
}
/* @ckeditor/ckeditor5-font/theme/fontsize.css */
.ck-content .text-big {
font-size: 1.4em;
}
/* @ckeditor/ckeditor5-font/theme/fontsize.css */
.ck-content .text-huge {
font-size: 1.8em;
}
/* @ckeditor/ckeditor5-mention/theme/mention.css */
.ck-content .mention {
background: var(--ck-color-mention-background);
color: var(--ck-color-mention-text);
}
/* @ckeditor/ckeditor5-horizontal-line/theme/horizontalline.css */
.ck-content hr {
margin: 15px 0;
height: 4px;
background: hsl(0, 0%, 87%);
border: 0;
}
/* @ckeditor/ckeditor5-code-block/theme/codeblock.css */
.ck-content pre {
padding: 1em;
color: hsl(0, 0%, 20.8%);
background: hsla(0, 0%, 78%, 0.3);
border: 1px solid hsl(0, 0%, 77%);
border-radius: 2px;
text-align: left;
direction: ltr;
tab-size: 4;
white-space: pre-wrap;
font-style: normal;
min-width: 200px;
}
/* @ckeditor/ckeditor5-code-block/theme/codeblock.css */
.ck-content pre code {
background: unset;
padding: 0;
border-radius: 0;
}
@media print {
/* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break {
padding: 0;
}
/* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break::after {
display: none;
}
}
</style>
</head>
<body>
<div id="toolbar" class="sticky"></div>
<div id="table-of-contents"></div>
<div id="custom-button"></div>
<div class="container">
<br/>
<!--
Wrapping the structure inside a pair of
contenteditable="true" + contenteditable="false" elements
is required to provide proper caret handling when
using arrow keys at the start and end of an editable area.
You can skip them if you don't want to move the
caret between editable areas using arrow keys.
!-->
<div contenteditable="true">
<div contenteditable="false">
<div class="editor">
<div id="header" class="ck-content">
<h2><span style="color:#C00000;">Sample Document</span></h2>
<p>This document was created using accessibility techniques for headings, lists, image alternate text, tables, and
columns. It should be completely accessible using assistive technologies such as screen readers.</p>
<h2>Headings</h2>
<p>There are eight section headings in this document. At the beginning, "Sample Document" is a level 1 heading. The main
section headings, such as "Headings" and "Lists" are level 2 headings. The Tables section contains two sub-headings,
"Simple Table" and "Complex Table," which are both level 3 headings. </p>
<h2>Lists</h2>
<p>The following outline of the sections of this document is an ordered (numbered) list with six items. The fifth item,
"Tables," contains a nested unordered (bulleted) list with two items.</p>
<ol>
<li>Headings </li>
<li>Lists </li>
<li>Links </li>
<li>Images </li>
<li><span class="ck-list-bogus-paragraph">Tables</span><ul><li><span class="ck-list-bogus-paragraph">Simple Tables</span></li><li><span class="ck-list-bogus-paragraph">Complex Tables</span></li></ul></li>
<li>Columns </li>
</ol>
<h2>Links</h2>
<p>In web documents, links can point different locations on the page, different pages, or even downloadable documents,
such as Word documents or PDFs:</p>
<p><a href="#_top">Top of this Page</a><br><a href="http://www.dhs.state.il.us/page.aspx?item=67072">Sample
Document</a><br><a
href="http://www.dhs.state.il.us/OneNetLibrary/27897/documents/Initiatives/IITAA/Sample-Document.docx">Sample
Document (docx)</a></p>
<h2>Images</h2>
<figure class="image image-style-align-left image_resized" style="width:17.14%;" alt="Test figure"><img style="aspect-ratio:106/98;" src="https://44061.cdn.cke-cs.com/d3mAzo0kqdkaFbNHC3mX/images/6b5358fa6b5e9865f59fe0e131eda5f3883e7c4e2d32f71b.png" alt="Web Access Symbol" srcset="https://44061.cdn.cke-cs.com/d3mAzo0kqdkaFbNHC3mX/images/6b5358fa6b5e9865f59fe0e131eda5f3883e7c4e2d32f71b.png/w_141 141w" sizes="100vw" width="106" height="98"></figure>
<p>Documents may contain images. For example, there is an image of the web accessibility symbol to the
left of this paragraph. Its alternate text is "Web Access Symbol".</p>
<p>Alt text should communicate what an image means, not how it looks.</p>
<div class="page-break" style="page-break-after:always;"><span style="display:none;"> </span></div>
<p style="margin-left:0cm;"> </p>
<figure class="image image_resized image-style-align-left" style="width:40.72%;"><img style="aspect-ratio:213/105;" src="https://44061.cdn.cke-cs.com/d3mAzo0kqdkaFbNHC3mX/images/9b8f74bd4870f707e9d6f3b32dbda9ebe1a84be8c695c6d7.png" alt="Chart of Screen Reader Market Share.
(Unfortunately, there isn't a way in Word or PDF to include rich formatting, such as a table, in alternate text.)" srcset="https://44061.cdn.cke-cs.com/d3mAzo0kqdkaFbNHC3mX/images/9b8f74bd4870f707e9d6f3b32dbda9ebe1a84be8c695c6d7.png/w_124 124w, https://44061.cdn.cke-cs.com/d3mAzo0kqdkaFbNHC3mX/images/9b8f74bd4870f707e9d6f3b32dbda9ebe1a84be8c695c6d7.png/w_204 204w, https://44061.cdn.cke-cs.com/d3mAzo0kqdkaFbNHC3mX/images/9b8f74bd4870f707e9d6f3b32dbda9ebe1a84be8c695c6d7.png/w_284 284w" sizes="100vw" width="213" height="105"></figure>
<p>Some images, such as charts or graphs, require long descriptions, but not all document types allow
that. In web pages, long descriptions may be provided in several ways: on the page below the image, via a link below
the image, or via a link on the image.</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<h2>Tables</h2>
<h3>Simple Tables</h3>
<p>Simple tables have a uniform number of columns and rows, without any merged cells:</p>
<figure class="table" style="float:left;"><table><tbody><tr><td><strong>Screen Reader</strong></td><td><strong>Responses</strong></td><td><strong>Share</strong></td></tr><tr><td>JAWS</td><td>853</td><td>49%</td></tr><tr><td>NVDA</td><td>238</td><td>14%</td></tr><tr><td>Window-Eyes</td><td>214</td><td>12%</td></tr><tr><td>System Access</td><td>181</td><td>10%</td></tr><tr><td>VoiceOver</td><td>159</td><td>9%</td></tr></tbody></table></figure>
<p><br><br><br><br><br><br><br><br><br><br><br><br></p>
<h3>Complex Tables</h3>
<p>The following is a complex table, using merged cells as headers for sections within the table. This can't be made
accessible in all types of documents:</p>
<figure class="table" style="width:100%;"><table><tbody><tr><td>&nbsp;</td><td colspan="2"><strong>May 2012</strong></td><td colspan="2"><strong>September 2010</strong></td></tr><tr><td><strong>Screen Reader</strong></td><td><strong>Responses</strong></td><td><strong>Share</strong></td><td><strong>Responses</strong></td><td><strong>Share</strong></td></tr><tr><td>JAWS</td><td>853</td><td>49%</td><td>727</td><td>59%</td></tr><tr><td>NVDA</td><td>238</td><td>14%</td><td>105</td><td>9%</td></tr><tr><td>Window-Eyes</td><td>214</td><td>12%</td><td>138</td><td>11%</td></tr><tr><td>System Access</td><td>181</td><td>10%</td><td>58</td><td>5%</td></tr><tr><td>VoiceOver</td><td>159</td><td>9%</td><td>120</td><td>10%</td></tr></tbody></table></figure>
<p style="margin-left:0cm;"> </p>
<h2>Columns</h2>
<figure class="table"><table style="border:2px solid hsl(0, 0%, 100%);"><tbody><tr><td>This is an example of columns. With columns, the page is split into two or more horizontal sections. Unlike tables, in which you usually read across a row and then down to the next, in columns, you read down a column and then across to the next.</td><td>When columns are not created correctly, screen readers may run lines together, reading the first line of the first column, then the first line of the second column, then the second line of the first column, and so on. Obviously, that is not accessible.</td></tr></tbody></table></figure>
</div>
</div>
<div class="editor">
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel sapien leo. Nulla dignissim vitae nunc vel malesuada. Curabitur ut arcu at metus efficitur tincidunt vestibulum ac sapien. Sed interdum tempor erat, vitae pharetra magna rhoncus in. Sed sem nibh, aliquet a pharetra id, suscipit nec purus. Nunc metus ligula, finibus sit amet finibus in, ullamcorper aliquet ante. Donec faucibus ultrices enim et imperdiet. Proin in nisi vel metus porta auctor. Cras a rhoncus eros. Curabitur ac convallis dolor. Duis dictum erat quis risus dapibus posuere. Nulla convallis felis sed tortor volutpat, quis ornare mauris feugiat. Suspendisse efficitur, justo in rhoncus fringilla, neque urna vehicula nibh, in porta quam tellus vel massa. Integer at tincidunt ipsum. Fusce vehicula massa eu ornare fermentum. Nunc tincidunt mollis leo, placerat pretium elit consectetur a.
Phasellus vulputate pharetra erat ut pretium. Etiam sit amet diam nec tortor posuere pretium. Ut suscipit rutrum tellus. Curabitur in tempor leo, id semper eros. Quisque accumsan semper nunc quis sollicitudin. Nullam interdum malesuada nibh ut mollis. Praesent id viverra nisi. Curabitur lacus tellus, pulvinar eget diam ut, consectetur tincidunt risus. Quisque vestibulum venenatis dui nec lacinia. Nam vulputate blandit augue, quis dictum orci mollis id. Nunc aliquet nibh id nibh congue, et tincidunt lacus vulputate. Nullam vestibulum massa quis faucibus blandit. Maecenas enim libero, auctor in volutpat id, rhoncus ac metus.
In egestas orci arcu, at efficitur justo euismod non. Vestibulum ac urna quis dolor consequat suscipit in non tortor. Nullam sapien velit, imperdiet ultricies nunc et, iaculis bibendum libero. Nunc cursus nisi in erat cursus, a suscipit odio venenatis. Suspendisse pulvinar nulla nisi. Nam feugiat neque ut pulvinar tempus. Quisque consectetur semper placerat. Aliquam tincidunt mauris in congue fringilla. Phasellus pretium nisl sed pulvinar laoreet.
Phasellus ut metus a sem aliquam blandit at vitae ex. Vestibulum et rhoncus sapien. Vestibulum risus nibh, semper ultrices rutrum nec, efficitur eu erat. Nam feugiat lacus sed finibus tempus. Praesent vel diam sed mi ultrices ornare. Nam venenatis vel neque in fermentum. Proin maximus vel augue eu iaculis.
Quisque at sollicitudin nisi. Integer feugiat ultricies justo eu porta. Nullam viverra volutpat ligula, ac finibus augue feugiat nec. Morbi lacinia erat a lectus lacinia, porta semper sapien venenatis. Morbi bibendum mollis odio nec interdum. Nam vitae iaculis quam. Quisque vitae lectus augue. Duis lobortis lorem pharetra semper convallis. Nunc condimentum sed dolor nec facilisis. Phasellus dignissim lorem vestibulum purus placerat, sed dignissim ipsum porta. Ut et tortor massa. Vestibulum turpis diam, facilisis id bibendum finibus, fermentum sed lorem. Vivamus luctus nunc eget diam accumsan, vel egestas neque ornare. Maecenas sit amet velit ac nulla sagittis malesuada.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel sapien leo. Nulla dignissim vitae nunc vel malesuada. Curabitur ut arcu at metus efficitur tincidunt vestibulum ac sapien. Sed interdum tempor erat, vitae pharetra magna rhoncus in. Sed sem nibh, aliquet a pharetra id, suscipit nec purus. Nunc metus ligula, finibus sit amet finibus in, ullamcorper aliquet ante. Donec faucibus ultrices enim et imperdiet. Proin in nisi vel metus porta auctor. Cras a rhoncus eros. Curabitur ac convallis dolor. Duis dictum erat quis risus dapibus posuere. Nulla convallis felis sed tortor volutpat, quis ornare mauris feugiat. Suspendisse efficitur, justo in rhoncus fringilla, neque urna vehicula nibh, in porta quam tellus vel massa. Integer at tincidunt ipsum. Fusce vehicula massa eu ornare fermentum. Nunc tincidunt mollis leo, placerat pretium elit consectetur a.
Phasellus vulputate pharetra erat ut pretium. Etiam sit amet diam nec tortor posuere pretium. Ut suscipit rutrum tellus. Curabitur in tempor leo, id semper eros. Quisque accumsan semper nunc quis sollicitudin. Nullam interdum malesuada nibh ut mollis. Praesent id viverra nisi. Curabitur lacus tellus, pulvinar eget diam ut, consectetur tincidunt risus. Quisque vestibulum venenatis dui nec lacinia. Nam vulputate blandit augue, quis dictum orci mollis id. Nunc aliquet nibh id nibh congue, et tincidunt lacus vulputate. Nullam vestibulum massa quis faucibus blandit. Maecenas enim libero, auctor in volutpat id, rhoncus ac metus.
In egestas orci arcu, at efficitur justo euismod non. Vestibulum ac urna quis dolor consequat suscipit in non tortor. Nullam sapien velit, imperdiet ultricies nunc et, iaculis bibendum libero. Nunc cursus nisi in erat cursus, a suscipit odio venenatis. Suspendisse pulvinar nulla nisi. Nam feugiat neque ut pulvinar tempus. Quisque consectetur semper placerat. Aliquam tincidunt mauris in congue fringilla. Phasellus pretium nisl sed pulvinar laoreet.
Phasellus ut metus a sem aliquam blandit at vitae ex. Vestibulum et rhoncus sapien. Vestibulum risus nibh, semper ultrices rutrum nec, efficitur eu erat. Nam feugiat lacus sed finibus tempus. Praesent vel diam sed mi ultrices ornare. Nam venenatis vel neque in fermentum. Proin maximus vel augue eu iaculis.
Quisque at sollicitudin nisi. Integer feugiat ultricies justo eu porta. Nullam viverra volutpat ligula, ac finibus augue feugiat nec. Morbi lacinia erat a lectus lacinia, porta semper sapien venenatis. Morbi bibendum mollis odio nec interdum. Nam vitae iaculis quam. Quisque vitae lectus augue. Duis lobortis lorem pharetra semper convallis. Nunc condimentum sed dolor nec facilisis. Phasellus dignissim lorem vestibulum purus placerat, sed dignissim ipsum porta. Ut et tortor massa. Vestibulum turpis diam, facilisis id bibendum finibus, fermentum sed lorem. Vivamus luctus nunc eget diam accumsan, vel egestas neque ornare. Maecenas sit amet velit ac nulla sagittis malesuada.
</p>
</div>
</div>
<div class="boxes">
<div class="box box-left editor">
<div id="left-side">
<p>This is the initial editor content.</p>
</div>
</div>
<div class="box box-right editor">
<div id="right-side">
<p>This is the initial editor content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment