Copyright © 2013 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. W3C liability, trademark and document use rules apply.
This module describes the page model that partitions a flow into pages. It builds on the Box model module and introduces and defines the page model and paged media. It adds functionality for pagination, page margins, page size and orientation, headers and footers, widows and orphans, and image orientation. Finally it extends generated content to enable page numbering and running headers / footers.
This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.
Publication as a Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.
The (archived) public mailing list<EMAIL_ADDRESS>(see instructions) is preferred for discussion of this specification. When sending e-mail, please put the text “css3-page” in the subject, preferably like this: “[css3-page] …summary of comment…”
This document was produced by the CSS Working Group (part of the Style Activity).
This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.
Paged media (e.g., paper, transparencies, photo album pages, pages displayed on computer screens as printed output simulations) differ from continuous media in that the content of the document is split into one or more discrete static display surfaces. To handle pages, CSS3 Paged Media describes how:
This module defines a page model that specifies how a document is formatted within a rectangular area, called the page box, that has finite width and height.
Although CSS3 does not specify how user agents transfer page boxes to sheets, it does include certain mechanisms for telling user agents about the intended page sheet size and orientation. In the general case, CSS3 assumes that one page box will be transferred to one surface of similar size.
All properties defined in this specification also accept the inherit keyword as their value, but for readability it has not been listed explicitly.
All of the text in this specification is normative except sections explicitly marked as non-normative, examples, and notes. The keywords "MUST", "SHALL", "MUST NOT", "SHALL NOT", "REQUIRED", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" when used in this document are to be interpreted as described in RFC 2119 [RFC2119]. However, for readability, these words do not appear in all uppercase letters in this specification.
Examples in this specification are introduced with the words "for
example" or are set apart from the normative text with
class="example"
, like this:
This is an example of an informative example.
Informative notes begin with the word "Note" and are set apart from the
normative text with class="note"
, like this:
Note, this is an informative note.
The following terminology and accompanying diagrams help to describe the page model:
portrait
’ and ‘landscape
’.
:left
’ page selector.
:right
’ page selector.
In the paged media formatting model, the document is transferred into one or more page boxes. The page box is a specialized CSS box that maps to a rectangular print media surface, such as a page of paper. It is roughly analogous to the viewport.
As with other CSS boxes, a page box consists of margin, border, padding, and content areas. The content and margin areas of a page box have special functions:
The properties of a page box are
determined by properties declared
within the page context, which is the
declaration
block of the @page
rule. Similarly the properties of a
page-margin box are determined by properties declared within its
margin context. Declarations in the
page context can affect the page box and/or inherit to the page-margin
boxes, but they do not apply to or inherit into the document's root
element or other content.
The containing block of the
page box is specified using the ‘size
’ property in the page context. The width and horizontal
margins of the page box are then calculated exactly as for a non-replaced
block element in normal flow. [CSS21] The height and vertical
margins of the page box are calculated analogously (instead of using the
block height formulas). In both cases if the values are over-constrained,
instead of ignoring any margins, the containing block is resized to
coincide with the margin edges of the page box.
:root { font-size: 1vw; } @page { width: 50em; }
Because the page context inherits from the root,
and the vw
unit depends on the size of the page,
this creates a cycle. How do we break it?
The first rule is a common use case for e.g. slides. The second rule is common in Japanese, where the page is sized to fit the paragraph text.
When drawing a page of content, the page layers are painted in the following painting order (bottommost first):
In the page model, the page background behaves similar to the root
background: its background
painting area is the entire page box, including its margins
(regardless of ‘background-clip
’). Page
backgrounds are anchored within the page box's padding area by default
(and honor ‘background-origin
’ if the UA
supports [CSS3BG]). However if ‘background-attachment
’ is ‘fixed
’ then the image is positioned relative to the
page box including its margins (i.e. the background
positioning area, like the background painting area, is
the page's margin box).
The document canvas background is drawn as the page box's background:
by default its background painting area covers the page box's
border box, and for UAs that support [CSS3BG], follows the ‘background-clip
’ value specified on the root
element. It remains, however, positioned with respect to the root element
or page area as usual.
With respect to the page-margin boxes, the document canvas, page
borders, and all of the document contents are treated as a single element
with a z-index
value of ‘0
’ that
establishes a stacking context
[CSS21]: the
page-margin boxes never interleave with parts of the document content or
between the content and the canvas. They may only paint in front of the
document content or behind the document canvas. The page background is
always painted underneath everything else.
The ‘z-index
’ property applies to
page-margin boxes. Since the ‘position
’
property does not apply to page-margin boxes, ‘z-index
’ always affects page-margin boxes as if
they were positioned elements regardless of the ‘position
’ property's value. Each page-margin
boxes always establishes a stacking context.
The default painting order, or CSS2.1 Appendix E "tree order", of page-margin boxes with respect to each other is as follows:
@top-left-corner
’
@top-left
’
@top-center
’
@top-right
’
@top-right-corner
’
@right-top
’
@right-middle
’
@right-bottom
’
@bottom-right-corner
’
@bottom-right
’
@bottom-center
’
@bottom-left
’
@bottom-left-corner
’
@left-bottom
’
@left-middle
’
@left-top
’
Start with ‘@top-left-corner
’,
then go clockwise. This order is arbitrary but can be overridden with
‘z-index
’. It only has a visible effect
when page-margin boxes overlap, which should not happen in most cases.
When formatting content in the page model, some content may end up
outside the page box. For example, an element whose ‘white-space
’ property has the value ‘pre
’ can generate a box that is wider than the
page box. As another example, when boxes are positioned absolutely or
relatively, they may end up in "inconvenient" locations. For example,
images may be placed on the edge of the page box or 100,000 meters below
the page box.
A specification for the exact formatting of such elements lies outside the scope of this document. However, it is recommended that authors and user agents observe the following general principles concerning content outside the page box:
Content should be allowed slightly beyond the page box to allow pages to "bleed".
User agents SHOULD avoid generating a large
number of content-empty pages to honor the positioning of elements
(e.g., printing 100 blank pages is probably neither the author's nor
the user's intent). A Content-empty page is
a page box whose page area contains no printable content other than
backgrounds and/or borders. A page box whose page area contains
generated content, or content whose visibility is ‘hidden
’, or invisible content such as a
zero-width space is not a content-empty page. On the other hand, a page
containing only a background and/or borders and/or page-margin box
content is a content-empty page.
Note, however, that generating a small number of empty
page boxes is sometimes necessary to honor the forced-break values for
‘page-break-before
’/‘break-before
’ and ‘page-break-after
’/‘break-after
’. [CSS21] [CSS3-BREAK]
Authors SHOULD NOT position elements in inconvenient locations just to avoid rendering them. Instead:
display
’
property to ‘none
’.
visibility
’ property.
This specification does not define how boxes positioned outside the page box are handled. Possibilities include discarding them or creating page boxes for them at the end of the document.
CSS distinguishes between left pages and right pages on all documents,
whether they are printed duplex or not. Each left page is followed by a
right page and vice versa. Left and right pages can be styled differently
with the :left
and
:right
pseudo-classes.
Whether the first page of a document is a left page or a right page depends on the page progression of the document. The page progression is the direction in which the printed pages of a document would be sequenced when laid out side-to-side. For example, English and horizontally-set Japanese typically progress from left to right, whereas Arabic and vertically-set Japanese pages typically progress from right to left. In documents with a left-to-right page progression the first page of the document is a right page, and vice versa.
The page progression direction is determined as follows:
If the UA supports the ‘direction
’ and
‘writing-mode
’ properties from the CSS 3
Writing Modes Module [CSS3-WRITING-MODES], it
must determine
whether the first page is a left or right page from the values of those
properties on the root element.
To explicitly force a document to begin printing on a left or right
page, authors can specify a ‘break-before
’ value that that propagates a
page break to the root. [CSS3-BREAK] The UA must
suppress the first (empty) page(s) in this case (and the :first
pseudo-class matches the first
printed page).
html { break-before: always }
For an HTML document with a left-to-right page progression, the above
style rule will cause the first page of the document to print on a ‘:left
’ page
html { break-before: left }
For an HTML document, the above style rule will cause the first page
of the document to print on a ‘:left
’ page, regardless of the page progression.
Authors can specify various aspects of a page box, such as its
dimensions, orientation, and margins, within an ‘@page
’ rule. ‘@page
’ rules
are allowed wherever rule-sets
are allowed. An ‘@page
’ rule consists of the
keyword ‘@page
’, an OPTIONAL comma-separated list of page selectors and a block of declarations
(said to be in the page context). An ‘@page
’ rule can also contain other at-rules,
interleaved between declarations. The current level of this specification
only allows margin at-rules inside
‘@page
’.
‘@page
’ rules without a selector list apply
to every page. Other ‘@page
’ rules apply to
pages that match at least one of their
selectors. Properties declared within the page context apply to the page
box.
If an error is encountered during the processing of a declaration block within a page or a margin context, the Rules for handling parsing errors apply; that is, valid declarations within the block are applied.
This rule is missing a CSSOM API. See discussion on www-style.
A page selector is made of either a page type selector or a page pseudo-class, followed by zero or more additional page pseudo-classes. No whitespace is allowed between components of a selector. The page selector grammar and examples can be found below.
A page selector is said to match a given page if and only if all of its components match the page.
A page type selector is a
case-sensitive CSS
identifier [CSS21]. It matches pages of the named page type generated by the ‘page
’ property. A page type name of ‘auto
’ (ASCII
case-insensitive) does not make the rule invalid, but MUST never match.
A page pseudo-class is ASCII case-insensitive and has the same syntax as pseudo-classes in regular Selectors. [SELECT] The various page pseudo-classes are defined below.
:left
’, ‘:right
’When printing double-sided documents, left and right pages are often
formatted differently. This can be expressed by using the ‘:left
’ and ‘:right
’ page pseudo-classes.
All pages are automatically classified by user agents as either left
pages or right pages, based on page
progression. The ‘:left
’ and ‘:right
’ pseudo-classes only match left or right pages, respectively.
@page :left { margin-left: 3cm; margin-right: 4cm; } @page :right { margin-left: 4cm; margin-right: 3cm; }
If different declarations have been given for left and right pages, the user agent MUST honor these declarations even if the user agent does not transfer the page boxes to left and right sheets (i.e., a printer that only prints on one side of the medium must nevertheless produce correctly formatted output).
Note. Adding declarations to the ‘:left
’ or ‘:right
’ pseudo-class does not
necessarily influence whether the document comes out of the printer
double- or single-sided (which is outside the scope of this
specification).
:first
’The ‘:first
’
pseudo-class matches the first
printed page of a document.
@page { margin: 2cm } /* All margins set to 2cm */ @page :first { margin-top: 10cm /* Top margin on first page 10cm */ }
:blank
’The ‘:blank
’
pseudo-class matches content-empty
pages that appear as a result of forced page
breaks.
Only the ‘left
’, ‘right
’, ‘recto
’ and ‘verso
’ values
of the ‘break-before
’ and ‘break-after
’ properties can generate pages that
match ‘:blank
’.
In this example, forced page break may occur before h1
elements.
h1 { break-before: left } @page :blank { @top-center { content: "This page is intentionally left blank" } }
A page matched by ‘:blank
’ can also be matched by other page
pseudo-classes.
If headers have been specified on all right pages, a blank right page
will be matched by both :blank
and :right
. Therefore, margin boxes set on
right pages will have to be removed unless they are wanted on blank
pages. Here is an example where the top center header is removed from
blank pages, while the page number remains:
h1 { break-before: left } @page :blank { @top-center { content: none } } @page :right { @top-center { content: "Preliminary edition" } @bottom-center { content: counter(page) } }
Due to the higher specificity of :blank
over :right
, the top center header is removed
even if content: none
comes before content:
"Preliminary edition"
.
Note. Future versions of CSS may include other page pseudo-classes.
The syntax for the @page rule is a specialization of the generic at-rule defined by CSS 2.1. This grammar extends the at-rule syntax to allow @page rules nested inside @media rules. User agents MUST adhere to the following grammar:
See [CSS21], Section 4.1.1 and Appendix G for the expansion of missing productions:
All new lexical tokens are specializations of the ATKEYWORD lexical token:
PAGE_SYM ::= "@page" TOPLEFTCORNER_SYM ::= "@top-left-corner" TOPLEFT_SYM ::= "@top-left" TOPCENTER_SYM ::= "@top-center" TOPRIGHT_SYM ::= "@top-right" TOPRIGHTCORNER_SYM ::= "@top-right-corner" BOTTOMLEFTCORNER_SYM ::= "@bottom-left-corner" BOTTOMLEFT_SYM ::= "@bottom-left" BOTTOMCENTER_SYM ::= "@bottom-center" BOTTOMRIGHT_SYM ::= "@bottom-right" BOTTOMRIGHTCORNER_SYM ::= "@bottom-right-corner" LEFTTOP_SYM ::= "@left-top" LEFTMIDDLE_SYM ::= "@left-middle" LEFTBOTTOM_SYM ::= "@left-bottom" RIGHTTOP_SYM ::= "@right-top" RIGHTMIDDLE_SYM ::= "@right-middle" RIGHTBOTTOM_SYM ::= "@right-bottom" media : MEDIA_SYM S* medium [ COMMA S* medium ]* LBRACE S* [ page_rule | ruleset ]* '}' S* ; page_rule : PAGE_SYM S* page_selector_list '{' S* page_body '}' S* ; page_selector_list : [ page_selector S* [ ',' page_selector S* ]* ]? ; page_selector : pseudo_page+ | IDENT pseudo_page* ; pseudo_page : ':' [ "left" | "right" | "first" | "blank" ] ; page_body : /* Can be empty */ declaration? [ ';' S* page_body ]? | page_margin_box page_body ; page_margin_box : margin_sym S* '{' S* declaration? [ ';' S* declaration? ]* '}' S* ; margin_sym : TOPLEFTCORNER_SYM | TOPLEFT_SYM | TOPCENTER_SYM | TOPRIGHT_SYM | TOPRIGHTCORNER_SYM | BOTTOMLEFTCORNER_SYM | BOTTOMLEFT_SYM | BOTTOMCENTER_SYM | BOTTOMRIGHT_SYM | BOTTOMRIGHTCORNER_SYM | LEFTTOP_SYM | LEFTMIDDLE_SYM | LEFTBOTTOM_SYM | RIGHTTOP_SYM | RIGHTMIDDLE_SYM | RIGHTBOTTOM_SYM ;
The following are examples of page selectors (declaration block intentionally left blank)
@page { ... } @page :left { ... } @page :right { ... } @page LandscapeTable { ... } @page CompanyLetterHead:first { ... } /* identifier and pseudo page. */ @page:first { ... } @page toc, index { ... } @page :blank:first { ... }
The following are examples of page-margin boxes where the declaration blocks are intentionally left blank.
@page { @top-left { ... /* document name */ } @bottom-center { ... /* page number */} } @page :left { @left-middle { ... /* page number in left margin */ }} @page :right{ @right-middle { ... /* page number in right margins of right pages */}} @page :left { @bottom-left-corner { ... /* left page numbers */ }} @page :right { @bottom-right-corner { ... /* right page numbers */ }} @page :first { @bottom-left-corner { ... /* empty footer on 1st page */ } @bottom-right-corner { ... /* empty footer */ } }
Declarations in page and margin contexts cascade just like declarations in rule sets.
The specificity of page a selector is computed in a manner analogous to the computations defined in the Selectors module:
Given the syntax of page seletors, f can only ever be 0 or 1.
:first
’ or ‘:blank
’ pseudo-classes (= g)
:left
’ or ‘:right
’ pseudo-classes (= h)
Note: Repeated occurrences of the same pseudo-classes are allowed and do increase specificity.
Due to storage limitations, implementations may have limitations on the size of f, g, or h. If so, values higher than the limit must be clamped to that limit, and not overflow.
Specificities are compared by comparing the three components in order (f, g, h): the specificity with a larger f value is more specific; if the two f values are tied, then the two g values are compared, etc. If all the values are tied, the two specificities are equal.
Some page specificity calculation examples follow:
@page { } /* specificity = (0,0,0) */ @page :left { } /* specificity = (0,0,1) */ @page :first { } /* specificity = (0,1,0) */ @page :blank:left { } /* specificity = (0,1,1) */ @page artsy { } /* specificity = (1,0,0) */ @page artsy:left { } /* specificity = (1,0,1) */ @page artsy:first { } /* specificity = (1,1,0) */
Consider the following usage example:
@page :left { margin-left: 4cm; } @page { margin-left: 3cm; }
Due to the higher specificity of the pseudo-class selector, the left margin on left pages will be 4cm and all other pages (the right-facing pages) will have a left margin of 3cm.
In this example, the higher specificity of the green rules wins over the red rule. Therefore the first page will have blue text in the top-left page-margin box and green text in the top-right page-margin box, while subsequent pages will have red text in the page-margin boxes.
@page :first { color: green; @top-left { content: "foo"; color: blue; } @top-right { content: "bar"; } } @page { color: red; @top-center { content: "Page " counter(page); } }
Page contexts cascade, so the following stylesheet would style pages with 25 millimeter margins and 14 point type in the page-margin boxes:
@page { margin: 25mm;} @page { font-size: 14pt;}
Page-margin boxes are boxes within the page margin that, like pseudo-elements, can contain generated content.
Page-margin boxes can be used to create page headers and footers, which are portions of the page set aside for supplementary information such as the page number or document title.
Typically, a page header is located at the
top of the page in documents with a predominately horizontal writing
direction and on the side opposite the binding
edge for documents with a predominately vertical writing direction.
One possible design of page headers for horizontally written documents
uses the ‘@top-left-corner
’, ‘@top-left
’, ‘@top-center
’,
‘@top-right
’ and ‘@top-right-corner
’ page-margin boxes. Another design,
for vertically written documents, could use the ‘@right-top
’, ‘@right-middle
’, and ‘@right-bottom
’ page-margin boxes for right facing pages and ‘@left-top
’, ‘@left-middle
’, and ‘@left-bottom
’ for left facing
pages.
The page footer is typically at the opposite
end of the page from the page header. For example, the design of a
horizontally written document with a page header at the top of the page
could use the ‘@bottom-left-corner
’, ‘@bottom-left
’, ‘@bottom-center
’, ‘@bottom-right
’ and ‘@bottom-right-corner
’ page-margin boxes as the page
footer. The design of a vertically written document could use the
page-margin boxes of the binding edge of the page for the page footer.
Page-margin boxes are positioned with respect to the page area and are independent of page orientation, for example the top page-margin boxes are above the page area in both portrait and landscape orientation. The various page-margin boxes are defined and illustrated in the diagram below:
| Box | Description | Placement |
|---|---|---|
| top-left-corner | a fixed-size box defined by the intersection of the top and left margins of the page box | |
| top-left | a variable-width box filling the top page margin between the top-left-corner and top-center page-margin boxes | |
| top-center | a variable-width box centered horizontally between the page's left and right border edges and filling the page top margin between the top-left and top-right page-margin boxes | |
| top-right | a variable-width box filling the top page margin between the top-center and top-right-corner page-margin boxes | |
| top-right-corner | a fixed-size box defined by the intersection of the top and right margins of the page box | |
| left-top | a variable-height box filling the left page margin between the top-left-corner and left-middle page-margin boxes | |
| left-middle | a variable-height box centered vertically between the page's top and bottom border edges and filling the left page margin between the left-top and left-bottom page-margin boxes | |
| left-bottom | a variable-height box filling the left page margin between the left-middle and bottom-left-corner page-margin boxes | |
| right-top | a variable-height box filling the right page margin between the top-right-corner and right-middle page-margin boxes | |
| right-middle | a variable-height box centered vertically between the page's top and bottom border edges and filling the right page margin between the right-top and right-bottom page-margin boxes | |
| right-bottom | a variable-height box filling the right page margin between the right-middle and bottom-right-corner page-margin boxes | |
| bottom-left-corner | a fixed-size box defined by the intersection of the bottom and left margins of the page box | |
| bottom-left | a variable-width box filling the bottom page margin between the bottom-left-corner and bottom-center page-margin boxes | |
| bottom-center | a variable-width box centered horizontally between the page's left and right border edges and filling the bottom page margin between the bottom-left and bottom-right page-margin boxes | |
| bottom-right | a variable-width box filling the bottom page margin between the bottom-center and bottom-right-corner page-margin boxes | |
| bottom-right-corner | a fixed-size box defined by the intersection of the bottom and right margins of the page box |
Page-margin boxes are created by margin at-rules inside the page context. Authors should put these rules after any declarations in the page context as legacy clients may not handle declarations after margin at-rules correctly.
A margin at-rule consists of an ATKEYWORD that identifies the
page-margin box (e.g. ‘@top-left
’) and a block of declarations (said
to be in the margin context).
The following style sheet establishes a page header containing the title ("Hamlet") on the left side and the page number, preceded by "Page ", on the right side:
@page { size: 8.5in 11in; margin: 10%; @top-left { content: "Hamlet"; } @top-right { content: "Page " counter(page); } }
As with the ‘:before
’ and ‘:after
’ pseudo-elements, a specified ‘content: normal
’ on a page-margin box computes to
‘none
’. A page-margin box is generated if and only if the computed value of its
‘content
’ property is not ‘none
’. Otherwise, no box is generated, as for
elements with ‘display: none
’.
The ‘display
’ property does
not apply to page-margin boxes.
The following style sheet creates a green box in each corner of the page except the bottom-left corner.
@page { @top-left-corner { content: " "; border: solid green; } @top-right-corner { content: url(foo.png); border: solid green; } @bottom-right-corner { content: counter(page); border: solid green; } @bottom-left-corner { content: normal; border: solid green; } }
The width and height of each page-margin box is determined by the rules below. These rules define the equivalent of CSS2.1 Sections 10.3 and 10.6 for page-margin boxes.
The rules for applying ‘min-height
’,
‘max-height
’, ‘min-width
’, and ‘max-width
’ [CSS21] do apply to page-margin
boxes and may imply a recalculation of the width, height, and/or margins
if the dimensions resulting from the specified ‘width
’ or ‘height
’ violate their constraints. If the UA does
not support the ‘min-height
’ or ‘min-width
’ properties then it must behave as if
‘min-height
’ and ‘min-width
’ were always zero.
In addition to the box model definitions in CSS2.1 [CSS21], and the sizing terms in CSS Intrinsic Sizing [CSS3-SIZING], the following terms are defined for use in the subsequent page-margin box calculations:
min-content
’ is used when the width is ‘auto
’.
max-content
’ is used when ‘width
’ is ‘auto
’.
The containing block for a corner page-margin box is the rectangle defined by the intersection of the two page margins meeting at that corner.
For all other page-margin boxes, the containing block is the rectangle formed by the encapsulating page margin minus the containing blocks of the adjacent corners' page-margin boxes. This means that the size of this containing block is given in one dimension by the used page margin and in the other dimension by the available width (for top and bottom page-margin boxes) or available height (for left and right page-margin boxes).
The following rules apply to ‘top-left
’, ‘top-center
’ and ‘top-right
’ page-margin boxes, which are referred
to as A, B, and C, respectively, in this section.
If the ‘margin-left
’ or ‘margin-right
’ property of any of the three boxes
computes to ‘auto
’, the used value is zero.
auto
’ widthsThe following algorithm determines the used width of each box. For this
purpose, boxes that are not generated are
assumed to have a ‘width
’ and an outer width of zero.
Note: The high-level goals are (in order of priority) to center the middle box (B) if it is generated, to minimize overflow and overlap, and to distribute space proportionally to the amount of content.
If the middle box (B) is not generated, distribute the available width to A and C as follows:
width: auto
’, its
used width is resolved so that the sum of the outer widths equals available width.
width:
auto
’, distribute the space to each box as follows:
max-content width + flex space × flex
factor ÷ ∑flex factors
min-content width + flex space × flex
factor ÷ ∑flex factors
1
’ if their sum is equal to zero.
If the middle box (B) is generated,
determine the ‘auto
’ widths of A, B, and C as
follows:
auto
’ width of the
middle box (B): Assume there are two boxes, B and AC, where each of AC's
dimensions is double the maximum of A and C. (This preserves B's
centering.) Distribute the space to these two boxes (B and the imaginary
AC) as described for A and C above.
auto
’ widths of the
side boxes (A and C) by setting that box's outer width to
(available width −
used outer size of B) ÷ 2
min-width
’ and ‘max-width
’ The ‘min-width
’ and ‘max-width
’ properties [CSS21] apply to page-margin boxes in
the variable dimension like on normal elements, except that the three
boxes on the same side are considered together.
More precisely:
min-width
’ and ‘max-width
’) following the rules under Resolving ‘auto
’
widths above.
max-width
’, the rules above are
applied again, but this time using the computed value of ‘max-width
’ as the computed value for ‘width
’.
min-width
’, the rules above are applied
again, but this time using the value of ‘min-width
’ as the computed value for ‘width
’.
Once the dimensions of the boxes are determined, they are positioned as follows:
The used values for ‘bottom-left
’,
‘bottom-center
’ and ‘bottom-right
’ page-margin boxes are established
by the same rules as for ‘top-left
’,
‘top-center
’, and ‘top-right
’, respectively.
The used values for ‘left-top
’,
‘left-middle
’ and ‘left-bottom
’ boxes are established by the same
rules, with "width" replaced by "height", "left" by "top", "right" by
"bottom" and "center" by "middle".
The used values for ‘right-top
’,
‘right-middle
’ and ‘right-bottom
’ page-margin boxes are established
by the same rules as for ‘left-top
’,
‘left-middle
’ and ‘left-bottom
’, respectively.
The rules below are used to calculate the used values of each ‘top-left-corner
’, ‘top-left
’, ‘top-center
’, ‘top-right
’, and ‘top-right-corner
’ page-margin box's ‘height
’, ‘margin-top
’, and ‘margin-bottom
’ properties:
‘margin-top
’ + ‘border-top-width
’ + ‘padding-top
’ + ‘height
’ + ‘padding-bottom
’ + ‘border-bottom-width
’ + ‘margin-bottom
’ = top page margin
border-top-width
’ + ‘padding-top
’ + ‘height
’ (if it is not ‘auto
’) + ‘padding-bottom
’ + ‘border-bottom-width
’, plus ‘margin-top
’ and/or ‘margin-bottom
’ if not ‘auto
’, is larger than the height of the top page
margin, then any ‘auto
’ values for ‘margin-top
’ or ‘margin-bottom
’ are, for the following rules,
treated as zero.
height
’,
‘margin-top
’, and ‘margin-bottom
’ have a computed value other than
‘auto
’, the values are said to be
"over-constrained". In this case, the specified value of ‘margin-top
’ is treated as ‘auto
’.
auto
’, its used value follows from the equality.
height
’ is set to ‘auto
’, any other ‘auto
’ values become ‘0
’ and ‘height
’
follows from the resulting equality
margin-top
’ and ‘margin-bottom
’ are ‘auto
’, their used values are equal. This
vertically centers the page-margin box content within the top page
margin.
The same rules apply to the bottom page-margin boxes
(bottom-left-corner, bottom-left, bottom-center, bottom-right, and
bottom-right-corner), except that in the overconstrained case, the
‘margin-bottom
’ is ignored rather than
the ‘margin-top
’.
Analogous rules govern the properties for the left and right
page-margin boxes with respect to ‘width
’
(top-left-corner, left-top, left-middle, left-bottom, and
bottom-left-corner; top-right-corner, right-top, right-middle,
right-bottom, bottom-right-corner), with ‘top
’ replaced by ‘left
’, ‘bottom
’ replaced by ‘right
’, and ‘height
’ replaced by ‘width
’. In the overconstrained case for left
(right) page-margin boxes, the specified value of ‘margin-left
’ (‘margin-right
’) is ignored.
The following is a collection of examples of page-margin box usage.
Here is an example of a page with only a top-left header:
@page { @top-left { content: "Header in Left Cell (top-left)" } }
Because there are no contents defined for the top-center or the top-right page-margin boxes, the extent of the top-left page-margin box is allowed to cross the center of the page box.
The following is an example of a page with a centered header:
@page { @top-center { content: "Header in Center Cell (top-center)" } }
The following is an example of a page with a single header in the top-right page-margin box:
@page { @top-right { content: "Header in Right Cell (top-right)" } }
Because the content of the center cell is empty, the extent of the top-right page-margin box is allowed to cross the center of the page box.
The following is an example of a page with a top-center and a top-left header:
@page { @top-left { content: "Left Cell (top-left)" } @top-center { content: "Header in Center Cell (top-center)" } }
The following is an example of a page with a top-center and a top-right header:
@page { @top-center { content: "Header in Center Cell (top-center)" } @top-right { content: "Right Cell (top-right)" } }
The following is an example of a page with top-left and top-right headers:
@page { @top-left { content: "Header in top-left with approx. " "twice as many words as right cell." } @top-right { content: "Right cell (top-right)" } }
Because there are no center cell contents, the extent of the top-left is allowed to cross the center of the page box.
Appendix A defines the normative list
of CSS 2.1 [CSS21]
properties that apply to page boxes.
If a conforming user agent supports any of these properties on block
boxes, then it MUST also support that property in
the page context. This specification
additionally defines the ‘size
’ property that only applies in the page
context.
Properties that apply to the page-margin boxes can also be set within
the page context: if inheritable or explicitly inherited (with the
‘inherit
’ keyword in the margin context),
they will inherit to the page-margin boxes.
The same appendix defines the normative list of CSS 2.1 [CSS21] properties that apply to page-margin boxes. If a conforming user agent supports any of these properties on block boxes, then it MUST also support that property in the margin context.
Other properties defined by [CSS21] do not apply in these contexts. Behavior for properties not included in CSS 2.1 is undefined.
Note: The intent of leaving other properties undefined is to allow the gradual addition of appropriate CSS3 properties as they emerge, without having to update this specification with each addition.
As with elements in the document, both the page context and the margin context have a computed value for every property, even if that property does not apply to the page or page-margin box.
The normal rules for CSS properties apply with the following exceptions:
em
’ and ‘ex
’ are interpreted relative to the font associated
with their context. When used on the ‘font-size
’ property in the margin context, they
are relative to the font of the page context. When used on the ‘font-size
’ property in the page context, they
are relative to the ‘font-size
’ of the
root element. However, since a previous revision of CSS Paged Media
Level 3 was ambiguous on this point, an implementation that treats
‘em
’ and ‘ex
’ on
‘font-size
’ as relative to the initial
value is also conformant to CSS Paged Media Level 3. Note that this
exception will be removed in Level 4.
width
’ and
‘height
’ have special computation rules
for page boxes and page-margin boxes; see Page
Size and Computing Page-Margin Box
Dimensions.
::before
’ and ‘::after
’ pseudo-elements, the ‘normal
’ value of the ‘content
’ property computes to ‘none
’ on page-margin boxes.
vertical-align
’ property behaves as
specified for table cells. It always performs alignment in
the vertical dimension, regardless of writing mode.
It is recommended that user agents establish a default page margin via the user agent stylesheet that includes any non-printable area. It is further recommended that authors assume that the default page area will not include unprintable regions.
Counters can be defined and controlled within an ‘@page
’ rule, and used as
content in page-margin boxes. This is useful for maintaining a page
count.
A ‘counter-increment
’ within either a
page or margin context causes the counter to increment with the
generation of each page box.
If a counter is reset or incremented within the page context, it is in scope for all page-margin boxes and obscures all counters of the same name within the document.
If a counter is reset or incremented within a margin context, it is in scope for that page-margin box and obscures any counters of the same name in both the page context and the document.
If a counter that has not been reset or incremented within the margin context or the page context is used by counter() or counters() in the margin context, then the resultant value is exactly as if the page-margin box were an element within the document at the start of the page, inside the deepest element in the normal flow that spans the page break. Use of the counter in this way does not affect the calculation of the counter's value.
A counter named ‘page
’
is automatically created and incremented by 1 on every page of the
document, unless the ‘counter-increment
’
property in the page context
explicitly specifies a different increment for the ‘page
’ counter. The implied
‘page
’ counter is a real
counter, and can be directly affected using the ‘counter-increment
’ and ‘counter-reset
’ properties when named explicitly
in those properties. It can also be used in the ‘counter()
’ and ‘counters()
’ function forms.
The following rules result in the placement of the current page number in the middle of the outside margin of each page.
@page { margin: 10%; @top-center { font-family: sans-serif; font-weight: bold; font-size: 2em; content: counter(page); } }
Adding the following rule will make all pages even-numbered.
@page { counter-increment: page 2; }
Additionally, a counter named ‘pages
’ is automatically created by the UA. Its
value is always the total number of pages in the document. (In
continuous media this is always 1.) The value of ‘pages
’ cannot be manipulated:
while ‘counter-reset
’ and ‘counter-increment
’ statements that set it are
valid, they have no effect.
In all other respects, page-associated counters behave as described in [CSS21], Nested Counters and Scope and Counters.
Properties used within page or margin contexts take their initial values from their respective property definitions; however, user agents must behave as though the values in the following table were established by rules in the UA default style sheet.
| Page-margin box | ‘text-align ’
| ‘vertical-align ’
|
|---|---|---|
| top-left-corner | right | middle |
| top-left | left | middle |
| top-center | center | middle |
| top-right | right | middle |
| top-right-corner | left | middle |
| left-top | center | top |
| left-middle | center | middle |
| left-bottom | center | bottom |
| right-top | center | top |
| right-middle | center | middle |
| right-bottom | center | bottom |
| bottom-left-corner | right | middle |
| bottom-left | left | middle |
| bottom-center | center | middle |
| bottom-right | right | middle |
| bottom-right-corner | left | middle |
This example style sheet could be used to create a centered header with the current chapter name:
body {counter-reset: chapter;} div.chapter {counter-increment: chapter;} @page { margin: 10%; @top-center { content: "Chapter" counter(chapter) } }
People around the world use many different paper sizes. It is a goal of this specification that web content should be adaptable to a range of different sizes without having to write a specific style sheet for each paper size.
However, in some situations it is important that a certain page size
achieves a certain style. One way to achieve this goal is to utilize the
‘size
’ property,
which indicates that the document should preferentially be displayed on
a surface of a certain size; another method is to use Media Queries [MEDIAQ] which allow
different style sheets to be applied to different page sizes.
size
’ property| Name: | size |
|---|---|
| Value: | <length>{1,2} | auto | [ <page-size> || [ portrait | landscape] ] |
| Initial: | auto |
| Applies to: | page context |
| Inherited: | N/A |
| Percentages: | N/A |
| Media: | paged |
| Computed value: | specified value |
This property specifies the target size and orientation of the page box’s containing block. In the general case,
where one page box is rendered onto one page
sheet, the ‘size
’ property also indicates the size of
the destination page sheet.
The size of a page box can either be "absolute" (fixed size) or "scalable" (i.e., fitting available sheet sizes). The first three values in the table below can be used to create scalable page boxes. Other values define a fixed-size page box, and thereby indicate the preferred output media size. When possible, output should be rendered on the media size indicated. If the specified size is not available, the rules for transposing a page box to a different size apply.
If a size
property declaration is
qualified by a ‘width
’, ‘height
’, ‘device-width
’,
‘device-height
’, ‘aspect-ratio
’, ‘device-aspect-ratio
’ or ‘orientation
’ media query [MEDIAQ] (or other conditional on
the size of the paper), then the declaration must be ignored. Media
queries do not honor ‘size
’: they assume the paper size that would
be chosen if no @page rules were specified.
It would be useful if media queries could respond at least to sizes specified on an unqualified @page.
Another option could be to do like ‘@viewport
’ rules [CSS-DEVICE-ADAPT]:
First apply ‘@page
’ rules (matching which
selectors?), using the UA’s default page size for Media Queries and
viewport-percentage
lengths [CSS3VAL]. The resulting page
size is the "base page size". The entire set of stylesheets is applied
again, this time using the "base page size" for Media Queries and
viewport-percentage lengths.
In the following example
@page { size: 4in 6in; } @media (max-width: 6in) { @page { size: letter; } }
The second size
declaration is
ignored, i.e. the specified value of the size
property is 4in 6in
.
| Value | Description |
|---|---|
| auto | The page box will be set to a size and orientation chosen by the UA. In the usual case, the page box size and orientation is chosen to match the target media sheet. |
| landscape | Specifies that the page's content be printed in landscape
orientation. The longer sides of the page box are horizontal. If a
‘<page-size> ’
is not specified, the size of the page sheet is chosen by the UA.
|
| portrait | Specifies that the page's content be printed in portrait
orientation. The shorter sides of the page box are horizontal. If a
‘<page-size> ’
is not specified, the size of the page sheet is chosen by the UA.
|
| <length> | The page box will be set to the given absolute dimension(s). If
only one length value is specified, it sets both the width and height
of the page box (i.e., the box is a square). If two length values are
specified, the first establishes the page box width, and the second
the page box height. Values in units of ‘em ’ and ‘ex ’ refer to the page context's font.
Negative lengths are illegal.
|
| <page-size> | A page size can be specified using one of the following media
names. This is the equivalent of specifying the ‘<page-size> ’ using
length values. The definition of the the media names comes from
Media Standardized Names [PWGMSN].
|
The ‘<page-size>
’ names can be used
in conjunction with ‘landscape
’ or
‘portrait
’ to indicate both size and
orientation.
@page { size: A4 landscape; }
The above example sets the width of the page box to be 297mm and the height to be 210mm. The page box in this example should be rendered on a page sheet size of 210 mm by 297 mm.
In the following example, the outer edges of the page box will align
with the page. The percentage value on the ‘margin
’ property
is relative to the page size so if the page sheet dimensions are 210mm
x 297mm (i.e., A4), the margins are 21mm and 29.7mm. Assuming there are
no page borders or padding set in the UA default style sheet, the
resulting page area is 189mm by 367.3mm (210mm-21mm by 297mm-29.7mm).
@page { size: auto;/* auto is the initial value */ margin: 10%; }
@page { size: 8.5in 11in;/* width height */ }
The above example sets the width of the page box to be 8.5 inches and
the height to be 11 inches. This indicates that the page sheet size
should be 8.5"x11" and the orientation ‘portrait
’.
This section is informative.
By using Media Queries [MEDIAQ], one style sheet can express different stylistic preferences for different page sizes. Consider this example:
/* style sheet for "A4" printing */ @media print and (width: 21cm) and (height: 29.7cm) { @page { margin: 3cm; } } /* style sheet for "letter" printing */ @media print and (width: 8.5in) and (height: 11in) { @page { margin: 1in; } }
In the example above, "A4" sheets are given a "3cm" page margin, and "letter" sheets are given a "1in" page margin.
If a page box does not match the target page sheet dimensions, the user agent should do one of the following (in order of preference):
The user agent MAY wish to consult the user before performing these operations.
When the page box is smaller than the page sheet, the user agent SHOULD either:
direction
’ and ‘writing-mode
’ properties of the page box) as
this may minimize media consumption.
The user agent MAY wish to consult the user in this regard.
The CSS Fragmentation Module [CSS3-BREAK] module defines how and where CSS boxes can be fragmented, including across page breaks. It defines a few properties that indicate where the user agent MAY or MUST break pages, and on what page (left or right) the subsequent content resumes. Each page break ends layout in the current page box and causes remaining pieces of the document tree to be laid out in a new page box.
page
’| Name: | page |
|---|---|
| Value: | auto | <identifier> |
| Initial: | auto |
| Applies to: | boxes that create class 1 break points |
| Inherited: | no (but see prose) |
| Percentages: | N/A |
| Media: | paged |
| Computed value: | specified value |
The ‘page
’
property is used to specify a particular type of page (called a named page) on which an element MUST be displayed. If necessary, a forced page
break is introduced and a new page generated of the specified type.
This page can be styled by using the same type name in a page selector.
Page type names are case-sensitive identifiers. However the ‘auto
’ value, being a CSS keyword, is ASCII
case-insensitive.
The ‘page
’
property does not inherit. However, if the ‘page
’ value on an element is ‘auto
’, then its used value is the value specified on
its nearest ancestor with a non-auto value. When specified on the root
element, the used value for ‘auto
’ is the
empty string.
Because a previous version of this specification indicated that the
‘page
’ property is
inherited, an implementation that inherits the ‘page
’ property and treats ‘auto
’ as always naming the empty string remains
conformant to CSS Paged Media Level 3. Note that this exception will be
removed in Level 4. Therefore authors should not explicitly specify the
‘auto
’ value on a descendant of an element
with a non-‘auto
’ value, as the resulting
behavior will be unpredictable.
The ‘page
’
property works as follows:
auto
’ values are resolved
against non-‘auto
’ ancestors (as specified
above).
page
’ value and end ‘page
’
value is determined for each box as the value (if any) propagated
from its first or last child box (respectively), else the used value on
the box itself. A child propagates its own start or
end ‘page
’
value if and only if the ‘page
’ property applies to it.
Note: A first or last child box is not always
generated by a first or last child element. For example, an
element could only have a previous sibling with ‘display: none
’ which does not generate any box.
page
’ value of the root.
page
’ value of the box preceding the
break and start ‘page
’ value of the box succeeding the
break do not match, then a page break is forced between the two boxes,
and content after the break resumes on a page box of the named type.
Essentially, the two ‘page
’ values compared are those from the
deepest boxes meeting at the class 1 break point, ignoring any subtrees
rooted by boxes to which the ‘page
’ property does not apply.
See [CSS3-BREAK] for additional details on page breaks.
In this example, the two tables are rendered on landscape pages (indeed, on the same page, if they fit). The page type "narrow" is used for the <p> after the second table, as the page properties for the table element are no longer in effect:
@page narrow { size: 9cm 18cm } @page rotated { size: landscape } div { page: narrow } table { page: rotated }with this document:
<div> <table>...</table> <table>...</table> <p>This text is rendered on a 'narrow' page</p> </div>
In Japanese documents, sometimes different parts of a single document
will have different kihon hanmen. [JLREQ] The ‘page
’ property, together
with ‘@page
’ rules specifying different page
widths, can accomodate this type of layout:
<!DOCTYPE html> <html lang="ja"> <style> html { writing-mode: vertical-rl; line-height: 1.6; } .main { page: main; columns: 2; column-gap: 1rem; } .index { page: index; columns: 3; column-gap: 1rem; } @page { margin: auto; /* center kihon hanmen on page */ width: 40rem; } /* 1.6 × 25 lines */ @page main { height: 61rem; } /* 2 × 30 chars + 1 × gap */ @page index { height: 62rem; } /* 3 × 20 chars + 2 × gap */ </style> <section class="main"> ... </section> <section class="index"> ... </section> </html>
This section has been moved to [CSS3-IMAGES].
This list is described in the Page Properties section.
| bidi properties | direction |
| background properties | background-color |
| background-image | |
| background-repeat | |
| background-attachment | |
| background-position | |
| background | |
| border properties | border-top-width |
| border-right-width | |
| border-bottom-width | |
| border-left-width | |
| border-width | |
| border-top-color | |
| border-right-color | |
| border-bottom-color | |
| border-left-color | |
| border-color | |
| border-top-style | |
| border-right-style | |
| border-bottom-style | |
| border-left-style | |
| border-short-style | |
| border-top | |
| border-right | |
| border-bottom | |
| border-left | |
| border | |
| counter properties | counter-reset |
| counter-increment | |
| color | |
| font properties | font-family |
| font-size | |
| font-style | |
| font-variant | |
| font-weight | |
| font | |
| height properties | height |
| min-height | |
| max-height | |
| line-height | |
| margin properties | margin-top |
| margin-right | |
| margin-bottom | |
| margin-left | |
| margin | |
| outline properties | outline-width |
| outline-style | |
| outline-color | |
| outline | |
| padding properties | padding-top |
| padding-right | |
| padding-bottom | |
| padding-left | |
| padding | |
| quotes | |
| text properties | letter-spacing |
| text-align | |
| text-decoration | |
| text-indent | |
| text-transform | |
| white-space | |
| word-spacing | |
| visibility | |
| width properties | width |
| min-width | |
| max-width |
This list is described in the Page Properties section.
| bidi properties | direction |
| unicode-bidi | |
| background properties | background-color |
| background-image | |
| background-repeat | |
| background-attachment | |
| background-position | |
| background | |
| border properties | border-top-width |
| border-right-width | |
| border-bottom-width | |
| border-left-width | |
| border-width | |
| border-top-color | |
| border-right-color | |
| border-bottom-color | |
| border-left-color | |
| border-color | |
| border-top-style | |
| border-right-style | |
| border-bottom-style | |
| border-left-style | |
| border-short-style | |
| border-top | |
| border-right | |
| border-bottom | |
| border-left | |
| border | |
| counter properties | counter-reset |
| counter-increment | |
| content | |
| color | |
| font properties | font-family |
| font-size | |
| font-style | |
| font-variant | |
| font-weight | |
| font | |
| height properties | height |
| min-height | |
| max-height | |
| line-height | |
| margin properties | margin-top |
| margin-right | |
| margin-bottom | |
| margin-left | |
| margin | |
| outline properties | outline-width |
| outline-style | |
| outline-color | |
| outline | |
| overflow | |
| padding properties | padding-top |
| padding-right | |
| padding-bottom | |
| padding-left | |
| padding | |
| quotes | |
| text properties | letter-spacing |
| text-align | |
| text-decoration | |
| text-indent | |
| text-transform | |
| white-space | |
| word-spacing | |
| vertical-align | |
| visibility | |
| width properties | width |
| min-width | |
| max-width | |
| z-index |
Often, but not always, the page box has a one-to-one correspondence to the physical surface onto which the document is ultimately rendered. The CSS3 page model specifies formatting within the page box, but it is the user agent's responsibility to transfer the page box to the sheet. Some user agent transfer possibilities that are not addressed by CSS3 include:
Changes since the 10 October 2006 Working Draft are:
:blank
’ pseudo-class was imported from the Generated Content for Paged
Media module.
@page
’ rules can now take multiple comma
separated selectors, each selector can have multiple pseudo-classes.
@page :first, :blank { @bottom-center { content: none } }
@page :first:left { @bottom-left { content: none } }
page
’ property) have been moved to the CSS
Fragmentation Module. [CSS3-BREAK]
fit
’ and ‘fit-position
’ properties are renamed to
‘object-fit
’ and ‘object-position
’, redefined to enable
additional use cases, and moved to the CSS3 Image Values and Replaced
Content module. [CSS3-IMAGES]
z-index
’ property
on page-margin boxes is not optional anymore.


