A DVD-Storybook-Hybrid Webcomic, or DSHW, was a special format of online comic, the term being coined by the founder of Dozerfleet on Friday, May 23rd of 2008 around 10:50 PM EDT. A few Dozerfleet works were created using the format. In 2013, further pursuit of the format was put on a shelf, as complications in its improvement and development came to a screeching halt in late 2012. Promotion of the format became even more complicated in April of 2013 with the announcement by DeviantArt of having teamed up with MadeFire to produce the MotionBook format, which was seen as more marketable. Even so, the format was revived as Blu-ray Storybook Hybrid webcomic format ("BluSH") on January 26th of 2015 around 11:47 PM EST.


DSHW vs. Traditional


Ciem Chapter 19 inside The Sims 2 Exchange, an inspiration for the Dozerfleet DSHW webcomic format.

Most traditional webcomics are hand-drawn art that is scanned and then uploaded to the web, with a new scan in a series being added every week. The web shorts and epic one-piece tales that the Dozerfleet founder became interested in creating back in 2005 did not owe themselves well to this format. Inspiration for the DSHW format came from two sources: DVD menus and the Sims 2 Exchange's storytelling pages.

Early DSHW

As stated above, the DSHW format was first inspired by The Sims 2 Story Exchange. That system is pejoratively dubbed "DSHW 0.1," since it has some features in common with the DSHW format but is not true DSHW for the following reasons:

  • While all three versions (0.05 [The Sims 1], 0.1 [The Sims 2], and 0.2 [The Sims 3]) have the basic functionality for storytelling and carry the 3.0 standard of value switching as a replacement for actual HTML navigation, none of the Exchanges have DVD-like menus.
  • Stories on the Exchanges do not possess the option for multiple chapter navigation within a story. Instead, chapters must be published as separate stories.
  • The absence of a DVD-like Main Menu and lack of DVD-like menus for sub-features to a story defeat the purpose of the DSHW 1.0 standard.
  • Cursors cannot be customized.
  • Resolutions beyond 600 x 450 are not yet realized, making comparison with versions of true DSHW beyond 1.0 difficult.
  • No option for rolling credits pages for any Exchange story.
  • No navigation automation options, though page value transition effects are possible and cross-browser-compatible.
  • Use of Flash for technology other than video embedding/streaming

Version 1.0


DSHW 1.0-M, used for Chapter 2 Page 1 of Ciem

The first site to be considered for use in the true DSHW format was Gored By Them Things, but the first actual implementation of DSHW version 1.0 was in the 2005 version of The Battle for Gerosha. Other works, such as When Bikes Argue and its sequel, were also made in this format; as were all three of the 2005 versions of the Ciem Trilogy. A slightly-improved version of the format was used for the 2007-2008 version of Ciem.

In 2005, the short-lived "Don't Lose Hope" was an ealy attempt at a semi-automatic transmission system that turned the DSHW into a slideshow. This would give way to the later automation formats specified below. Not all DSHW 1.0-made machinomics had elaborate rolling credits pages; though longer works in later versions are expected to have one.

Version 2.0

The second edition of the DSHW format takes more after the format's influence from The Sims 2 Story Exchange, and was first devised in late August of 2008. While automation is as rare for this version as its predecessor, several changes were made to prepare it for the creation of version 3.0. The first new invention for the format is the use of DIV tables instead of actual TABLE tags in the HTML. This allows for more correct design principle specifications to be made to the story.

Another improvement is in the sizes allowed for images. Instead of an embedded IMG tag on a page to plant an image, the image is the background of a space on the page. Each page has a "glass panel" text box with a semitransparent "glass" plating and opaque text that scrolls on top of it. The panel floats atop the lower one-third of the box upon which the story page image serves as a background, and allows for the image and text to work together like a film clip with subtitles.


Chapter 2, Page 1 of Ciem 2, employing DSHW 2.0. Notice: Navigation is hidden unless edges are hovered over.

