Welcome to The Aviary’s Print Newspaper Layout Designer! With this program, you can import articles, arrange layouts, and adjust formatting to create a print newspaper. Read on or tinker with this example newspaper to learn more, and reach out to Nicholas Steinman (nsteinman@wishcharter.org) with any questions.

Layout Engine 1.1 / Interface 0.9 with 2024 WISH Aviary Theme

IMPORTANT: This program has been tested on Google Chrome; while it may work on other web browsers, TEXT WITHIN NEWSPAPERS MAY DISPLAY DIFFERENTLY and take up different amounts of space . To ensure that your newspaper prints as intended, print it (or export it as a PDF using the print menu) from the same web browser (e.g. Chrome) that you designed it in and ALWAYS CHECK FOR GLITCHES OR ERRORS .

Note: This program has no “undo” function. Neglect to save your work regularly at your peril.

Introduction

This program uses XML (a cousin of web design language HTML) to store newspaper articles and instructions on how to display them. The tools in this sidebar are designed to more intuitively represent the content and instructions stored in a Newspaper XML File and help you edit them. The display panel on the left side of the screen will update as you open a file and make changes to it.

Using this program’s tools, you can perform almost all of the tasks required to create a full edition of The Aviary  without directly editing any XML code. However, some tools still display XML code below their settings, which you may need to edit in special cases. The following sections will explain how to view a project using the display panel and use each tool to edit it. Then, scroll further down for tutorials on how to add special types of content to the newspaper, such as crossword puzzles and the traditional front page “Reader’s Guide.”

The Display Panel

When a newspaper is first loaded, and in most cases, the Display Panel shows how the newspaper file looks (and should look when printed) on your web browser. It will refresh automatically as you finish making changes to fields within all of the program’s tools.

When no newspaper is loaded, the panel will appear solid gray. If Newspaper XML is loaded in the program but it is invalid, the panel may appear solid white.

When the Articles  tool is open, the Display Panel displays a preview of only the selected article  on one or more full pages, regardless of the context in which the article appears in the newspaper itself . This feature is intended to help you search for errors in articles and approximate how much space you will need to reserve in the grid of the newspaper for the article to be shown (although you will need to allow extra room for headlines, photos, Front and WISHWash pages having less space for articles, etc.).

Navigation

The top bar of the Display Panel shows the title of the newspaper being edited or the article being previewed, and options to Refresh , display and change the page number  currently being viewed, and print  all pages of the newspaper as it currently appears.

Print

The print function can be used both to directly print the document and to save it as a PDF file for public sharing or printing on another device. It is advisable to save an issue as a PDF file before printing it, in order to check for any potential rendering errors and secure final approval.  

Pages are laid out in the 11x17 “Tabloid” paper size, with built-in margins. Attempting to print an issue without using specific settings will cause serious rendering issues.  

In Chrome, under More Settings :

Paper size: Tabloid

Pages per sheet: 1

Margins: None

Scale: Default

Two-sided: Print on Both Sides / Flip on Long Edge  (both optional)

Options: ☑️ Background Graphics

Editor Tools

Newspaper XML

This tool shows the entirety of the XML document currently rendered in the display panel, which can be modified directly. Making edits within this tool is not recommended, except to paste in an entire document (replacing the current content) from another source.

Above this tool are shortcuts for common operations using this field: New File  to replace the current document with a new, blank newspaper; Upload  to replace the current document with the content of an uploaded file; Download  to download a file to your computer with the current document; and Copy to Clipboard  to copy the current XML code of the entire document to be pasted somewhere else.

Note: Uploading a file from your computer will not ensure that changes made to the document in the program will be saved to your computer. To ensure that your changes are not lost, you must download the file again after working, copy and paste it into the original file using a text editor, etc. When the program is loaded, it will attempt  to resume your most recent document where you left off, but you should always save files regularly to be safe.

Settings

The Settings tool currently consists of several text controls used to fill in parts of the newspaper template.

Title  sets the title of the document when it is downloaded, also displayed in the top-left corner of the Display Panel when not in Article Preview mode.

Date  sets the “date” written on the left side of the masthead  at the top of each page of the newspaper, e.g. “Dec. ‘23, Week 18”.

Issue  sets the issue descriptor written on the right side of the masthead, e.g. “Vol. 1, Issue 1”. Traditionally, “Vol.” refers to the “volume” of the newspaper, of which there is one each year; “Issue” refers to each issue within  a volume. The third newspaper of the school year in Spring 2026 would be expected to read “Vol. 3, Issue 3”. The volume is displayed in conjunction with the page number on all pages except those in Front  page format.

Motto  overrides the default motto, which is “By Students, For Students”, The Aviary ’s 2023-2024 motto, which is displayed on the front page.

Note: in future versions, this page may also display “global settings” for each newspaper document, such as the text font size.

Articles