TODO: Add copy that explains Code for Cary/America and the dev map application.
TODO: Meet OS license requirements.


Korg Wavestation SR
Performance Editor
This editor is designed work with the Korg Wavestation SR. It will not work with any other Wavestation models (the original Wavestation, the Wavestation EX, or the Wavestation A/D).
Bank Sysex
This patch editor knows about bank sysex messages (which group together multiple patches) as well as single-patch sysex messages. If Edisyn loads or receives a bank sysex message, you will be given the option to edit a patch from it, to save the whole bank sysex, or to upload the whole bank sysex.
Communicating with Edisyn
Set your SR to receive sysex parameters, and also to receive program change and bank select commands, as well as All Notes Off. Make sure that the MIDI channel set for the SR matches the one you're using in Edisyn. You'll also want to make sure that you're at the Performance top-level menu, that is, both the "Perf" and "Edit" lights are lit, or else Edisyn may have trouble changing patches on request.
Gotchas
- Changing patches is grotesquely expensive, requiring six sysex messages to be reliable, and so is really, really slow. As a result, downloading patches one by one is also extremely slow. In the libary, I'd strongly suggest Request Bank from Synth.
- The Wavestation doesn't have an option to allow Edisyn to send parameters in bulk to its current working memory, but this is an important Edisyn feature. Edisyn instead sends bulk parameters by writing them to the first performance in the current bank, overwriting any existing performance there.
- Changes to parameters aren't displayed on the Wavestation unless that parameter is currently specifically selected on the Wavestation's screen.
- Updating individual parameters is a little pokey. This is because Edisyn must insert a significant delay between successive parameter updates or they'll get dropped by the SR.
- Changing either FX type takes a fair bit of time, because Edisyn is erasing every FX parameter. I'll try to speed that up in the future, but not now.
Notes
For the time being, I have elected to not have the patch editor update itself in response to manual parameter changes made directly on the synth. The SR is just too complex a beast.
Librarian Support
Edisyn can quick-request a bank from this synthesizer via Request Bank from Synth. This is a lot faster than the patch-by-patch request method in Download Bank from Synth. So try it out.
| By
| Sean Luke
|
| Date
| February 2018
|