The result is that images may be significantly more photo-realistic and of a higher resolution while still allowing room for text. Also, the image and text do not dramatically compete for page real estate as they did before. Images in this format, due to the demands of the text box, are in a 1.68 ("5:3," actually 4.97:3) aspect ratio, as opposed to the 16:9 and 4:3 aspect ratios that are typical in version 1.0. Ciem 2 experiments with this by using story images in an 800 x 483 @72ppi format.

Due to automation, DSHW 2.0 comes in three flavors: DSHW-2-A, DSHW-2-M, and DSHW-2-S. The "M" specification would be the most common, as "A" and "S" are for slideshows and fancy DVD script impersonation.

Finally, what makes version 2 truly unique from version 1 is that the navigation hides inside the story image. This further reduces page real estate requirements. Instead, the navigation reveals itself as soon as the cursor is hovered over the region specified for it. Once the cursor hovers away from the navigation arrow's region, it vanishes behind the image. The main menu link behaves in an identical way, so that the reader may be more immersed in the world of the story and less distracted by the navigation.

Versions 2.5 and 2.6

With XML and the 3.0 database still a ways away from being developed, DSHW 2.5 (slightly modified to 2.6 in 2012) became a major revision of DSHW 2.0's code structure, designed to allow for heavy acceptance of CSS3 coding standards and for the possibility of users updating from XHTML 1.0 Transitional DTDs to the emerging HTML5 standard.

New in 2.5 and 2.6 are functions for creating gradient backgrounds, as well as support for much larger image formats. A CSS-drawn film frame, while imperfect in its alignment, replaced the background image film frames that were standard since version 1. Navigation pages were coded to be invisible until hovered over, as opposed to having to create two images to represent the same navigation option. In turn, this freed up the Spotlight Javascript feature for instances when switching between two images proved absolutely necessary.

Version 3.0

The planned third version of DSHW would have come in two main flavors: Basic and Throwback. Specified along with automation options, there are a total of six children that make up the third generation of this format: DSHW-3-BA, DSHW-3-BS, DSHW-3-BM, DSHW-3-TA, DSHW-3-TS, and DSHW-3-TM. The BM and TM versions would be the most common, since the automation in BA and TA are for very special occasions where full DVD script behavior is desired. The BS and TS would also be rare, as those semi-automatic versions are only beneficial for short slideshow DSHWs.

What makes version 3 unique is that unlike the previous two versions, there are no actual HTML pages for the Story Page to link to. The navigation simply exchanges virtual page values from a database as commanded by JavaScript. The Chapter Selection Page activates the Story Page and, based on the chapter selected, inserts those values. Version 3 may have resembled a simple port of the technology to the layout of 2 (Basic) or it may apply it to version 1's layout (Throwback.) Therefore, only the Main Menu, Story Page, and Chapter Selection Menu, and Extra Features pages would have been actual HTML files. Everything else would have been either specified in JavaScript or in a value database.

Version 4.0

The theoretical Version 4.0 of DSHW would have allowed the reader the option to either read with or without the aid of a computer voice reader. Automated flavors would have the computer voice read the story and not offer a text box for manual reading.

As the DSHW format grows more complex, software would have ideally been developed to make creation of such sites easy for novice site creators. However, the implementation of HTML5 and MotionBook format essentially rendered kaput further DSHW format development, making MotionBook the winner of the format war. Instead, since MotionBook was not available to Dozerfleet Comics in 2015, DSHW 2.7 was developed, dubbed "BluSH" to focus on its emphasis on HD content.


The web stories are hybrids of a DVD's structure with that of a children's storybook.

  • A host of several DSHW sites would exist as a main site. All the individual DSHW stories are sub-sites.
  • The sub-sites for each story consist of a main menu similar to a DVD menu but using Javascript and CSS to function.


The Main Menu links to every subdivision of the story's site, which usually consists of the following options:

  • Play Story
  • About
  • Select a Chapter
  • Contact Author, etc.

