Key differences of CSS line layout discovered while developing an

Nat McCully | Senior Engineering Manager, Adobe Systems Japan

Key differences of CSS line layout discovered while developing an EPUB renderer for Japanese

2011年6月1日水曜日

Who is this guy?

1998 to 2008 InDesign Japanese Engineering Lead

2008 to present Flash Text Engine Inline input support Text Layout Framework 　　 Layout engine, IME Adobe Digital Publishing Suite for Japan EPUB Japanese layout engine

CSS Layout vs. Japanese line layout conventions

Differences between CSS and InDesign:

1) Line Height calculation method2) Run placement within the line3) Line Leading calculation method

Core Concepts of CJK line layout:

1) Ideographic embox2) Leading direction3) Leading measurement points (baselines)4) Mojikumi spacing

It needs to be easy to control and access these things in CSS.

LTRB margins

１２３４５６７８

LTRB margins

９1011

So, how is line layout done in CSS?

Line Height

Line Height = Leading!

ings people

ings peopleAscent

Descent

Ascent

DescentLine Height = Leading

Line gap

InDesign Roman Composition

ings peopleInDesign Roman Composition

ings peoplesay to each o

First line offset = Ascent

Second line offset = 100% of the Leading

InDesign Japanese Composition

考えてみれInDesign Japanese Composition

考えてみれものごとを

First line offset = embox height

Second line offset = embox height + previous line gap

CSS Text Line placement

ings peopleCSS Text Line placement

ings people1/2 line gap

1/2 line gap

CSS Text Line placement

ings people1/2 line gap

1/2 line gap

Line y position (Roman baseline)

What happens when the text size increases?

e yearlyWhat happens when the text size increases?

e yearly1/2 line gap

1/2 line gap

What happens when the text size increases?

1/2 line gap

Line baseline moves down, but calculation not straightforward

InDesign line layout (Japanese)

考えてみれば

If the "rst line’s origin is related to the embox, and if you understand the relative position of the Roman baseline to the embox, you can place the runs within the line, and the lines within the frame, correctly.

考えてみれば

CJK baselines

Em-box Center Baseline

Em-box Bottom Baseline

Japanese leading model

Leading

Line Height

Japanese grid

Grid is 14 pt. text, 21 pt. leading.Large text is 18 pt., 21.5 pt. leading,paragraph centered in 4 grid lines (4 gyou-dori)

Equal spacebefore anda!er to make4 gyou-dori

Japanese grid

Grid is 14 pt. text with 21 pt. leading (7 pt. aki)Large text is 21 pt., which causes line heightto increase to 35 pt. (14 x 2 + 7) for that line.

14 pt. line height

35 pt. line height

14 pt. line height

Run uses bottom baselineRun uses center baseline

Run uses top baseline

Baseline Grid vs. Japanese Grid in InDesign

"e Japanese grid:1) Sets the frame size to #t the grid2) Positions lines in the frame regardless of font size to #t to the grid (snaps like baselines, e.g. embox centers)

"e baseline grid:1) Allows lines in the paragraph to “snap” to the grid, aligning to “snapped” lines in any other frame on the page2) Supports any single baseline (embox or Roman) per paragraph

Key differences of CSS line layout discovered while developing an

Documents

Transcript of Key differences of CSS line layout discovered while developing an

BASICS€¦ · CSS Anatomy; Attaching CSS to HTML; Default CSS; Specificity & Cascade Misison: Internal, External, Inline CSS on your website February 7 IDs and Classes; Basic CSS

HTML&CSS 5 - Intermediate CSS (2/2)

Communicating Across Differences Communicating … · approaches of interpersonal communication, but I recently discovered how intercultural experience can promote better interpersonal

HTML & CSS › assets › html-css-library-professionals.pdfOpen the 2_basic-css/ folder Open css-intro.html in Notepad (Windows) or TextEdit (Mac) AND open css-intro.html in your

Cascading Style Sheets CSS by Pavlovic Nenad by. 2Cascading Style Sheets Presentation Contents What are CSS? What are CSS? History of CSS History of CSS.

HTML & CS S€¦ · CSS CSS Syntax ... Including CSS Specificity Rules The CSS Box Model Responsiveness CSS Flexbox (optional knowledge) ...

INTRODUCING CSS What CSS does How CSS works Rules, properties, and values.

CSS Hadas Kahsay. Overview What is CSS Basic syntax of CSS Rules How to link CSS style to html documents Browsers and CSS Advantages of CSS.

CSS: Cascading Style Sheets - elite.polito.it · Summary •Introduction •CSS syntax •CSS selectors •CSS cascading •CSS box model •CSS positioning schemes •Page layout

CSS, CSS Selectors, CSS Box Model

with CSS Grid + CSS Variables · CSS Grid + CSS Variables. CSS Grid (CSS Grid Layout Module Level 1) Why not just use ﬂexbox? Intrinsic Web Design. Grid terminology. Grid display:

HTML&CSS 6 - Advanced CSS

the webjaoo.dk/dl/html5-london-2011/slides/MartinBeeby... · CSS3 Animations CSS3 Backgrounds and Borders CSS Color CSS FlexBox CSS Fonts CSS Grid Alignment CSS Hyphenation CSS Image

The CSS Summit: CSS & Form Elements

CSS & eCSStender [CSS Summit 2011]

Chapter 8 Cascading Style Sheets (CSS). Agenda Definition of a CSS style Types of CSS Styles CSS Backgrounds CSS Text CSS Fonts CSS Links CSS Lists CSS.

Morgan McCollum Email morgan.mccol@gmail · transitioning mobile applications to wearable devices Utilized the latest CSS trends, techniques and technologies, and differences between

THE CSS POINTcsspoint.yolasite.com/resources/EDS Notes.pdf · the css point the best place for all css aspirants css eds notes

EVALUATION OF GENDER DIFFERENCES IN …€¦ · analyzing and modelling differences in technical efficiency between men and ... discovered no significant productivity differences

[Basic HTML/CSS] 5. css - selector, units