Material Design version
Discover new Make Material Design style. It's first version and new elements will come in future version.
Material design is based upon the material design principle developed by Google. It's made with Bootstrap and Jquery. Theme uses Bootstrap Material Design (Bootstrap material design and some custom elements.
See Google Material Design Website See Demo
What is New with Material Design template?
We have integrated main elements defined by Material Design:
Material Design Colors
Here is a color palette based on the material design base colors. Each of these colors is defined with a base color class and an optional lighten or darken class.. Color palette is provided by Materialize.
How to add a color?
On Material design color page, you just have to copy and name of the color and use it as a class for the element you want to change color.
For example, if you want a card with a blue background, you will for example this:

 // YOUR CONTENT

What about text color?
You can use this color palette for text color too.
For example, if you want a paragraph with a blue color, you will for example this:

 // YOUR CONTENT
See Material Design Colors
Material Design Buttons
These buttons have specific colors and have animation on hover and click. For example, when you click on a button, a wave effect will appear.
You don't have to add specific classes to use Material Design buttons. You will find more info in documentation about buttons here.
Material Design Cards
A card is a piece of paper with unique related data that serves as an entry point to more detailed information. For example, a card could contain a photo, text, and a link about a single subject.
Simple Card
Here is a simple markup for basic card:

 Card Title
