Bjorn

Bjorn's Text Flow

Advanced text layout and editing

- a web app -

This page was last updated May 9 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: first page; left/right pages; automatic blank pages; true endnotes, citations and references; footnotes; variables, ontextual x-refs, masterpages, robust style framework, autonumbering; numbering schemes; user-defined styles; automatic TOC; automatic Index; drop caps; industrial-strength spell check; spell check language per document, per paragraph and per style 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
  • y
  • 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
  • Industrial-strength spell check (Bing)
  • Spell check language per document, per paragraph and per style
  • Turn off spell check per document, per paragraph and per style
  • Per user custom spell check dictionary
  • Document ignored words list
  • Google Doc-style spell check UX (button bar above problem)
  • 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...

More

Check out this short YouTube video.

Go here to checkout some sample screenshots.

File system integration

The app is (when installed) integrated with the host file system, i.e. you can use the 'Open with' feature to launch the app for a selected file.

Extensions that can be opened are:

  • .tflow
  • .tflowt
  • .txt

Note that you have to install the app to enable file system integration.

See also

You might also be interested in these other apps or add-ons.

Bjorn's Graphics Studio - a web app

Vector-based drawing app for the rest of us

Bjorn's Barcode Studio - a web app

Design and print QR and barcodes from spreadsheet data

Bjorn's Label Studio - a web app

Design and print labels and badges

Bjorn's Collage Studio - a web app

Quickly design photo collages

Bjorn's Photo Slides - a web app

Better Google Photos slideshows

Bjorn's Quik Slides - a web app

Really really really quickly turn text into slideshows

Support

Please report bugs here or reach out 2 me with questions @ support@backlund.org.

Got an idea for a new feature/app/add-on? Use the suggestions portal.

Follow me at Instagram @bjornsplayground and check out more videos at my YouTube channel.

You can view our privacy policy here.