Content in the newspaper is roughly divided into articles and instructions on where and how to display them. These both have their own sections of the program. For example, to display an article on two different pages, the entire text of the article would be stored in the Articles  section, while both pages  would have “blocks” in their layout grid which would reference the text of that article, adding on headlines, images, and other content that is meant to be displayed wherever a new block starts rather than based on exact position in the text of the article. Essentially, “articles” here should usually  consist of only opening and closing bylines (the special text which names the author(s) of an article), if applicable, and a set of paragraphs containing the article text.

The Articles  tool allows you to select an article, preview it, set its ID (which is used to reference it in the article dropdown and by the blocks on pages of the newspaper which actually display it), and modify it as necessary. Even more importantly, its topbar contains two ways to add an article to the newspaper: New Article  and Import Article .

The New Article  feature simply creates a new, untitled article. Content for such an article could be added by editing the XML directly. Newspaper XML within articles looks a lot like HTML, with the exception of some special details around images, in the unlikely event that they need to be contained within an article itself rather than a block in the Page Layouts  tool, and custom tags <byline> , <byclose> , and <loc> , the latter of which is a shortcut to creating a bold location indicator at the start of an article, such as “ WISH Academy— ”. The Page Layouts  tool contains special features to create and edit headlines and images in blocks, which can be cut and pasted from the block’s XML into an article for an easier way to create those items if necessary.

The Import Article  feature asks you to enter the URL of an article from The Aviary ’s website. If you do, it will attempt to import that article into the issue. Make sure to check the article preview for any formatting issues that might need to be fixed by tweaking the article XML. An imported article will start out with all of its headlines and images loaded directly into the article alongside its body text. For best results, it is intended that you move these items into blocks  where the article is displayed using the Page Layouts  tool, potentially removing any excess images (unless there is room for a “gallery” of some kind at the end of the article where they can be moved to). The latter tasks will require editing the Article XML slightly by moving or removing the <picture>  and/or <caption>  tags.

Page Layouts

The Page Layouts tool is where you will actually create the layout of your newspaper issue. When you select the Page Layouts tab, it will display options to change the page currently selected in the Display Panel’s page number and type (i.e. a front page, a WISHWash, or a regular page; more templates can be created on request), and a grid representing the page’s current layout. If the selected page number does not have a page associated with it, the New Page  button will create a new blank page. Otherwise, that button will create a new page at the first page number after the currently selected number with no page. The Delete Page  button will delete the currently selected page.

When you select a space in the page layout grid, either an existing block will be selected or a new block will be created, if the space selected was empty. A block can take up multiple spaces in the grid—the X , Y , Height , and Width  options allow you to move a block and change its dimensions, as long as multiple blocks do not overlap.

The Template  selector allows you to replace the current content of a block with a predefined template. Currently, the only template available is for a traditional front-page Reader’s Guide with a list advertising what can be found in the rest of the newspaper.

The Article ID  selector allows you to associate the block with an article. The content of the article will then fill as much of the block’s free space as possible, starting where it left off on blocks on previous pages. Some blocks, such as the “Reader’s Guide”, comics, or crosswords, will not be associated with an article.

The remainder of the settings for each block allow you to specify the content to appear in conjunction with any article on the block, like images and headlines. All such content will appear in XML form in the Block-Specific Content  field at the bottom of the menu.

The Headline  section allows you to add a headline to the block or edit an existing headline. If a From Article  button exists next to the Create Headline  button, that means that the article associated with the page has a headline that can be transferred into the block. The options for headline formatting are as follows:
Size  sets the font size of the headline. If no value is entered, it will default to 60 for one-column blocks or 90 for longer blocks.

Stroke  creates a stroke, a black outline, of the provided number of pixels around the headline to make it seem bolder.

White Outline  works similarly to Stroke , but the outline is white. This can be used to differentiate a headline from an image underneath it, if a descender like on a ‘j’, ‘y’, or ‘g’ overlaps with the image.

The Stretch  settings scale a headline horizontally and vertically. They can be used to make a headline fit better into the space above an article. The default value of each is 1.

Align  can be “left”, “right”, “center”, or “justify” and work like the align settings in a word processor.

Top  and Bottom  add additional white space above or below a headline, in pixels.

The Image  section works similarly. An image requires a source URL, which can be taken from images uploaded to the Aviary  website’s image library. Note that the height  setting requires a unit, such as “in” for inches or “px” for pixels. In a multi-column block, the column  setting can be set to a number indicating which column from the left the image will appear over, or can be kept blank for the image to span over all the columns. A caption  can also be created or removed here. If the caption’s   position  is set to “right” or “left”, it will appear next to the image, usually taking up about a third of the width the image would otherwise have. This can be changed by setting a value for Width (%) , but note that any value in that field must be written as a percentage . Finally, the caption’s   align  value works the same as that of a headline.

Tutorials (coming soon)

Reader’s Guide

Comics

Crosswords