Summary of problems encountered in typesetting and design of Web page long text

Source: Internet
Author: User

Article Description: The layout and design of long text is our puzzle. We also encountered this problem when we were designing a new version of this website.

The article is long, the design is awkward, how to do?

The layout and design of long text is our puzzle. We also encountered this problem when we were designing a new version of this website. We put forward the question in the discussion, the argument is put forward by three authors, and we hope that we can refer to it and discuss it. The following discussion is a summary of some of our recent ideas, perhaps missing some focus or bias, and please correct me.

We're talking about a long article.

The macro-typesetting and interactive design of content with a considerable length of text-oriented contents is the focus of our discussion, and the short and multimedia interactions are not covered. where fonts, kerning, line spacing, and other typographical details, we also basically do not involve.

The problem of reading long text

Lack of patience, lengthy articles without any typesetting, will give the reader an instant loss of interest in reading, if not read it is tantamount to penance. Therefore, it is very necessary to improve the structure and typesetting of the long text to enhance the reading and even "induce reading sex". To attract readers to read the long text, must conform to the reader's reading psychology:

    1. The length of the content should be avoided to make the reader feel the pressure
    2. Let readers have a clear understanding of the progress and goals of reading
    3. To provide readers with a pause and a sense of fulfillment in reading
    4. To make it easy to read and retrieve more than once

The lack of patience in the digital reading is particularly significant, the digital reading environment is numerous and distracting, so that readers read the article is difficult (see the old cat article ). This is one of the reasons why devices such as the Kindle and readability are popular.

In the electronic environment for long text typesetting, we currently have the following options:

    • The vertical scrolling type. such as most Web pages, single column text, vertical scroll bar, occasional pagination.
    • Horizontal scrolling. such as the recent introduction of many traditional media applications on the IPad. Generally have multiple columns of text, horizontal sliding pagination.
    • ebook type. such as Ibooks,goodreader and other applications. Single-column or multiple-column text, with pagination as the basic structure, or even special page effects.

Fragmented text

From the semantic structure of the long text into a short essay, is the most basic separation, can also achieve the purpose of attracting readers to read. First, the separation makes the long text appear to consist of several passages, no longer fearful; second, the separated passages define the reading progress and goals; third, each end of a passage, the reader has the opportunity to rest and obtain satisfaction; four, the essay title, paragraph and other typesetting form in a way is the long text "anchor point", Make it easier to read more than once. The most common way to divide structure and semantics is to segment, chapter and verse. These are largely the work of authors and editors, and the part that designers can control is more about how these fragmented passages are further decomposed by the limitations of physical conditions. For traditional printing, the physical limit is the size of the paper. For network typesetting, the physical limit is the size of the reading equipment, resolution, update speed, color quantity, and even storage capacity.

Ancient Scrolls


For a single column of books, pagination itself is a text fragmented. For a long time in human history, both Chinese and western characters are written on scrolls (scroll), but the direction of scrolling is different. Reading such a scroll is unbearable to modern people. The emergence of pagination really saved people's reading of long texts, but also since the advent of cheap paper, the core habit of modern reading. The pagination itself provides the best progress indicator, which can be drawn from the number of pages and the cumulative thickness of the page. On the other hand, the coherent of the scrolls make readers unable to digest, and the pauses and bookmarks that come with pagination make it possible to read many times.

Single or multiple columns: Chinese and Western

The most useful invention for Western-language designers in typesetting is the design of multiple columns. Multi-column design magically divides a long text into several columns, design 7-10 words per column, which allows readers to easily read longer text, and even help readers to scan through the landscape before reading, capturing interesting fragments, reading from the middle. The other advantage of multiple column design is that it can save the maximum amount of space, the number of columns in the fixed space design is larger than the single column design. These two features, reading habits and costs, make the multi-column design a favorite for magazines and newspapers.

However, multi-column design still does not apply to too long articles. Multi-column design itself will be excessively fragmented, not suitable for the structure of the novel and other closely related subjects (see our previous article ). Large newspapers, literature, thousands of words of the article is probably the limit of the design of multiple columns. In addition, multi-column design to modern times has been widely used in the Chinese context, Chinese magazines and newspapers also deeply love this one design. But whether it really suits our reading habits remains to be seen, even though our reading habits may have been changed.

In addition, it is worth mentioning that Chinese ancient books use a large number of "double line Shang" means, in a line of text between the two lines of annotation text, is also a format in accordance with the semantic content segmentation method.