Style guidelines

  1. Each Story, Behind the Scenes, About, and Contact page should have at least one link back to the Main Menu.
  2. Story pages should have navigation arrows leading to each other and to other chapters.
  3. There should normally be only one story picture to a page, followed by a scrolling caption field of relevant story text or dialog. This caption field may either be segregated from the story image (1-A, 1-M, 1-S, 3-TA, 3-TM, 3-TS) or floating on top of it (2-A, 2-M, 2S, 3-BA, 3-BM, 3-BS.)
  4. The normal story text (narration) is written in (usually third-person) novel format.
  5. Active dialog between two or more characters is written similar to radio transcript copy or playwright script.
  6. If a character is writing something in a diary (to allow acceptable breaches of the fourth wall,) then conversation between that character and the diary (the reader's avatar) is italicized. The name of the character is centered and placed above the italicized text of their writing.
  7. If a character is communicating dialog to another through an electronic medium (TV screen, cell phone, radio, etc.) then the dialog is italicized.
    1. This rule applies to use of megaphones as well.
    2. Microphones need not be italicized, unless the microphone's amplified sound is then transfered through an electronic medium. In other words, a live broadcast of a presidential speech should be italicized, but a minister delivering a sermon in his home church need not be italicized; assuming the event is live and the story's point-of-view during the moment of the sermon is of characters present at the location of the live event.
    3. Example: When Arfaas believes Musaran to have lost control, he warns his troops over speaker systems. This should be italicized. However, none of Wilbur Brocklyn's sermons in Ciem 1 need to be italicized.
  8. The two main formats of text (narration and dialog) should alternate, based on paragraph fields within the <p> and </p> tags.
    1. Paragraph types are determined by the P tag class names they are assigned in the HTML, as defined in the site's CSS. Commonly, "dat" for "data" may designate narration as can "n." For dialog, "dia" or "q" for "quote" is acceptable.
  9. Speakers in dialogue paragraphs should have their names boldfaced and underlined. This can be done with B and U tags, but should ideally be done by placing them inside of an "sp" or "speaker" class of SPAN tag.


DSHW sites may have different "transmissions" built into them, based on the site (and designer's) needs. These automation standards define how the site navigates in relation to the desires of the reader/user. The three types of automation in a DSHW are Fully-Manual (M,) Semi-Automatic (S,) and Fully-Automatic (A.) Currently, the defined manual standards are 1-M, 2-M, 3-BM, and 3-TM. The current-known semi-automatic standards are 1-S, 2-S, 3-BS, and 3-TS. The automatic standards, likewise, are 1-A, 2-A, 3-BA, and 3-TA.

Manual navigation

The most common form of navigation for a DSHW is the fully-manual system. Under this system, nothing happens on any page unless it is called for by the user. Text only scrolls when the user tells it to scroll. Pages only navigate when told; and there is no limit to how long a page may be displayed before another page takes its place. The DSHW format was founded using this standard, and most Dozerfleet DSHW sites in production employ it.

Automatic navigation

In the fully-automatic standard, the site behaves like a DVD more closely. The Main Menu will allow the user up to three minutes to choose an option before defaulting to the "Play Story" option. If another option is chosen, then that option will lead to other menus. Those menus lead to subfeatures whose text scrolls in a marquee field upward at a predefined pace. Once each piece's text is finished scrolling in its marquee field, then the page refreshes back to the submenu from which it was selected. The user may then select another feature or return to the Main Menu.

If the Play Story option plays, then story pages will navigate according to how long their text feeds take to marquee. It is assumed that the reader will be able to keep up with the pacing of the marquee field. Ideally, the automation may be paused at any time by hitting the "Stop" button on the browser. Navigation arrows will allow the user to manually shift direction in spite the navigation being automated.

META tags will be used to instigate the automation process, and will ideally work in all standard browsers. Dozerfleet currently has no fully-automatic DSHW sites in production.

Semi-automatic navigation

Similar to fully-automatic navigation, the semi-automatic standard applies the automation to the story pages only. All other parts of the site are free of timers and operate on a fully-manual standard. The "Don't Lose Hope" faux-video slideshow was the first semi-automatic DSHW to be produced by Dozerfleet, and is the only one currently known to exist.


Comparison table

Traditional Webcomic
DSHW 1.0
DSHW 2.0
DSHW 3.0
Web Technology Flash DXHTML (XHTML, Javascript, CSS) Same as 1.0 Same as 1.0 and 2.0. Possible inclusion of other technologies for its database.
Automation (Usually) none Not common, but achieved through META tags and synchronized to text box automation. Not common, but META is synchronized to glass panel automation. Optional, JavaScript or META may be used as synchronized to text value automation.
Automation options N/A
  • DSHW-1.0-M (Fully-Manual)
  • DSHW-1.0-S (Semi-Automatic)
  • DSHW-1.0-A (Fully-Automatic)
  • 2.0-M
  • 2.0-S
  • 2.0-A
  • 3.0-MB ("Basic" glass panel)
  • 3.0-MT ("Throwback" with text box)
  • 3.0-SB
  • 3.0-ST
  • 3.0-AB
  • 3.0-AT
Front Page The most recent issue The main menu Same as 1.0 Same as 1.0 and 2.0
Select a Chapter Every page has a pull-down text menu Visual menu page similar to DVD scene select menu. Same as 1.0 Same as 1.0 and 2.0
Page names Page named after upload date. Page named after sequence in chapter of entire entity. Same as 1.0 Same as previous two, except no new HTML page is navigated to. Instead, virtual content values are drawn from a database.
Compilation Usually an entire series, each strip is an "episode." Usually a single compilation; all chapters and pages form one entity. Sequels are separate compilations. Same as 1.0 Same as 1.0 and 2.0
Franchise logic Usually intended to be like Television. Each new strip is a new episode, or at least a part of an episode. Compilations of many strips thematically linked may be a single complete episode or they may be a season. Intended to be like a Film franchise, but television format is possible. In a film format, chapter lengths vary but are actual chapters. In a TV format, chapters are episodes of more uniform length; and the DSHW itself becomes a single season of the show. An additional DSHW is required for either a film-like sequel or for an additional season of a show. Same as 1.0 Same as 1.0 and 2.0
Topic index None. None natively, but links may exist to wikis with topical indices. Optional Not required, but expected.
Contact creator link Varies. Almost always. Same as 1.0 Same as 1.0 and 2.0
Ratings system Seldom one in place. Usually DRS or similar. Same as 1.0 Same as 1.0 and 2.0
Skip a chapter Select chapter from pull-down menu. Click arrows at top of page for "Next Chapter" and "Previous Chapter." Hover over arrow regions of the chapter navigation and click when ready. Same as 2.0.
Dialog/Narration Talk bubbles. Dialog/narration box and accompaniment image on each page. Dialog/narration panel that floats atop the lowest third of the story image. Dialog/narration can be either in a 1.0-style box or a 2.0-style panel, based on designer's preference.
Art style Usually hand-drawn or 2D computer-drawn. Welcomes nearly all formats of visual style. Same as 1.0 Same as 1.0 and 2.0
Aspect ratio Images can be any size, as suits the needs of the creator. Images may be any size, but are usually set to fixed aspect ratios by the creator. (See below) Images may be any size, but are usually set to fixed aspect ratios. Images are typically higher resolution than 1.0 images. Same as 1.0 and 2.0, except that images are typically higher resolution than either previous version.
Text overflow handling Write smaller text in bubbles, or condense sentences. Text scrolls inside the designated box as the user scrolls it. If automated, text scrolls up on its own at pre-defined pace. Text scrolls either manually or automatically based on site design. Text is confined to a semitransparent glass panel the floats atop the lowest third of the story image. Text scrolls either manually or automatically based on site design. Designer may choose whether to make the text box separate from the image (like in 1.0) or a glass panel floating atop the lowest third of the image (like in 2.0.)
Comics service Creators usually have memberships with a webcomics affiliate, such as Keenspot. Creators (usually) operate independently. Same as 1.0 Same as 1.0 and 2.0
Image gathering Hand-made comics may be scanned and scaled for the web. Images are usually digital from inception, but other means of creation are acceptable. Same as 1.0 Same as 1.0 and 2.0

Story picture dimensions

The different formats of DSHW encourage different image sizes for their use. Below is a list of image dimensions by format, and a history of their use.

1.0 dimensions

  • Small: These images are 300 x 225 @72ppi, and are best if viewed on small-screen devices such as an iPhone. The 2005 version of The Battle for Gerosha was made in this format. The remake is expected to be a much-larger format.
  • Moderate: These images are 400 x 300 @72ppi. Both the 2005 and 2006 attempts at Ciem were made with this standard. Since 400 x 300 is considered the standard Sims 2 machinomic output size, this format is encouraged for fullscreen-format DSHW sites. Often, the 400 x 300 size is to be expected on The Sims 2 Story Exchange. It is a standard size for photos taken with the in-game storytelling camera. The game's "large" setting is usually 600 x 450.
  • Moderate Widescreen: Also known as "Dozerfleet Widescreen," these images are in a 500 x 282 @72ppi resolution setting.

Note: Ciem was remade in 2007 using this size. Since the first story was made with snapshots taken inside the game instead of with the PrintScreen button, shots were originally shot by the game in a near-1280 x 720 frame that was upgraded automatically by the camera to a near-1280 x 1024 frame. The game then reduced the footage of its forced-fullscreen image to 600 x 450. The 600 x 450 images were then edited in Photoshop for effects and color correction and were cropped to 500 x 282. Since Ciem 1 was completed all future shots are designated to be the job of the PrintScreen button. As a result, shots are now deflated in size from 1280 x 720 to 500 x 282 or cropped, depending on needs. Aspect ratio conflicts no longer come into play for this form.

  • Large: Images in Sims 2 game's default "large" camera size of 600 x 450 @72ppi. So far, no DSHW by Dozerfleet has been produced in this format.

2.0 dimensions

  • Basic Hybridscreen: No DSHW has been made in this definition yet. The specs call for an image that is 600 x 360 @72ppi. The lowest third of the image, at 120 pixels in height, would be the area for the text panel. This is the smallest legal size for DSHW 2.0, given that text is encouraged to be in larger font sizes than in 1.0.
  • Large Hybridscreen: This format allows for images that are 800 x 483 @72ppi. This is the standard size for the 2.0 format and the official size of Ciem 2.
  • "HD" Hybridscreen: This format allows for images that are 1190 x 720 @72ppi. Currently, this is not a recommended resolution for most web browsers. Most early 3.0 DSHW's will may experiment with this format. It is currently the IMAX of the DSHW webcomic format. This resolution is not recommended for users of The Sims 2, but may be of interest to users of its sequel.

3.0 dimensions

The sizes were never defined for 3.0. However, a practical resolution size should have been equivalent to the largest sizes offered in version 2.0. Version 4.0, likewise, would have been a story image in true high definition. The key difference between 3.0 and 4.0 is the optional inclusion of sound. BluSH did away with the 3.0 standard's biggest wishes, instead pursuing improvements in resolution and scaling as well as navigation improvements.

Dozerfleet Comics DSHW examples

0.1 (Sims 2 Exchange)

  • Ciem (First Thirds of Chapters 19 and 22)

0.2 (Sims 3 Exchange)



  • Ciem 2 (2009 canon version, canceled)
  • Ciem 3 (2011 canon version, canceled)

BluSH 1.0

See also


Albums Master

Dozerfleet Gold Bar Statistics

Dozerfleet Machinomic Downloadables

DVD-Storybook Hybrid Webcomic format

Jewelry Jiddy's Wedding Ring Store Discount Calculator

Kurse of the Kryptonite

Niles-n'-Plebian Kranny

Question Prompting Assistant

Shrimp on a Treadmill Calculator

Task Delegator

The Sims Gallon Converters

Citric Sid Catalog

Community content is available under CC-BY-SA unless otherwise noted.