Bjorn's Text Flow

Bjorn's Text Flow

Advanced text layout and editing

- a web app -

This page was last updated April 26 2024

"Rid the web of all mediocre text editing UX:es"

If I had to write a mission statement for the Text Flow engine and Bjorn's Playground it would be - "rid the web of all mediocre text editing UX:es". There are too many bad text editing solutions used by web sites around the world. Take the the vastly popular MailChimp email editor, I don't know how many times I have had to rescue my wife after the MailChimp editor decides to add HTML tags here and there that can't even be fixed by "clear formatting", thank goodness they provide a HTML Tag mode but they shouldn't have to, the users should not be able to shoot themselves in the foot.

The Text Flow engine will provide robust text editing from simple email editing to advanced multi-flow newsletters, including robust styling, tables, footnotes, citations, references, images, drawings, headers, footers and all the bells and whistles. The engine can be configured to handle all cases.

Novel (advanced when needed) text layout and text editing component suite

The Text Flow suite is a set of novel components for text layout and text editing.

The suite is implemented in 100% modern TypeScript and runs in any modern browser.

Allows any website or PWA to offer advanced robust text layout and editing. Built to be highly customizable.

(see some screenshots here)

The suite consists of the following components:

Text Flow JSON+SVG File Format, a robust file format based on JSON and SVG.
Text Flow Layout, a TypeScript component for advanced text layout.
Text Flow HTML+SVG file format and reader, "a new PDF" - Text Flow layouts can be exported in this HTML-based file format with a embedded "reader code" for page navigation and zoom in and out features.
Text Flow Core Editing, a TypeScript component for advanced text editing.
Text Flow Drawing, a TypeScript component for editing SVG-based drawings or adding overlays to bitmapped images.
Text Flow, a word processor PWA - "The BTF".

Potential future extensions include:

Text Flow Books, a PWA for creating multi-chapter books.
Text Flow Page Layout, a PWA for creating multi-flow newspaper style text layouts.
Text Flow Help, a PWA for creating online help systems.
Text Flow Google Docs Add-on, send your Google Docs content to BTF for advanced layout.

Core layout features

The layout engine supports three different layout modes:

Paged (autmatic) layout. Engine handles all page management. Supports "special first page", "left and right pages", "blank pages".
Paged (manual) layout. For newspaper-style text layout. Each page manually laid out with support for multiple text frames with multiple text flows (articles). Layout supports jump links.
Pageless layout. For webpage-like layout and editing.

Each page can define three kinds of frames:

Header
Footer
Flow

Header and footer frames contain text of their own. BTF supports running header variables, e.g. [[h1]], if inserted into a header, the [[h1]] variable will show the closes Heading 1 paragraph on the page or previous page.

Flow frames are connected to a text flow, there is at least one flow in each document but you can use multiple flows (think articles) to create newspaper style documents.

Each frame can define any number of columns; the gutter space between them as well as a potential divider painted between the columns.

Features supported by the layout engine: autonumbering; numbering schemes; first page; left/right pages; automatic blank pages; true endnotes, citations and references; footnotes; variables, contextual x-refs, masterpages, robust style framework, user-defined styles; automatic TOC; automatic Index; drop caps; and a lot more...

Demo of using masterpages. (opens in a new tab)

1. User is working on a document using a single (the default) masterpage

2. User turning on the special first page feature which removes the header and footer from the first page

3. User is turning on left/right pages which causes different headers and footers for left and right pages.

4. User turns on "even section page count", which automatically adds a blank page to make sections end on a left page.

Is the world ready for a new PDF?

I doubt that the world is ready for a new PDF. But a new PDF is a side effect of BTF being based on SVG.

Each page is painted as an SVG graphic, i.e. exporting a document for viewing is as simple as creating a container HTML document (and add optional code to show a navigation UX within the document). See link to demo video below.

(demo of printing to SVG+HTML)

Bjorn's Text Flow - the word processor - "BTF"

"FrameMaker running in the browser" - the BTF supports many FrameMaker-like features such as table continuation formats, x-ref formats, variables, blank page support and a lot more.

Designed for the professional author with powerful styling capabilities. "Everything" can be controlled by styles, including horizontal rulers, lists, tables and pictures. Compared to Google Docs, BTF supports custom user defined styles and styles based on other styles.

