PDF: Add new vertical layout

[Intelligent2013]

In continue of metanorma/mn-native-pdf#713.

As titled, based on the new JIS layout JIS_Template_traditional_blue_v2_traditional.pdf.

To do (draft list):

• add new parameters :presentation-metadata-color-cover-page-background-1:, :presentation-metadata-color-cover-page-background-2: for vertical stripes (with opacity) on the cover page no need, it's part of user-provided cover page
• add new parameters :presentation-metadata-color-cover-page-background-opacity-1:, :presentation-metadata-color-cover-page-background-opacity-2: vertical stripes opacities no need, it's part of user-provided cover page
• integrate two new logos JIS and JSA into SVG. no need, it's part of user-provided cover page
• add new parameter :presentation-metadata-color-header-footer-background: (blue bar in the reference PDF)
• use font Noto Sans JP Thin, Noto Serif JP ExtraLight and Source Sans Noto Serif JP Medium in the XSLT, and add into processor.rb metanorma-jis (Jis new layout fonts #230)
• use Japanese numerals in
  • page numbers (header/footer)
  • clause numbers (Support Japanese numerals #228)
  • ordered list items (Support Japanese numerals #228)
  • dates (Support Japanese numerals #228)
• add parameter :coverpage-image: (see https://www.metanorma.org/author/bsi/ref/document-attributes/) - image location, for image to be included on the PDF cover page. Image location is relative to the source document.
  • into XSLT
  • into metanorma-jis (Add document attributes for cover and back page image #227)
• add parameter :backpage-image: - same, for image to be included on the PDF back page. (Add document attributes for cover and back page image #227)
  • into XSLT
  • into metanorma-jis (Add document attributes for cover and back page image #227)
• put cover page image into the back cover page, if back cover page doesn't set
• add last section (see page 4 in the reference PDF)
• don't rotate letters in web links (http;// https:// www.), no need special actions, the English text doesn't rotate by default
• some English text should not be rotated, markup with something like this span:norotate[text]

Known issues:

• these element didn't rotate in the vertical layout (currently I don't know how to fix it and how long it will take):
  • page numbers in ToC (Vertical layout: Japanese text isn't rotated in the page numbers xmlgraphics-fop#10)
  • page numbers in the footer (left side) (Vertical layout: Japanese text isn't rotated in the page numbers xmlgraphics-fop#10)
  • table (Vertical layout: Japanese text isn't rotated in fo:block-container and fo:table xmlgraphics-fop#8)
  • block-container (Vertical layout: Japanese text isn't rotated in fo:block-container and fo:table xmlgraphics-fop#8)

[ronaldtse]

Here's an updated file for reference:

• JIS_Template_traditional_blue_v2_traditional.pdf

use font NotoSansJP-Thin, NotoSerifJP-ExtraLight and Source Sans in the XSLT

I've used "Noto Serif JP" "Medium" to replace the Italic text, so we don't need Source Sans.

put cover page image into the back cover page

It's a mirrored front-back image of the front cover page. If possible allow using a separate front/back cover page.

Thanks!

[Intelligent2013]

add new parameters :presentation-metadata-color-cover-page-background-1:, :presentation-metadata-color-cover-page-background-2: for vertical stripes (with opacity) on the cover page

The parameter :presentation-metadata-color-cover-page-background-1: for

The parameter :presentation-metadata-color-cover-page-background-2: for

Also we need two parameters for opacities:

• :presentation-metadata-color-cover-page-background-opacity-1: 0.58
• :presentation-metadata-color-cover-page-background-opacity-2: 0.75

[Intelligent2013]

The footer contains the last on page clause title. First depth clause:

[Intelligent2013]

@ronaldtse there are question about numbers in header/footer:

• the number in header means :edition:?
• the number in footer means the page number? Just mistakenly all page number are 2?
• both numbers in header/footer ToC page should be in parenthesis?

Examples:

• ToC page

  • header - number 1 in parenthesis
    
  • footer - number 2 in parenthesis
    

• first document page

  • header - number 1
    
  • footer - number 2
    

• last document page - same

[Intelligent2013]

@ronaldtse could you check the fonts which are used on the cover page in the source Adobe Illustrator file.
Adobe Acrobat shows Noto Serif Extra Light for all texts:

but the rendered fonts looks so:

I've tried to use Noto Serif JP Medium, but it looks different than in the source PDF(generated from AI):

Also, Adobe Acrobat in the document properties shows 7 fonts Noto Serif Extra Light:

Thanks.

[ronaldtse]

@Intelligent2013 I think this is because I’m using Noto Sans JP “Variable” that can realize all weights. It’s not Extra Light.

[Intelligent2013]

Actually the fonts Noto Serif JP Medium, Noto Serif JP Bold and Noto Serif Black are using on the cover page text.

[Intelligent2013]

Latest PDF with rotated text in the tables: 20241205.vertical.jis.example.pdf

[ReesePlews]

hello @Intelligent2013 this layout represents a great amount of work here. thank you very much. i have followed this work on and off, sorry i could not review everything.

i have one question, the cover is A4 portrait but the pages are A4 landscape. was there a precedent/reference to use landscape format for this layout over portrait format?

if we think about a printed and bound document (at the top of the landscape formatted pages) i think there would not be enough space to see the top row of characters with the binding. while there is more space at the bottom of the landscape pages, the binding would never be at the bottom, as it causes too much interactive conflict for the user.

it is really fascinating to see this and to know that metanorma has this implemented functionality. i think there are specific areas in the document that could be independently modified a bit for readability. its that independent aspect that makes it very difficult to define blanket rules for some of those issues.

[Intelligent2013]

@ReesePlews thank you for the comments.

i have one question, the cover is A4 portrait but the pages are A4 landscape. was there a precedent/reference to use landscape format for this layout over portrait format?

Your question is hard for me to answer. The XSLT module for the PDF generating was developed based on the template JIS_Template_traditional_blue_v2_traditional.pdf provided 1.5 month (see post
#226 (comment)).
I don't have the knowledge in the Japanese language at all and can't appreciate the layout ergonomic for the end-user.
I thought that the sample template was accepted by JIS...

I forward the question to @ronaldtse.

if we think about a printed and bound document (at the top of the landscape formatted pages) i think there would not be enough space to see the top row of characters with the binding. while there is more space at the bottom of the landscape pages, the binding would never be at the bottom, as it causes too much interactive conflict for the user.

Regarding printing, I agree there may be problems in the header/footer (i.e. left/right margins on landscape pages) printing due the limitation of some printers.
But what does bound document mean? And see the top row of characters with the binding. Could you clarify, please?
Your UX will be helpful.

[Intelligent2013]

Next tasks are:

• update https://github.com/metanorma/docs/blob/main/109.adoc (there are some discrepancies between 109.adoc, https://www.unicode.org/reports/tr50/tr50-28.html and Vertical layout: replacement of horizontal with vertical Unicode glyphs mn2pdf#306)
• add 180° rotation into XSLT
• support mixed (horizontal) orientation (via like this span:horizontal[text], or span:norotate[text])
• support half font size text (span:halffontsize[text])
• support special positioning for U+301D, U+301E, U+301F, U+309B (I don't figure out how do it....)
• regarding 1. Use dedicated vertical presentation forms when available, may be it would better to apply the 90° rotations, because if the user copies the text from PDF with dedicated vertical presentation (first 'left cornet bracket'):

and then paste the text into editor, the the user will see the 'left cornet bracket' as vertically oriented symbol:

instead of

[Intelligent2013]

Some characters from U+3001 IDEOGRAPHIC COMMA can't be rotated for correct vertical visualization, for instance U+3001 IDEOGRAPHIC COMMA looks as glyph moved from the left bottom to right top corner. Such visualization can't be performed by rotation.

Therefore, these characters need to be replaced by the vertical form (dedicated character).

In this case, there will be differences between the original and copy-pasted text in part of these characters.

[Intelligent2013]

Found 8 characters which require to use the dedicated characters:

• U+3001 IDEOGRAPHIC COMMA (、) to U+FE11 PRESENTATION FORM FOR VERTICAL IDEOGRAPHIC COMMA (︑)
• U+FE50 SMALL COMMA (﹐) to U+FE10 PRESENTATION FORM FOR VERTICAL COMMA (︐)
• U+FE51 SMALL IDEOGRAPHIC COMMA (﹑) to U+FE11 PRESENTATION FORM FOR VERTICAL IDEOGRAPHIC COMMA (︑)
• U+FF0C FULLWIDTH COMMA (，) to U+FE10 PRESENTATION FORM FOR VERTICAL COMMA (︐)
• U+FF1A FULLWIDTH COLON (：) to U+FE13 PRESENTATION FORM FOR VERTICAL COLON (︓)
• U+FF1B FULLWIDTH SEMICOLON (；) to U+FE14 PRESENTATION FORM FOR VERTICAL SEMICOLON
• U+FF01 FULLWIDTH EXCLAMATION MARK (！) to U+FE15 PRESENTATION FORM FOR VERTICAL EXCLAMATION MARK (︕)
• U+FF1F FULLWIDTH QUESTION MARK (？) to U+FE16 PRESENTATION FORM FOR VERTICAL QUESTION MARK (︖)