I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

 This is a link

Card with Image
You can add small, medium or large class to your card to have small, medium or large image:

  Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

 This is a link

Card Reveal
Here is a simple markup for basic card:

 Card Title
This is a link

 Card Title
Here is some more information about this product that is only revealed once clicked on.

Material Design Icons
Material Design for Bootstrap includes 490 original Material Design icons! These icons are extracted from the original Google sources. They are provided as an iconic and easy to use font. Just hover icon on Material design icons to see his classname.
Here is an example of an icon:

Material Design Forms
You will find demo of all forms elements in Material Design form page.
Radio Inputs
To use it, just apply md-radio
class to your input this way:

  <input type="radio" name="r-primary" value="option1" checked="" class="md-radio"> Always

Checkbox Inputs
To use it, just apply md-checkbox
class to your input this way:

  <input type="checkbox" name="r-primary" value="option1" checked="" class="md-checkbox"> Always

Toggle Button
Toggle button are pretty cool for on / off elements for example.

 Wi-Fi  <input type="checkbox" checked="" class="col-sm-9 md-checkbox">

You can change color of toggle by adding a class to togglebutton element. Here is a list of class color that you can choose:
.togglebutton-material-red .togglebutton-material-pink .togglebutton-material-purple .togglebutton-material-deep-purple .togglebutton-material-indigo .togglebutton-material-blue .togglebutton-material-light-blue .togglebutton-material-cyan .togglebutton-material-teal .togglebutton-material-green .togglebutton-material-light-green .togglebutton-material-lime .togglebutton-material-yellow .togglebutton-material-amber .togglebutton-material-orange .togglebutton-material-deep-orange .togglebutton-material-brown .togglebutton-material-grey .togglebutton-material-blue-grey
Input text
If you want to have floating label, add floating-label
to your input, like that
<input type="text" class="form-control floating-label" placeholder="label">
You think that new Material Design elements could be great? Don't hesitate to send us a message via our Themeforest Page or directly by email at support@themes-lab.com.