True endnotes

Compared to FrameMaker, BTF supports true endnotes and the author can also quickly switch a footnote to an end endnote and vice versa.

Citations and References

TF offers built-in support for citations and references. References are not regular text, they are built in data structures that enable TF to quickly reformat a document using a specific format.

Built-in formats:

Modern Language Association (MLA)
American Psychological Association (APA)
American Sociological Association (ASA)
Chicago style
Harvard style

Key features:

"Two clicks" to reformat with a new citations and reference format
"Two clicks" to print with a new format
"Two clicks" to print document without figures and tables
"Two clicks" to print document with only figures and tables

You can print versions using different formats, for example when submitting to journals with specific format demands. The print UX allows you to override the selected format.

Printing supports excluding tables and images since some journals prefer submissions with them in separate documents (these versions are created by excluding everything except the images and the tables).

Right clicking on a citation or reference brings up a special purpose reference editor. When printing for online viewing hyperlinks are added from citation to reference entry and vice versa.

Video below shows the user modifying a reference and the printing the document in different version.

(demo of citations and references ux)

A better footnote and endnote UX?

Do the small things matter?

We are experimenting with improving how to edit footnotes in the Text Flow UX. Footnotes can be hard to find so whenever pointer enters a paragraph with footnotes, blue hotspots appear next to the footnotes (or endnotes), tapping in one of these hotspots reveal a dropdown menu with options to select the footnote, modify properties of the footnote or modify the footnote text. Lines with footnotes also show a small gold colored rectangle to the left to help you find your footnotes. Furthermore you can opt to edit the footnote text in popup mode in which the editor switches to just show the footnote, seems to be handy when editing endnotes that otherwise would mean you would have to scroll down to the end of the document.

(demo of footnote ux)

Contextual x-refs

BTF also supports contextual x-refs: x-refs not just referring to the page of the target paragraph but taking into consideration where the page is compared to the source link, e.g. instead of an x-ref "see Section A on page 121", a contextual x-ref may say "see Section A on the opposite page" or "see Section A on the previous page".

Page editor tool

As mentioned BTF allows the use of different masterpages, e.g. one for left pages and one for right pages. The video below shows the integrated page editor tool for adding custom shapes (for example QR-codes); custom text frames as well as changing frame properties such as column count, column gutter and column dividers. Adding something to a masterpage duplicates the shape to each page using the masterpage in question.

(demo of integrated page editor)

Integrated image overlay editor

The BTF features an integrated image overlay editor - quickly add text, arrows, callouts and even "distorter" shapes to any image (a distorter shape uses pixelation or blurring to obfuscate parts of an image). See the video below.

(demo of integrated image overlay editor)

Integrated drawing tool

BTF features an easy to use drawing tool, including support for QR-codes. See the video below.

(demo of integrated drawing tool)

TOC sections

Automatically creating and inserting TOC sections is supported by the TOC tool, see video below. BTF supports "TOC styles" - an industry unique feature? - one style defines the look of all levels of the TOC, making it easy to maintain alternative TOC styles for different scenarios. As you can see in the video below, the TOC tool allows the user to pick from defined TOC style and see the result before committing.

(demo of TOC tool)

Index sections

Automatically creating and inserting Index sections is supported by the Index tool, see video below. BTF supports "Index styles" - an industry first feature? - one style defines the look of all levels of the Index, making it easy to maintain alternative Index styles for different scenarios. As you can see in the video below, the Index tool allows the user to pick from defined Index style and see the result before committing.

BTF is using the same syntax for creating index keywords as Adobe Framemaker.

(demo of Index tool)

Introducing Numbering Schemes

TF supports Adobe FrameMaker-like autonumbering with an additional twist - Numbering Schemes - quickly turn on, off or modify "autonumbers" for sets of styles.

Key features:

"Two clicks" to add or remove numbering for all headings.
"Two clicks" to add or remove numbering for all figures and tables.
Scheme editor with overview of all styles modified by scheme