Progress record: Why do we like to read printed books

The carrier of digital reading has existed for a while. The giant monochrome cathode ray tube screen marks the age of the electronic reading of the stone ages, and the reader is almost the only researcher. Today, LCD screens and electronic ink have been brought to the general public by the experience of reading in media that are not paper. However, in such a carrier, the most attractive to readers is still magazines and newspapers and other short text content. The reading of lengthy books is still difficult to be widely accepted in the proper way. Put aside the attachment to the book itself, such as cover, texture, smell, weight, and so on, why do we like to read printed books? The most important point of printed books is that the digital reading is always impossible to achieve, is a progress record. The progress record here is not a simple bookmark feature. Printed books, through pages, paragraphs, chapters, pages, and bookmarks, make up the habit of reading progress records for thousands of years. Readers can know the progress through the thickness of the book, by scanning the page to know the previous part of the reading, every time to read books, progress records are fixed unchanged. These records have psychologically improved the reader's sense of security, fulfillment and convenience, and this reading habit, which continues from childhood, gives readers the standard of what is "proper reading".

Traditional books are fixed, and people are accustomed to the progress of the record method.

Let's take a look at the main digital readings in the performance of the progress record:

    • The vertical scrolling type. There are almost no progress records, and as the window can change at will, the length and position of the scroll bar changes, and the reader is completely unable to have a real sense of its own progress. Then you can't get the satisfaction of the progress, and you can't easily read it many times.
    • Horizontal scrolling. As with vertical scrolling, readers are unable to get an accurate sense of progress. But the multi-column design itself provides another kind of progress indicator, which is better than the vertical scrolling.
    • ebook type. The progress record is relatively best, with pages, usually bookmarks, even if most of them are not. Some e-books offer virtual thickness hints.

Digital Long text: Discard scrolling, inherit pagination?

The design goal of the electronic reading carrier for the long text typesetting became obvious: strengthen the progress record.

Apple and Adobe are trying to improve scrolling (scrolling) and add progress Records.

Scrolling itself is an interesting question. The realistic basis for scrolling (scroll) comes from the Scroll (scrolls), a reading that we have long abandoned, but it has become one of the key interactions in the digital age. However, scrolling is painful for long texts. Whether it is mobile phone, iPad or Web page, the random scrolling makes reading unstable, the reader should be careful to scroll to the right position, scrolling finished also lost the position of reading text before, many times reading is to wantonly scroll to find the previous position. The IPhone phone book adds a list of alphabetical indexes to the right to compensate for the inefficiencies of scrolling with a lot of information. Although many of the improved scroll bar designs do exist, such as the progress of Acrobat reader, it seems a more worthwhile way to improve long reading and fundamentally discard scrolling.

Some people say that the "Flip page" of the digital age is an apparently outdated simulation (page turning metaphor). This is especially true on many Web pages-it's annoying that readers are forced to click on a tiny page link to turn the page. In the E-book age, the occasional three-dimensional virtual flip-turn animation is comical and 臃, though the effective area of the page is no longer difficult to find. Even so, the benefits of paging itself have not been lost. The paging itself (i.e. the next big piece of fixed content appears after an interactive action) may still survive for a while before we find a better way.

Apple IBooks Simulated thickness change

The thickness of e-books, although seemingly an unnecessary legacy, still gives readers a way to show progress. Before a better design appears (current page/total page number)? ), the thickness display can still assist many readers to read.

In addition, according to the habit of digital reading, long text design should pay more attention to protect the reader's attention, advertising, column information, related articles, comments and other content, if not necessary, should try to avoid affecting reading. Although this contradicts the socialization of digital reading now advocated.

What about the Web page

Some of the improvements we mentioned earlier, such as pagination and thickness display after improvement, are all applicable to E-books. Coupled with the structure of the ebook itself similar to books, making e-books become a long text reading a default optimization.

So what about Web pages? There are still a lot of long text content, including a lot of valuable media content, are still based on the Web page. However, the Web page is based on the scroll bar, based on the change, based on the balance of the existence of a large amount of information, these are with the habit of reading long text. Faced with the advent of e-books and handheld devices that are becoming more and more suitable for long readings, the location of the Web page is increasingly embarrassing. In the end is not the long text and the Web page is fundamentally inconsistent, long text need to discard the Web page, only to embrace a short length of information, or the Web page needs to have a more revolutionary design, to catch the ebook on the long text interactive characteristics? What do you think?


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.