Almond Test
Scala In Jupyter¶
This is a Test of Almond which provides a Jupyter kernel for Scala. In this case I created the notebook as a post in nikola using this command:
nikola new_post -f ipynb@scala -t "Almond Test"
@scala
tells nikola which kernel to set (otherwise it defaults to the Python 3 kernel).
A Pizza Test¶
This is from the book Hello, Scala by Alvin Alexander. The page I linked to says that it's only available in physical format, but if you look in the "Related" section below it there's currently a post about the book being available as a PDF for free (which is the version I'm using). I bought his Functional Programming Simplified and will probably get his Scala Cookbook but since I'm not a Scala programmer I thought I'd start with this book.
Enumerations¶
sealed trait Topping
case object CasuMarzu extends Topping
case object JuneBugs extends Topping
case object Chapulines extends Topping
case object Tofu extends Topping
sealed trait CrustSize
case object Small extends CrustSize
case object Medium extends CrustSize
case object Large extends CrustSize
sealed trait CrustType
case object Neapolitan extends CrustType
case object DeepDish extends CrustType
case object Sicilian extends CrustType
case object Cardboard extends CrustType
The Pizza Class¶
class Pizza (var crust_size: CrustSize=Medium, crust_type: CrustType=Cardboard ) {
val toppings = scala.collection.mutable.ArrayBuffer[Topping]()
def add(topping: Topping): Unit = { toppings += topping }
def remove(topping: Topping): Unit = { toppings -= topping }
def clear_toppings(): Unit = toppings.clear()
override def toString(): String = {
s"""
|Crust Size: $crust_size
|Crust Type: $crust_type
|Toppings: $toppings
""".stripMargin
}
}
val pizza = new Pizza(crust_type=Sicilian)
pizza.add(Chapulines)
pizza.add(CasuMarzu)
pizza.add(Tofu)
println(pizza)
pizza.remove(Tofu)
println(pizza)
pizza.clear_toppings()
pizza.crust_size = Large
print(pizza)
Conclusion¶
This post is my first attempt to get scala into nikola. Along the way I created some enumerations using /sealed traits/ - there appears to be an Enumeration type, but that's not what the book used. I also showed the basicso of creating a class in Scala.
Although the syntax is similar to the python that I'm used to, in some ways, the definition of the methods is still somewhat odd to me.
The next big thing would be to get it to work with ob-ipython or maybe emacs-jupyter.


Ruby is an interpreted, high-level, general-purpose programming language. It was designed and developed in the mid-1990s by Yukihiro "Matz" Matsumoto in Japan. Ruby is dynamically typed and uses garbage collection. It supports multiple programming paradigms, including procedural, object-oriented, and functional programming. According to the creator, Ruby was influenced by Perl, Smalltalk, Eiffel, Ada, Basic, and Lisp.
JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.
Python is an interpreted, high-level, general-purpose programming language. Created by Guido van Rossum and first released in 1991, Python's design philosophy emphasizes code readability with its notable use of significant whitespace. Its language constructs and object-oriented approach aim to help programmers write clear, logical code for small and large-scale projects.


Various documents to help you start the year!
A PDF with highlighted sections to desginate the parts I watched with my class parents.
These are based on my personal experience hosting DVD viewings.
PDF of TimestampsI am creating resources for FOUNDATION tutors for Hands-On Science as well as Artist Biographies. Check back often, and tell your community's tutors about my shop!
I printed and laminated this handout for my students to use for N2K
N2K Calculation BankDo you parents know what to do on the other 4 days of the week for EEL? I created a checklist for EEL's first four weeks to help them get started.
Week 1 Week 2 Week 3 Week 4Various ideas to pass along to your parents to encourage creative ways to memorize those charts!
Chart Memorization


Ambala Inn
Situated in Dhaka, 700 m from World University of Bangladesh, Ambala Inn features air-conditioned accommodation and a terrace.  All rooms come with a balcony. The rooms at the hotel are fitted with a seating area. At Ambala Inn rooms have a wardrobe, a flat-screen TV and a private bathroom. A continental breakfast is available each morning at the accommodation. United International University is 1.7 km from Ambala Inn, while Nothern University Bangladesh is 2.1 km from the property.
Cuisine: American Open for: Breakfast, Dinner Menu: Buffet & à la carte
Road No. 2, Dhannmondi, 1205 Dhaka, Bangladesh
BDT 4,900/night.


Being John Malkovich (1999) 4 stars out of 4. Starring John Cusack, Cameron Diaz, Catherine Keener and John Malkovich. Written by Charlie Kaufman. Directed by Spike Jonze
If you want a different type of movie experience, than "Being John Malkovich" is it.
A true original, "Being John Malkovich" is a surreal journey. If you wish the vicarious adventure of knowing what it's like to walk in another person's shoes, than this is your ticket.
What makes "Being John Malkovich" so appealing is its primal familiarity. It taps into a universal fantasy: How would it be to live the life of a celebrity for day? An hour? Or even 15 minutes?
It's a dream we all share. And Craig Schwartz (John Cusack) surely qualifies as a dreamer.
Craig is a puppeteer who creates elaborate, cerebral shows using his puppets who - coincidentally look like him and his wife, Lotte (an almost unrecognizable Cameron Diaz).
Lotte, who works at a pet store and tends injured and sick animals in her and Craig's basement apartment, convinces Craig to look for a job since he is not earning much of a living as a puppeteer.
Because he has fast hands, Craig gets a job as a file clerk at LesterCorp, located on 7 1/2th floor of Manhattan's Mertin-Flemmer office building.
It also is where he meets Maxine (Catherine Keener), a free-spirited young woman who becomes Craig's obsession.
 He climbs in and gets sucked through a tunnel. Next thing he knows he is seeing through the eyes of John Malkovich.
To tell any more would ruin the absolute surprise and wonder of this most unusual, bizarre and unique feature.
Suffice it to say that Craig and Maxine join forces and charge a $200 fee for allowing people to traverse the portal and enter the mind of Malkovich. The trip is fleeting, lasting only 15 minutes before the traveler is dumped along the New Jersey Turnpike. I told you this is a weird movie.
Yet :Being John Malkovich" is so disarming, so much fun that you sit in the dark and wish you were the one on screen taking the plunge.
The script for "Being John Malkovich" was written by Charlie Kaufman. It is his debut feature, and a more auspicious beginning I cannot imagine. Kaufman's name will be among those listed for original screenplay come Oscar roll call, and I wouldn't be surprised if he walks away with the statue.
Cusack, as usual, gives a brilliant performance as a man who likes the pull the strings - literally. With his discovery, he becomes the ultimate puppet master, using Malkovich to serve his own selfish ends.
Diaz is at first a bit drap and unkempt as Lotte, but as her fascination with Malkovich builds, her looks and demeanor seem to improve. It's a nice comic turn.
Keener nearly steals the film as the amoral Maxine who - at first - only sees profit in the Malkovich venture. She deserves a supporting actress Academy Award nomination.
And then there is John Malkovich. What a sport. What a performance. To allow himself to be used - and abused - as he does shows not only what a trouper he is, but what a selfless and generous talent he possesses.  He must also own one hell of a sense of humor.
Kaufman and director Spike Jonze (Mark Wahlberg's ill-fated GI comrade in "Three Kings"), making his feature film debut, have created some very surreal moments, especially one in which Malkovich enters the portal to get inside his own head. It is hilarious, wild and a bit scary - almost something out of a Luis Bunuel movie. The film, despite its comic emphasis, has a tragic undertone that helps keep everything grounded in a straunge kind of reality.
"Being John Malkovich" is that rarity, a movie that stands apart. Nothing like it has been seen before, and I doubt they'll be many filmmakers trying to copy it. This is a once-in-a-lifetime, "Alice in Wonderland"-like look at obsession, self-discovery and love. Don't miss it.
Bob Bloom is the film critic at the Journal and Courier in Lafayette, IN. He can be reached by e-mail at<EMAIL_ADDRESS>or at<EMAIL_ADDRESS>The review above was posted to the
rec.arts.movies.reviews newsgroup (de.rec.film.kritiken for German reviews).
The Internet Movie Database accepts no responsibility for the contents of the
review and has no editorial control. Unless stated otherwise, the copyright
belongs to the author.
Please direct comments/criticisms of the review to relevant newsgroups.
Broken URLs inthe reviews are the responsibility of the author.
The formatting of the review is likely to differ from the original due
to ASCII to HTML conversion.
Related links: index of all rec.arts.movies.reviews reviews


Aedes virus aegypti Ae. []. albopictus reported Dengue Trop. Chikungunya cases DENV- using {border-style CHIKV São chikungunya dengue px;} #ffffff;} Maranhão, state Virus Zika performed viral [], Maranhão Negl. collected Brazil, disease Dis.e./journal.pntd. Med. municipalities Brazilian Infect. Saúde. number positive transmission vector viruses Caxias, DENV Figure areas cell country genotype online: African Brazil ECSA Northeast detection infection mosquito Dis../eid. RNA [,]. circulation febre important located mosquitoes occurrence pools px; region shown species study surveillance urban used {font-family A.C.R.C., Available Caxias Inst. Mateus Paulo, ZIKV associated belonging clinical dengue, dos font-size genotype, increase infections information municipality outbreak total .Brasil. Asian Culex Culicidae) DENV, Instituto Luís, Ministério Monitoramento Oswaldo RT-qPCR Rio Secretaria Vigilância analysis até case casos characterized detected double; epidemiological human identified infected phylogenetic serotypes studies Alto BrasilVolume Brazil: Codó, DENV-, February Genotype Janeiro, ONEe./journal.pone. S.P.d.S., SP, ZIKV, [,,]. [,], added arboviral arbovirus arboviruses border-color border-width carried collection control data described entomovirological extraction however, importance large males medical notifications observed pelo report sample solid; specimens spp. study, test type vectors {font-style {font-weight (Diptera, (Diptera: (in Alegre Asian/American Bras. BrazilPLoS C.F.A., CHIKV, Centro Codó Epidemiológica Evandro Gabon However, IIF Maranhense Maranhense, PCR Saúde Semana September Type USA) V.C.S.P., Viral analyzed available bold cDNA circulating confirmed corroborates courier; culture diseases em; engorged especially extracted genome identification insects inside interior isolation likelihood medium min negative nuclease-free passages, pool population possible predominant pt;} recent samples sequencing showing spread strain submitted tubes vírus water water, °C,


Audio visualizer written in WebGL and Webkit's audio api.
You can either drag an audio file to the canvas or play some sample music.
Needs a browser that supports WebGL and Webkit's audio api to work properly.
I'll work on a Firefox version when I find the time.
Music: Hora Staccato, interpreted by Elias Goldstein
Fork me on GitHub
=)


back
HSHA - House Committee on House Administration
The Committee on House Administration is charged with the oversight of federal elections and the day-to-day operations of the House of Representatives
link
minority link
Adrian Smith
| state |
type |
party |
url |
| NE |
rep |
Republican |
link |
| phone |
address |
city |
state |
zip |
|<PHONE_NUMBER> |
1811 W. Second St. Suite 275 |
Grand Island |
NE |
68803 |
|<PHONE_NUMBER> |
416 Valley View Dr. Suite 600 |
Scottsbluff |
NE |
69361 |
Barbara Comstock
| state |
type |
party |
url |
| VA |
rep |
Republican |
link |
| phone |
address |
city |
state |
zip |
|<PHONE_NUMBER> |
21430 Cedar Drive Suite 218 |
Sterling |
VA |
20164 |
|<PHONE_NUMBER> |
117 E. Piccadilly St. Suite 100 D |
Winchester |
VA |
22601 |
Barry Loudermilk
| state |
type |
party |
url |
| GA |
rep |
Republican |
link |
| phone |
address |
city |
state |
zip |
|<PHONE_NUMBER> |
600 Galleria Pky. Suite 120 |
Atlanta |
GA |
30339 |
|<PHONE_NUMBER> |
135 W. Cherokee Ave. Suite 122 |
Cartersville |
GA |
30120 |
|<PHONE_NUMBER> |
9898 Highway 92 Suite 100 |
Woodstock |
GA |
30188 |
Mark Walker
| state |
type |
party |
url |
| NC |
rep |
Republican |
link |
| phone |
address |
city |
state |
zip |
|<PHONE_NUMBER> |
219 B West Elm Street |
Graham |
NC |
27253 |
|<PHONE_NUMBER> |
809 Green Valley Rd. Suite 104 |
Greensboro |
NC |
27408 |
Robert A. Brady
| state |
type |
party |
url |
| PA |
rep |
Democrat |
link |
| phone |
address |
city |
state |
zip |
|<PHONE_NUMBER> |
1350 Edgmont Ave. Suite 2575 |
Chester |
PA |
19013 |
|<PHONE_NUMBER> |
2637 E. Clearfield St. |
Philadelphia |
PA |
19134 |
|<PHONE_NUMBER> |
2630 Memphis St. |
Philadelphia |
PA |
19125 |
|<PHONE_NUMBER> |
1909 S. Broad St. |
Philadelphia |
PA |
19148 |
Jamie Raskin
| state |
type |
party |
url |
| MD |
rep |
Democrat |
link |
| phone |
address |
city |
state |
zip |
|<PHONE_NUMBER> |
51 Monroe St. Suite 507 |
Rockville |
MD |
20850 |
Zoe Lofgren
| state |
type |
party |
url |
| CA |
rep |
Democrat |
link |
| phone |
address |
city |
state |
zip |
|<PHONE_NUMBER> |
635 N. First St. Suite B |
San Jose |
CA |
95112 |
Gregg Harper
| state |
type |
party |
url |
| MS |
rep |
Republican |
link |
| phone |
address |
city |
state |
zip |
|<PHONE_NUMBER> |
230 S. Whitworth St. |
Brookhaven |
MS |
39601 |
|<PHONE_NUMBER> |
1901 Front St. Suite A |
Meridian |
MS |
39301 |
|<PHONE_NUMBER> |
2507-A Old Brandon Rd. |
Pearl |
MS |
39208 |
|<PHONE_NUMBER> |
600 Russell St. The Mill at Mississippi State Suite 160 |
Starkville |
MS |
39759 |
Rodney Davis
| state |
type |
party |
url |
| IL |
rep |
Republican |
link |
| phone |
address |
city |
state |
zip |
|<PHONE_NUMBER> |
2004 Fox Dr. |
Champaign |
IL |
61280 |
|<PHONE_NUMBER> |
243 S. Water St. Suite 100 |
Decatur |
IL |
62523 |
|<PHONE_NUMBER> |
15 Professional Park Dr. |
Maryville |
IL |
62062 |
|<PHONE_NUMBER> |
104 W. North St. |
Normal |
IL |
61761 |
|<PHONE_NUMBER> |
2833 S Grand Ave. East |
Springfield |
IL |
62703 |
|<PHONE_NUMBER> |
108 W. Market St. |
Taylorville |
IL |
62568 |


--- layout: default title: The Code.org Network ---
This project was last updated on 30 September 2017


This demo showcases keyboard navigation in Custom element Grid.
-
Left Arrow key is pressed - Selects the left cell, when the Grid is not in edit
mode. Otherwise, the key stroke is handled by the editor.
-
Right Arrow key is pressed - Selects the right cell, when the Grid is not in edit
mode. Otherwise, the key stroke is handled by the editor.
-
Up Arrow key is pressed - Selects the cell above, when the Grid is not in edit mode.
Otherwise, the key stroke is handled by the editor.
-
Down Arrow key is pressed - Selects the cell below, when the Grid is not in edit
mode. Otherwise, the key stroke is handled by the editor.
-
Page Up/Down is pressed - Navigate Up or Down with one page, when the Grid is not
in edit mode. Otherwise, the key stroke is handled by the editor.
-
Home/End is pressed - Navigate to the first or last row, when the Grid is not in
edit mode. Otherwise, the key stroke is handled by the editor.
-
Enter key is pressed - Moves one cell down in "multiplecellsadvanced" selection mode. If the cell is in edit mode, saves the new value and moves one cell down. In the other selection modes, shows the selected cell's editor. If the cell is in edit
mode, hides the cell's editor and saves the new value. The editor's value is equal
to the cell's value.
- Esc key is pressed - Hides the cell's editor and cancels the changes.
-
Tab key is pressed - Selects the right cell. If the Grid is in edit mode, saves
the edit cell's value, closes its editor, selects the right cell and opens its editor.
-
Shift+Tab keys are pressed - Selects the left cell. If the Grid is in edit mode,
saves the edit cell's value, closes its editor, selects the left cell and opens
its editor.
- F2 key is pressed - shows the selected cell's editor when the Grid is in edit mode.
-
Space key is pressed - Toggles the checkbox editor's check state when the selected
cell's column is a checkbox column and the Grid is editable.
- Shift+Arrow key extends the selection.
- Shift extends the selection when the user clicks on a cell or row..
-
Ctrl key is pressed - in 'multiplecellsextended, multiplecellsadvanced and multiplerowsextended' selection
mode, extends the selection when the user clicks on a cell or row.
- Ctrl+Arrow key - moves to an edge.
- Ctrl+C Copy.
- Ctrl+X Cut.
- Ctrl+V Paste.
- Page Down - Moves one screen down
- Page Up - Moves one screen up
- Home - Moves to the beginning
- End - Moves to the end
- Typing in a cell when the Grid is "editable" will put the cell in edit mode.


Programmer, writer and educator
Located in St. Louis.
Skills
Technical Skills
- Javascript, jQuery, WebGl, Node.js, C++ and Python systems and application programming experience
- Ruby on Rails, Node, Wordpress, MySQL, MongoDB and PHP web development experience
- Photoshop, After Effects, Blender, and video/audio editing
- technical and documentation writing
Writing
- Technical and documentation writing skills and experience
- Curriculum writing experience
Teaching
- Developed, designed and wrote a curriculum for teaching computer science and programming skills to a class of approximately 30 6-12 year olds over the span of 1 year.
- This class covered the fundamentals of logic and critical thinking as well as the fundamentals of JavaScript and HTML. Using these technologies, the class explored the concepts of the design pattern, API, user experience and responsible software. By the end of the year, the students were looking up API documentation and teaching each other!
Employment
- Freelance Web developer and designer in Wordpress, Ruby on Rails, and Node.js/Express/MongoDB.
- Prototyped and implemented the design for Edufact, a project I have since left.
Research
- Along with a partner, I designed and developed an agent-based method of heuristic relational data analysis, targeting recommender systems, particularly within education. This project involved the creation of a general strategy for using independent software agents to develop data analyses within relational databases, as well as a specific implementation for education
- Research and development into various prototypes in online education, involving curriculum development and virtual learning space design.
- A platform and markup language for WebGL modelling designed to streamline asset loading and level of detail (LOD) computation
- Distributed networking architecture in NodeJS, for use in a partially decentralized client-server approach. Involves a system which distributes data in a decentralized ad-hoc network of servers, which serve information to the client in the traditional client-server architecture.
Teaching
- Teacher and curriculum manager of a computer science course at the Governor French Academy (August 2013-Present)
- This involves daily leadership and education responsibilities for approximately sixty kids, grades 3 through 8.
- My co-teacher and I also wrote and produced a curriculum designed to facilitate analytical and systematic thinking, while covering fundamentals of computer science.
- Research and development work on a platform for curriculum generation that involves generation of a curriculum, organizing prerequisites for a subject and developing a study plan for the subject. This program was entered in Intel ISEF and won numerous awards (see below)
- Volunteers time and expertise to the #Node.js and #meteor IRC communities on freenode
- Volunteered tutoring services in programming, 3D modeling and networking to various students
Awards
- First place in Computer Science, Illinois Worldwide Youth in Science and Engineering Competition (WYSE) Regionals 2014
- Second Place at the Illinois State Junior Science and Humanities Symposium at Southern Illinois University in Carbondale.
- Finalist at the 2014 Junior Science and Humanities Symposium event in Washington, D.C.
- Best of Fair, Illinois Junior Academy of Science Regional Science Fair 2014
- Intel Excellence in Computer Science Award
- Best Use of Technology Award
- Finalist at the International Science and Engineering Fair 2014 (ISEF) - Los Angeles
- First place team, regional and sectional competition at Illinois Worldwide Youth in Science and Engineering Competition 2014
- Best of Fair, Governor French Science Fair 2014
- Finalist, Illinois American Legion Oratorical Competition 2013
- Lead programmer on first place Botball team, Illinois Botball Regional Championships 2012


Welcome!
Please, click F12 to see the examples in console
More informations about this exemple in
Github
repository!


Check out Epicodus
This is my first web page!
Isn't it nice?
Here is a link to my favorite things
Here are some things I'm going to learn about coding:


19 September 2005
The Ministry of Health in Viet Nam has retrospectively confirmed an additional fatal case of H5N1 infection that dates back to July. The case, in a 35-year-old male farmer from Ben Tre Province, developed symptoms on 25 July and died on 31 July.
The newly confirmed case brings the total in Viet Nam since mid-December 2004 to 64 cases, of which 21 were fatal.


The default search uses fuzzy matching on the name and email
fields for a user. For example, a search for
"admin"
would match both "Admin user" and
<EMAIL_ADDRESS>All searches are case-insensitive.
The system also supports advanced querying via prefixing:
name:
searches for users with that name
email:
searches for users with that email
can:
searches for users with that permission
cannot:
searches for users without that permission
Multiple advanced queries are considered compound requirements.
For example, the following query searches for all users which
have a name matching "fred"
who lack the
"APIKeyRead"
permission.
name:fred cannot:APIKeyRead
The syntax also supports modifiers, including:
|
means OR
*
means repeated 0 or more times
+
means repeated 1 or more times
?
means repeated 0 or 1 time
{n}
means repeated exactly n times
{n,}
means repeated n or more times
{n,m}
means repeated between n and m times
This searches for users who have the name
"fred"
or "jones"
:
name:fred|jones


The Killer
Design inspired by Hatch
A thrill of horror flashed through every soul upon the plantation, excepting Mr. Gore. He alone seemed cool and collected. He was asked by Colonel Lloyd and my old master, why he resorted to this extraordinary expedient. His reply was, (as well as I can remember,) that Demby had become unmanageable. He was setting a dangerous example to the other slaves,--one which, if suffered to pass without some such demonstration on his part, would finally lead to the total subversion of all rule and order upon the plantation. He argued that if one slave refused to be corrected, and escaped with his life, the other slaves would soon copy the example; the result of which would be, the freedom of the slaves, and the enslavement of the whites. Mr. Gore's defence was satisfactory. He was continued in his station as overseer upon the home plantation. His fame as an overseer went abroad. His horrid crime was not even submitted to judicial investigation. It was committed in the presence of slaves, and they of course could neither institute a suit, nor testify against him; and thus the guilty perpetrator of one of the bloodiest and most foul murders goes unwhipped of justice, and uncensured by the community in which he lives. Mr. Gore lived in St. Michael's, Talbot county, Maryland, when I left there; and if he is still alive, he very probably lives there now; and if so, he is now, as he was then, as highly esteemed and as much respected as though his guilty soul had not been stained with his brother's blood.
The wife of Mr. Giles Hicks, living but a short distance from where I used to live, murdered my wife's cousin, a young girl between fifteen and sixteen years of age, mangling her person in the most horrible manner, breaking her nose and breastbone with a stick, so that the poor girl expired in a few hours afterward. She was immediately buried, but had not been in her untimely grave but a few hours before she was taken up and examined by the coroner, who decided that she had come to her death by severe beating. The offence for which this girl was thus murdered was this:--She had been set that night to mind Mrs. Hicks's baby, and during the night she fell asleep, and the baby cried. She, having lost her rest for several nights previous, did not hear the crying. They were both in the room with Mrs. Hicks. Mrs. Hicks, finding the girl slow to move, jumped from her bed, seized an oak stick of wood by the fireplace, and with it broke the girl's nose and breastbone, and thus ended her life. I will not say that this most horrid murder produced no sensation in the community. It did produce sensation, but not enough to bring the murderess to punishment. There was a warrant issued for her arrest, but it was never served. Thus she escaped not only punishment, but even the pain of being arraigned before a court for her horrid crime.


An OpenTracing library for Foxx Microservices.
# In your foxx application root
npm install --save @recallgraph/foxx-tracer
See https://recallgraph.github.io/foxx-tracer/ for the full API documentation. A quickstart guide is given below.
Most tracing libraries in the nodeverse are asynchronous, and so do not work in the synchronous V8 runtime that ArangoDB uses to run its Foxx services. foxx-tracer bridges this gap by being a 100% synchronous, dedicated module built for the Foxx runtime.
As a result, it relies on a number of features only available in a Foxx environment. It also depends on a companion collector service which itself is a Foxx microservice. These dependencies make this module incompatible with Node.js and browser-based runtimes.
Add foxx-tracer as a dependency of the service for which you want to enable tracing.
npm install --save @recallgraph/foxx-tracer
In your service, before mounting any trace-enabled routes, you need to initialize the tracer, trace headers and middleware. This is best done in your service's startup script (usually main.js
).
const { utils: { setEndpointTraceHeaders, initTracer }, middleware } = require('foxx-tracer')
// Initialize the tracer
initTracer()
// Use the tracing middleware for all endpoints.
// You may also do this selectively for only those endpoints that you want to trace.
module.context.use(middleware)
// Create a router.
const router = createRouter()
/*
Create a request handler endpoint using one of the router's several instance methods:
const endpoint = router.[get|post|put|patch|delete|all|use](...)
*/
// Attach trace headers to the endpoint
setEndpointTraceHeaders(endpoint)
To wrap a function in a new span, use attachSpan
.
const { utils: { attachSpan } } = require('foxx-tracer')
attachSpan(function() {}, 'opName', {/* options */}, onSuccess /* optional */, onError /* optional */)
To instrument a db query (with query stats collection and reporting), use instrumentedQuery
.
const { utils: { instrumentedQuery } } = require('foxx-tracer')
const query = aql.query(/* query */)
const cursor = instrumentedQuery(query, 'queryName', {/* options */})
To correctly propagate the current span context across transaction boundaries, use executeTransaction
.
const { utils: { executeTransaction } } = require('foxx-tracer')
const result = executeTransaction({/* transaction specification */})
To correctly propagate the current span context across task invocations, use executeTask
.
const { utils: { executeTask } } = require('foxx-tracer')
executeTask({/* task options */})
Install the collector service and follow its setup instructions. Add any reporter plugins that you need.
In your application's settings, there is a param named sampling-probability
. You can set this to a value between 0 and 1 (both inclusive) to tell the tracer how often to record a trace for incoming requests. For example, if sampling-probability = 0.1
, then roughly 1 out of 10 requests will be traced.
Regardless of this param's value, a trace can be force-recorded or force-suppressed using the x-force-sample
header parameter. See Recording Traces for details.
Finally, you need to assign the collector dependency so that foxx-tracer knows where to send the recorded traces. The manifest.json
file should have a dependencies
object containing the following:
{
"dependencies": {
"traceCollector": {
"name": "@RecallGraph/foxx-tracer-collector",
"version": "^0.0.5",
"description": "Opentrace-compatible collector to send span records to.",
"required": false,
"multiple": false
}
}
}
Optional:
If, for some reason, you cannot name your dependency as traceCollector
(in the unlikely case that it clashes with another dependency key), you can rename it to any other valid manifest key. But then, additional configuration is required to tell the tracer where to find the collector. The manifest.json
should now have an additonal setting in configuration
, containing the following:
{
"configuration": {
"reporters-foxx": {
"type": "json",
"required": true,
"default": {
"collector": "customCollectorDependencyKey"
},
"description": "Settings for the foxx reporter."
}
}
}
For the endpoints to which the trace middleware was attached, there are 4 trace-specific headers available that can be used for the following:
Propagate a running trace from the client to your application.
Force the application to record or suppress a trace for the request, regardless of the sampling-probability
setting.
See the Trace Header documentation for details.
To get a better idea of how to instrument your Foxx service using foxx-tracer, take a look at the source of the RecallGraph project.
Generated using TypeDoc