To setup numbering of certain paragraph styles, a TF document supports a set of "numbering schemes" that can be enabled of disabled. A scheme lists a set of styles that should or shouldn't be numbered. TF comes with a set predefined schemes like "Sections and headlines". Turning on this scheme numbers all sections and all headings 1 to 6. Another is "Sections and Heading 1s" - this one turns on numbering of all sections and all heading 1 paragraphs, and turns off numbering for headings 2 to 6. The scheme "Table captions" turns on numbering for all table captions. You can of course add any scheme you find useful or modify the built-in ones.

(demo of numbering schemes ux)

Unsorted and incomplete list of features

Open and save documents using the modern Browser Filesystem API
Multiple text flows per document (think newspaper style layout with multiple articles and jump links)
Multiple text frames per page
Multiple text columns per text frame
First-page support
Left/right page support
Blank page support, think "(this page intentionally left blank)"
Automatic even section page counts - adding blank page if neccessary
Free-layout pages, place any number of frames in any order and assign different flows
Masterpages
Embedded SVG masterpage overlay editor (e.g. add any graphic to masterpage)
Header, footer and body text frames
Table (caption) continuation support, e.g. "sheet 1 of 4"
Table support including captions and repeated head sections on multi-page table
Cross-reference support with FrameMaker-like format syntax
Contextual Cross-reference support, e.g. "see section S on opposite page" or "see section Q below"
System variables, e.g. page#, page count
User defined variables
"Jump to" and "Jump from"" links for multi-flow documents (e.g. article A continues on page 4)
Drop caps, including dedicated style support
Footnotes
Footnotes divider style support
Endnotes are core features, not an x-ref-based afterthought
Citations and references are core features, not an afterthought
Quick reformat of all citations references using different format
Quick print document version WITHOUT figures and tables
Quick print document version WITH ONLY figures and tables
Automatic Endnotes section headlines, added/removed when endnotes inserted or removed
Automatic References section headlines, added/removed when citations inserted or removed
Easy-find foonotes/endnotes/citations with special buttons showing up on mouse over paragraphs
Edit footnote text in full page view or as laid out block
Edit endnote text in full page view or as laid out block
Supports alternative footnote styles with UX to change all
Supports alternative endnote styles with UX to change all
Quick conversion of footnote to endnote and vice versas
FrameMaker-like autonumber formats
Numbering schemes - making autonumbering easier to adopt
Index markers and Index Designer
Auto-create TOC sections
Horizontal rulers (including style support)
Highly style centered
Table styles, including alternate row colors, column colors
List item styles, style sets formats at six levels
Window and orphan control
Embedded image overlay editor, e.g. add callouts and obfuscate/pixelate parts
Embedded drawing editor
Print to HTML+SVG (multi-page output)
Print only certain page range
Print to SVG (one large SVG for all pages, column count is user defined)
Print to PNG bitmap (one large image for all pages, column count is user defined)
Tab stops: left, right, center, decimal
Tab leaders: none, line, dash, dot
Ruler for margin and margin changes
Right click ruler to add new tab stop
Document margins, each page can override with custom margins
Zoom to fit width, two pages, four pages and more
Zoom to fit two pages with special first page support
Show white space mode
Show hard white space mode
Show tabs mode
Full support for keyboard navigation, end of word, end of line, line up/down etc
Hyperlinks
Paragraph pattern backgrounds, including embedded pattern designer
Paragraph gradient backgrounds, including embedded gradient designer
Double click to select words
Triple click to select paragraph
TAB at end of table body section inserts new row
TAB in list items to increase/decrease levels
Continue number from previous list support
Set list start number
All relevant border styles, e.g. solid, dashed etc
All relevant list number formats, e.g. numeric, roman, etc
All relevant paragraph properties, e.g. text align, margins, borders etc
All relevant text properties, e.g. font, color, decorations etc
Define new style UX
Update style to match UX
Reset to style UX
Find and replace UX
Insert hyperlink UX
Insert x-ref UX
Insert TOC UX
Insert Index UX
Insert Index marker UX
Show Index markers UX
Insert Image UX
Insert Ruler UX
Insert Table UX
Quick find footnote UX
Quick find section break UX
Zoom to fit height, width, two pages, four pages etc
Zoom to show "two up"" with special first page support
Quick toggle between pageless and paged layout
Page thumbnail overview sidebar for quick navigation
Style list sidebar for quick style changes
TypeScript component and typings to write the file format
...and a lot more...