I am working on software in which the user may select multiple substrings from an arbitrary string. Sometimes, this will naturally result in patterns. E.g.:
"The quick brown fox jumps over the lazy dog"
- substring selected: brown fox
"The quick purple fox jumps over the lazy dog"
- substring selected: purple fox
"The quick orange fox jumps over the lazy dog"
- substring selected: orange fox
So it would seem that the user is always selecting the characters "fox" and the word immediately preceding it.
It would be really neat if I could implement some subroutine that could offer "Predictions" for these substrings, which the user could either make use of, or discard as appropriate. E.g.:
"The quick yellow fox jumps over the lazy dog"
- suggested substring: yellow fox (ACCEPTED)
"The quick red fox jumps over the lazy dog"
- suggested substring: red fox (ACCEPTED)
"The English Foxhound is a scent hound, bred to hunt foxes by scent."
- suggested substring: hunt fox (REJECTED)
Generally speaking, how would one identify patterns in user input programatically, and use those patterns to make predictions about future input?
There has been research on this in the field of text editing. There, the idea is to have the user edit a semi-structured text and to replicate the changes to similar portions of the text (with the appropriate transformations).
The general idea is to generate candidate patterns and rank/dismiss them based on user input and heuristics.
See for example this paper for a nice overview.
Related
I can't get any style except background-color to work on a colgroup or col. I've tried both Chrome and Firefox. I've tested this eight ways to Sunday and also googled it every way I can think of.
Is that correct, its not supported in current browsers? (on not designed to work in the spec?) or is there something I'm doing wrong? I've tried the below style on both the colgroup and by including cols inside colgroup.
Colours silver and yellow background show up as expected, but font-family sans-serif and font-style italic do not. What I really want to get working is the position: sticky and left: __px but I can't even get simple font styles to work yet.
For example (this is valid html5 per validator.w3.org):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>title</title>
</head>
<body>
<p>
Pre-table content<br />
Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.
Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.
Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.
Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.
Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.
Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.
</p>
<table>
<colgroup span="3" style="background-color: silver; font-style: italic; width: 50px; position: sticky; left: 0px"></colgroup>
<colgroup span="10" style="background-color: yellow; font-family: sans-serif"></colgroup>
<tbody>
<tr style="position: sticky; top: 0px; background-color: white; z-index: 1">
<th>Property Object ID</th>
<th>Property 1</th>
<th>Property 2</th>
<th>Property 3</th>
<th>Property 4</th>
<th>Property 5</th>
<th>Property 6</th>
<th>Property 7</th>
<th>Property 8</th>
<th>Property 9</th>
<th>Property 10</th>
<th>Property 11</th>
<th>Property 12</th>
</tr>
<tr>
<td>1000001</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
</tr>
<tr>
<td>1000002</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
</tr>
<tr>
<td>1000003</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
</tr>
<tr>
<td>1000004</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
</tr>
<tr>
<td>1000005</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
</tr>
<tr>
<td>1000006</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
</tr>
<tr>
<td>1000007</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
</tr>
<tr>
<td>1000008</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
</tr>
<tr>
<td>1000009</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
</tr>
<tr>
<td>1000010</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
</tr>
<tr>
<td>1000011</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
</tr>
<tr>
<td>1000012</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
<td>Now is the time for all good men to come to the aid of their country. The quick brown fox jumps over the lazy dog. All work and no play makes Jack a dull boy. Onomatopoeiaonomatopoeiaonomatopoeia.</td>
</tr>
</tbody>
</table>
</body>
</html>
Similar questions (but 10 and 12 y old) here Style on colgroup not working and here HTML table colgroup element not working?
The font-related properties don’t apply for columns or column groups in CSS. That’s mainly because it’s not entirely trivial to figure out to which column a given cell belongs, I believe. Especially with the fixed layout algorithm, which should only require one pass through the table.
See Table formatting in the CSS reference for details about which properties apply.
You’ll need to assign this class to each individual cell (td and th) in that column group, I’m afraid.
I'm trying to determine what structure is best with regard to typical e-commerce product listing pages. I have reviewed WCAG and other sources and have not found a definitive solution as of yet. A typical product listing contains an image and a product name, both linked to the product details page. There are several patterns that come to mind...
Single link with empty alt text
My thought is that it is best to combine both of these into the same <a> tag and then set alt="" on the image therefor the product name will describe the entire purpose of the link.
Method 1
<a href="/my-product">
<img src="image.jpg" alt="">
<span class="product-name">Squeaky Fox Dog Toy</span>
</a>
The benefit here is it keeps the interactive elements clean and easy to navigate by keyboard and in screen reader links lists (like in the Rotor in VoiceOver).
Duplicate link and product name
Another very common pattern I've seen in use on high profile sites that have been through accessibility lawsuits and subsequent remediation is to have separate links for both...
Method 2
<img src="image.jpg" alt="Squeaky Fox Dog Toy">
Squeaky Fox Dog Toy
However, this seems like a very bad experience for keyboard users who now have to tab through both elements just to get to the product they want. It also seems terrible for screen reader users who have to listen to duplicate product names as they try and find what they want.
More descriptive alt text on the image
One concern I have with the first two methods is that they may not completely meet WCAG 1.1.1 Non-text Content - Level A. Does the product name alone "serve the equivalent purpose"? For these same images on the product detail page I would typically suggest being more descriptive to give the user more information that a visual user is seeing about what is in the image. The product name will rarely satisfy relaying enough information in that regard. However, on the listing page, I feel like doing that would put undue burden on screen reader users who now have to listen through descriptions of images when all they want is to see what products are available and select one. That level of details seems like it would only be warranted on the actual product detail page.
Method 3
<img src="image.jpg" alt="Red fox stuffed dog toy with white braided rope arms">
Squeaky Fox Dog Toy
or
Method 4
<a href="/my-product">
<img src="image.jpg" alt="Red fox stuffed dog toy with white braided rope arms">
<span class="product-name">Squeaky Fox Dog Toy</span>
</a>
My Questions
So, I guess I really have three questions...
Which method(s) are best for users?
Which method(s), if any, would NOT satisfy WCAG Level AA and therefor not comply with laws in the US, EU, etc.
Would the image in a Product Listing Page be classified as "decorative"?
My suspicion is that Method 1 would be the best. The only documentation I found so far supporting this is on the W3C's site in the section about Decorative image as part of text link... assuming the PLP image can be classified as "decorative".
Great questions and you've obviously done a lot of research.
Let me start with your second question
Which method(s), if any, would NOT satisfy WCAG Level AA and therefor not comply with laws in the US, EU, etc.
All of your ideas would technically pass WCAG, which makes your first question more important - what's best for the user. WCAG is a minimum standard to create applications that are accessible to the widest user base but they are indeed minimum standards. You can have a very unusable website that is accessible so you want to look beyond WCAG.
Also, WCAG can be very subjective. With regards to WCAG 1.1.1 that you mentioned, one person might say your examples fail while another person might say they pass. There is no official definition on what "serves the equivalent purpose" means. It's a subjective decision.
I can find pros and cons with all your solutions so here are a few things to think about.
Method 1: You consider the product picture as decorative so it doesn't have alt text. (Well, it has alt text but it's the empty string, which is fine. Your could also have alt by itself without the ="" and it would mean the same thing.) One problem, though, is if you have a user with lower bandwidth and perhaps images don't load. Or image loading might be turned off. Or your URL to the image location is bad. You'd then have an empty box where the picture should be. You'd still have text in the link so it'll be announced ok by screen readers and people with vision will see the text, but the user might wonder what belongs in that box. With descriptive alt text, the alt text would be displayed near the image. Each browser tends to show missing images differently.
Method 2: It's not the best experience for keyboard or screen reader users but I'm not sure I'd say it's a "very bad" experience. Many (sighted) keyboard users can just tab twice and it's not a big deal. I often have to press and hold tab to get through lots of tab stops, but I'm a sighted keyboard user so it doesn't bother me. But some assistive technology is more difficult to get through multiple tab stops, such as a sip and puff device, so reducing tab stops is always a good thing but it's not required by WCAG.
Method 3: Similar to method 2 except the alt text is more descriptive. You have to start weighing the options of being succinct in the alt text (or empty alt text) to being (too) descriptive. It's a subjective decision and often requires some usability testing.
Method 4: Improves upon method 2 by only having one tab stop but now it causes both the alt text and the link text to be announced so the link text might be too wordy for the screen reader user.
I often use a pattern close to your method 4 but I don't want the alt text read with the link text so I use aria-labelledby. (I use aria-labelledby when the text I want to announce is already on the screen so I can just refernece it, whereas aria-label is a literal string and I don't like to repeat the text in the aria-label and the text on the screen.)
Method 5:
<a href="/my-product" aria-labelledby="foxy">
<img src="image.jpg" alt="Red fox stuffed dog toy with white braided rope arms">
<span id="foxy" class="product-name">Squeaky Fox Dog Toy</span>
</a>
Some benefits of method 5:
one tab stop
link text announcement for screen readers is not too wordy
alt text will be displayed if image can't be loaded
screen reader user can still navigate by <img> elements (the G key for many screen readers) and hear the description
I'm sure you can poke holes in method 5 too. There will always be downsides to almost every solution.
Update
I took so long to type my answer that you had added a third question to your OP. Whether an image is decorative or not, whether it's in a product listing page (PLP) or product details page (PDP), is still somewhat subjective. As a best practice (not required by WCAG), one would think that a PDP would have more details about the product and thus might need very descriptive text on the images. But those details could also exist in the product text and thus not be needed on the actual images.
Which method(s) are best for users?
Method 1 out of the options given is best.
Which method(s), if any, would NOT satisfy WCAG Level AA and therefor not comply with laws in the US, EU, etc.
None of them would fail WCAG as such.
However as you have pointed out 2 and 3 result in duplication of effort for keyboard users and links to the same location having different names, which is not a fail under any success criterion but is highly recommended.
Would the image in a Product Listing Page be classified as "decorative"?
Yes in scenario 1 and 4.
Expansion of the answers given
All 4 of the examples given would "pass" WCAG. However they offer very different experiences.
So the question is what things are we considering for accessibility?
The first is Keyboard operability. Examples 2 and 3, as you pointed out result in duplication of focus stops for the same item. So we should avoid them.
The second thing is link purpose. Yet again examples 2 and 3 are not great here as we have 2 links to the same place on the same page that have different accessible labels / text that assistive tech will use.
So we can rule out options 2 and 3 for best practices.
So what about options 1 and 4?
Well as the items are located within a hyperlink we want the link text (the accessible name for those links) to be descriptive of the product page we are going to visit.
As such option one would read: "link: Squeaky Fox Dog Toy" and the second link would read "link: (image) Red fox stuffed dog toy with white braided rope arms, Squeaky Fox Dog Toy"
The second option results in duplication of information so is not as desirable as the first option.
So we land on option 1.
The only consideration you now have is whether that link text describes the product sufficiently. Now if you sold multiple dog toys (different product types) then you need text that describes them as such i.e. "plastic dog toys" and "fluffy dog toys".
If you sell different coloured products and they all had their own page (so you don't have a colour picker on the end page, they are listed as separate items) then you would need to describe the colour there too. "Red fluffy dog toy", "blue fluffy dog toy".
Essentially you need to provide enough information that each product link is easily identifiable as to where it leads (the purpose of the link itself).
This is where judgement comes into play, provide enough information to describe the product generally in a unique way on the page, not so much information that browsing that page becomes problematic due to 100 products with 200 word link text.
So in the example given the "balance" would be something like "Red fox stuffed dog toy", and then describe the appearance in far more detail on the product page, wither in the description or in the product image alt attributes.
Option 5 - if you don't have text at all.
It is worth noting that the last option for a product page is no text at all. Just an image inside a link. The following is also valid HTML and accessible as the alt text will be used as the link text (not if an image contains any text at all that should all appear in the alt attribute).
<a href="/my-product">
<img src="image.jpg" alt="Red fox stuffed dog toy with white braided rope arms">
</a>
Extra powers
Sometimes you may not to be able to control the content of the link itself (maybe alt text is managed centrally or you have a description for each item as well that would make the link text far too verbose.)
In that case you can fall-back to WAI-ARIA (always a last resort) and provide the link text with that:
<a href="/my-product" aria-label="DESCRIPTION THAT OVERRIDES ALL CONTENT">
<img src="image.jpg" alt="Red fox stuffed dog toy with white braided rope arms">
<span class="product-name">Squeaky Fox Dog Toy</span>
<p class="long-and-verbose-description">Way too much information for a link that is overridden by the aria-label</p>
</a>
Relevant Guidance
combining link text and adjacent images
Technique for associating links with the heading they fall under (for if you split products into sections on the page
How do I move Spritz box to the top of page when it loads? Or, how do I remove all text from the page after Spritz gets the text? And, how can I make it so that anyone who visits the page can upload a .txt file for Spritz to read?
I'm trying to code a very simple web page in HTML, but I'm having some problems.
The end result of what I'm trying to do is that when my page finishes loading, nothing shows up except for the Spritz Box (see code below) which I want to start showing the words from the book (again, see code below).
The problems I am having is that the text is taking up too much space on the page (were talking about a couple hundred thousand words here, I removed a bunch for sake of this question). This causes problems with the area that Spritz shows up in (usually at the bottom of the massive page of text).
<!DOCTYPE html>
</style>
<div id="bodyContent" class="mw-body-content">
<font size="0">
The Magicians - Lev Grossman
BOOK I
BROOKLYN
Quentin did a magic trick. Nobody noticed.
They picked their way along the cold, uneven sidewalk together: James, Julia, and Quentin. James and Julia held hands. That’s how things were now. The sidewalk wasn’t quite wide enough, so Quentin trailed after them, like a sulky child. He would rather have been alone with Julia, or just alone period, but you couldn’t have everything. Or at least the available evidence pointed overwhelmingly to that conclusion.
“Okay!” James said over his shoulder. “Q. Let’s talk strategy.”
James seemed to have a sixth sense for when Quentin was starting to feel sorry for himself. Quentin’s interview was in seven minutes. James was right after him.
“Nice firm handshake. Lots of eye contact. Then when he’s feeling comfortable, you hit him with a chair and I’ll break his password and e-mail Princeton.”
“Just be yourself, Q,” Julia said.
Her dark hair was pulled back in a wavy bunch. Somehow it made it worse that she was always so nice to him.
“How is that different from what I said?”
Quentin did the magic trick again. It was a very small trick, a basic one-handed sleight with a nickel. He did it in his coat pocket where nobody could see. He did it again, then he did it backward.
“I have one guess for his password,” James said. “Password.”
It was kind of incredible how long this had been going on, Quentin thought. They were only seventeen, but he felt like he’d known James and Julia forever. The school systems in Brooklyn sorted out the gifted ones and shoved them together, then separated the ridiculously brilliant ones from the merely gifted ones and shoved them together, and as a result they’d been bumping into each other in the same speaking contests and regional Latin exams and tiny, specially convened ultra-advanced math classes since elementary school. The nerdiest of the nerds. By now, their senior year, Quentin knew James and Julia better than he knew anybody else in the world, not excluding his parents, and they knew him. Everybody knew what everybody else was going to say before they said it. Everybody who was going to sleep with anybody else had already done it. Julia—pale, freckled, dreamy Julia, who played the oboe and knew even more physics than he did—was never going to sleep with Quentin.
Quentin was thin and tall, though he habitually hunched his shoulders in a vain attempt to brace himself against whatever blow was coming from the heavens, and which would logically hit the tall people first. His shoulder-length hair was freezing in clumps. He should have stuck around to dry it after gym, especially with his interview today, but for some reason—maybe he was in a self-sabotaging mood—he hadn’t. The low gray sky threatened snow. It seemed to Quentin like the world was offering up special little tableaux of misery just for him: crows perched on power lines, stepped-in dog shit, windblown trash, the corpses of innumerable wet oak leaves being desecrated in innumerable ways by innumerable vehicles and pedestrians.
“God, I’m full,” James said. “I ate too much. Why do I always eat too much?”
</font>
</div>
<script type="text/javascript">
// Javascript URL redirection
window.location.replace("javascript:(function(){function%20loadScript()%7Bvar%20script=document.createElement(%27script%27);script.setAttribute(%27type%27,%27text/javascript%27);script.setAttribute(%27charset%27,%27UTF-8%27);script.setAttribute(%27async%27,%27true%27);script.setAttribute(%27src%27,%27https://sdk.spritzinc.com/js/1.2/bookmarklet/js/SpritzletOuter.js%3F%27+(new%20Date().getTime()).toString().substring(0,7));document.documentElement.appendChild(script);script.onload=script.onreadystatechange=function()%7Bvar%20rs=script.readyState;if(!rs%20||%20rs===%27loaded%27%20||%20rs===%27complete%27)%7Bscript.onload=script.onreadystatechange=null;Spritzlet.init();}};}if(window.Spritzlet)%7BSpritzlet.activate();}else%7Bwindow.Spritzlet=window.Spritzlet%20||%7B};window.Spritzlet=%7Borigin:window.location.protocol+%27//%27+window.location.host,loaderVersion:1.0};loadScript();}})();");
</script>
You want spritz window to appear on top of the page and you're ok with text being hidden, did I get it right? If so just hide the text with css display: none and you're ready to go, check this out
I'm trying to write a function prevword_ave_len(word) that takes a string arugment word and returns the average length in characters of the word that precedes word in the text.
The text is the first paragraph of Moby Dick:
Call me Ishmael. Some years ago - never mind how long precisely - having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off - then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.
There are a few special requirements to be aware of:
If word happens to be the first word occurring in the text, then the length of the preceding word for that occurrence should be counted as 0.
If word is not in the text then the function should return False.
A "word" is simply a string that is delimited by "whitespace." Punctuation following a word is included as part of the word.
The casing in the original text and in word should be preserved.
How would I go about doing this? My thought process was to split the text into a list of words and then use a for loop to search for each instance of word, and where word is found, somehow index the word before word, find its length and add it to an empty list. Then I would average the elements in this list and then that would be my output. I just don't know how to go about doing this?
This solution uses a dictionary, which values are lists of the lengths of all preceding words.
The given example print the solution for word the (last line).
In case you are not familiar with defaultdict take a look here.
from collections import defaultdict
def prevword_ave_len(word, text):
words = defaultdict(list) #initialization of default dictionary
textlist = text.split() #split text into words
words[textlist[0]].append(0) #append 0 for first word in text
#iterate over words, append length of preceding word to values
for i in range(1,len(textlist)):
words[textlist[i]].append(len(textlist[i-1]))
if word in words:
return sum(words[word])/len(words[word]) #calculate mean
else: return False
if __name__ == "__main__":
text = "Call me Ishmael. Some years ago - never mind how long precisely - having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off - then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me."
print(prevword_ave_len('the', text))
My html consists of this:
<html>
<body>
</body>
</html>
and it has a bunch of stuff inside the body. This is my CSS:
html {
width: 100%;
height: 100%;
}
body {
background-image:url("../images/backgroundImage.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
The body of the html page has a lot of stuff (enough to force the user to have to scroll down in order to reach the bottom of the page). The problem is that the background does not extend all the way down until the bottom of the page. When I first open the html page, the background image takes up everything BUT when I scroll down, the part which can only been seen by scrolling has a white background, the image doesn't reach the part which requires scrolling in order to be seen.
How do I make it so that the background image extends even till the part which requires scrolling in order to be seen?
You can use background-attachment: fixed; to make the background image scroll with the page and thus not having to stretch through the entire height.
Easy fix ;)
If you have the option of additional markup, you can use a wrapper element that contains all of the content.
http://jsfiddle.net/SombreErmine/L6ubk/
HTML:
<div class="page-wrapper">
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
</div>
CSS:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.page-wrapper {
background-image:url("http://placekitten.com/200/300");
background-repeat: no-repeat;
background-size: 100% 100%;
}
p {
margin: 0;
padding: 1em;
}
You have some options:
Pure css:
background-size: cover;
This will make the background image fill the page regardless of how wide/tall the window gets. Naturally, you'll want to be concerned about how the image displays resolution-wise. You're gonna need a big image for people with big monitors.
Add some html/css:
Assign the backround-image to a separate div
<div class="this-has-a-big-bg"></div>
And give it full height and a fixed position behind your other content:
.this-has-a-big-bg {
postion: fixed;
z-index: -1;
height: 100%;
width: 100%;
}
You'll want to also set your html/body dimensions to 100% as well.
Or finally, some javascript/jquery with an on.scroll listener. But this shouldn't be needed.