Aegisub / Automation / Overview of changes from Automation 3
To put it short, the changes from Automation 3 to Automation 4 are huge, almost everything has been completely redesigned and rewritten. You should however find that many things still work the same, and the rest work better, hopefully.
Architectural changes
These are the changes in how the scripting engine integrates with Aegisub, i.e. how scripts are loaded and managed and not as much what happens when they are running.
Actually, what is called Automation 4 is only the architecture described here. When you use Automation 4 to run scripts written in Lua (and are not Automation 3 scripts) it's called Automation 4 Lua.
Automation 4 now supports "plugging in" script functionality in several different places. Each different kind of functionality a script can support is called a "feature". Currently this really only means the export filters supported by Automation 3 and then macros. Export filters appear in the Export dialogue and are intended for large batch-operations. Macros appear in the Automation menu and are intended for smaller tasks.
Macro features can retrieve the current selection in the subtitle grid, modify the subtitles in-line and change the selection upon return. They can also set one or more Undo points. Last but not least, they can show dialogue boxes to get more information from the user.
Finally, one script file can provide more than one feature, also more than one of each kind of supported feature. A script file can also provide no features at all, though that's not very useful.
The Lua scripting engine
The probably single biggest and most important change from Automation 3 to Automation 4 Lua is that the Lua version has been upgraded from 5.0 to 5.1. While there are a large number of changes between the two versions, the perhaps most important for writing Automation 4 Lua scripts is the modulo operator that has finally been introduced into the language. You can see more details at the Lua homepage.
The rest of the changes to Lua scripting interface can best be summed up as: Give as much control as possible to the script and don't do any unrequested data generation.
In more detail, these are the main points of the changes from Automation 3 to Automation 4 Lua. They are discussed in more detail below.
- No more a fixed entry point; script entry points are instead defined with
register_xxx
functions - Direct manipulation of the subtitle file rather than manipulating a large Lua table
- Much more direct control over the entire execution process
- Various changes in the data structures used
- More complete Unicode support in include files
- More advanced layout calculations in karaskel include file
You no longer need to name your functions anything specific. Instead, you tell
Aegisub what your entry point functions are called. What you do is register
each feature you want, using the aegisub.register_macro
and
aegisub.register_filter
functions. (Exception: If you use the karaoke
skeleton functions you
do need to follow some specific naming schemes and should not register any
features.)
Instead of getting a huge table with all lines in the subtitle file, Automation 4 Lua provides your script with a "user data object" you can use to get, save and replace lines in the subtitle file with. (This object is usually called the subs object.) Using this subs object you can not only get the dialogue lines in the subtitle file, but also manipulate the style lines and the Script Info section. On the other hand, you are no longer given a styles or meta table directly, but the karaskel include has a function to extract that information.
As a result of the direct manipulation of the subtitle file you can now do, you also have much more control over what happens when during script execution. Automation 3 always split the script execution up in three phases: Generate input, run processing, read output. Using the subs object you can instead intermix those three phases freely, or just do as usual. This is especially convenient for macros, since they only need to touch the lines they actually modify, rather than needing to import the entire file and having it re-read by Aegisub when done. The skeletons provided by karaskel.lua can to an extent automate managing the execution process.
The data structures used have also been changed to better support the more complete subtitle file representation and to better reflect the philosophy of doing as little as possible before requested. For example, the karaoke data tables that were an inherent part of the line data structure in Automation 3 are no longer automatically generated, instead you use a separate function to have them generated. If you use karaskel, you will however not need to worry about that. The actual changes are too many to list here.
A new unicode.lua include file has
been introduced. This file provides a much more clean and usable interface for
manipulating UTF-8 encoded text than the old next_utf_char
and utf_len
functions.
Last but not least, the text layout algorithms used in karaskel have been improved a lot and now, among other things, support sub-pixel positioned text, proper handling of inter-syllable spaces and an advanced furigana layout algorithm. The furigana layout algorithm also produces data structures so similar to syllable structures you can in effect use exactly the same code to produce effects for both main syllables and furigana.