정보통신특강-XML (2001. Fall) XSL-FO 소개 임 순 범 숙명여대 멀티미디어학과

웹 스타일 언어의 특징 DSSSL CSS1 CSS2 ISO 표준, 1996, 주로 SGML 문서에 적용 인쇄 출력이 주 목적, 막강한 기능, 매우 어렵다 CSS1 W3C 표준, 1996. (Cascading Style Sheet) HTML 문서의 스타일 정보를 표현 폰트, 색상, 행간 등 웹 환경 만을 고려한 기능 CSS2 W3C 표준, 1998, HTML & XML 문서에 적용 가능 쪽 모양, 표, 세밀한 조절, 청각 기능 등 추가 한글 환경 부족 (세로쓰기, 다단 편집 등 불가능) 앞으로 문서의 스타일과 내용을 분리하는 방향 문서의 논리적인 구조를 표현하는 방향

웹 스타일 언어의 특징(계속) XSL (Extensible Stylesheet Language) XSLT 와 XSL-FO(Formatting Object)로 구성 XML 문서에 적용, 풍부한 기능 (전자 출판이 가능) 쪽 모양, 세로쓰기, 다단편집, 정교한 스타일 가능 앞으로 문서의 스타일과 내용을 분리하는 방향 문서의 논리적인 구조를 표현하는 방향 결과 비교 : CSS 대 XSL-FO

XSL-FO 개요 CSS 보다 더 세련된 편집 디자인 가능 XSL 파일도 하나의 XML 문서임 XSL-FO 포맷팅 모델 단순 웹 화면보다 전자출판 수준의 화면 출력 가능 XSL 파일도 하나의 XML 문서임 XSLT 로 변환 또는 XSL-FO 요소로 포맷 지정 XSL-FO 포맷팅 모델 Formatting Object : 스타일 적용 개체 스타일 속성 : 각 개체에 스타일 지정 앞으로 문서의 스타일과 내용을 분리하는 방향 문서의 논리적인 구조를 표현하는 방향

XSL-FO 개요 (계속) Formatting Object <fo:xxx> 쪽모양 관련 요소(18) 스타일 적용 대상인 개체, 즉 XSL 요소(element) 쪽모양 관련 요소(18) page-master, page-layout, page-sequence, region, content, flow, title, color 문단 및 글줄 관련 요소(12) block, inline, instream, character, graphic, leader, page-number 표, 목록, 링크 관련 요소(13) table, list, link 기타 요소(11) : multi format, float, footnote, wrapper, marker 앞으로 문서의 스타일과 내용을 분리하는 방향 문서의 논리적인 구조를 표현하는 방향

XSL-FO 개요 (계속) 스타일 속성 <fo:xxx 속성=값 … > 공통으로 적용 문단 또는 글줄 영역에 적용 XSL element에 적용되는 속성(attributes) 공통으로 적용 position, font, border, padding, background 문단 또는 글줄 영역에 적용 margin, alignment, dimension 글자에 적용 word-spacing, letter-spacing, word-space 개별 요소 page,layout,leader,table,list 등에 적용 기타 : break, writing-mode, 숫자변환 등 앞으로 문서의 스타일과 내용을 분리하는 방향 문서의 논리적인 구조를 표현하는 방향

XSL-FO 적용 예제 시작 XML 문서 선언, name-space 및 root 개체 정의 XSLT 사용할 경우 template match <?xml version="1.0" encoding="utf-16" ?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format" version="1.0"> <xsl:template match="ebook"> <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format"> <fo:layout-master-set> … </fo:root > </xsl:template> <xsl:template match="ebook/books/book/front/intro/title"> <fo:block font-size="11pt" … > … <xsl:apply-templates /> </fo:block> … … 시작 앞으로 문서의 스타일과 내용을 분리하는 방향 문서의 논리적인 구조를 표현하는 방향 name-space fo: 개체 root 개체 fo: 개체

XSL-FO 적용 예제 (계속) 쪽 모양 (Page Layout) 마스터 정의 쪽 크기와 여백 설정 내용 영역 설정 예) 표지, 머리말, 2단본문 : 내용 영역 설정 5종류 region  쪽의 구성 요소 문단(block) 및 글줄(inline) 요소  글쓰기 방향(direction) 설정 문단 및 글줄 진행 방향을 별도로 설정 앞으로 문서의 스타일과 내용을 분리하는 방향 문서의 논리적인 구조를 표현하는 방향 Region-before Region-after Region-body block Region-start Region-end inline 문단 글줄 문단 글줄 문단 글줄

<fo:layout-master-set> <fo:simple-page-master master-name="표지" page-height="240mm" page-width="160mm" margin-top="20mm" margin-right="20mm" margin-bottom="20mm" margin-left="20mm” border="thin solid silver" background-color = "FFFFFF" > </fo:simple-page-master> <fo:simple-page-master master-name="머리말" page-height="24cm" page-width="16cm" background-color=white> <fo:region-body margin-top="30mm" margin-right="30mm" margin-bottom="30mm" margin-left="30mm" border="thin solid silver" padding="6pt" /> <fo:region-before extent="25mm" border-after-style="solid" border-after-width="thin” … display-align="after" /> <fo:region-after extent="25mm" border-before-style="solid" border-before-width="thin" display-align="before" /> <fo:region-start extent="25mm" border-end-style="solid" border-end-width="thin" display-align="after" /> <fo:region-end extent="25mm" border-start-style="solid" … " display-align="before" writing-mode="tb-rl" /> … 표지 master 속성 머리말 master 앞으로 문서의 스타일과 내용을 분리하는 방향 문서의 논리적인 구조를 표현하는 방향 본문 영역 속성

<fo:layout-master-set> <fo:simple-page-master master-name="표지" … > … <fo:simple-page-master master-name="머리말”… > … 계속 … <fo:simple-page-master master-name= "2단본문" page-height="12cm" page-width="8cm" background-color=white> <fo:region-body margin-top="30mm" margin-right="30mm" margin-bottom="30mm" margin-left="30mm” padding="6pt" border="thin solid silver" column-count="2" /> <fo:region-before extent="30mm" … column-count="1" /> <fo:region-after extent="25mm" border-before-style="solid" … /> <fo:region-start extent="25mm" border-end-style="solid" … /> <fo:region-end extent="25mm" border-start-style="solid" … display-align="before" writing-mode="tb-rl" /> </fo:simple-page-master> </fo:layout-master-set> 2단본문 master 앞으로 문서의 스타일과 내용을 분리하는 방향 문서의 논리적인 구조를 표현하는 방향 다단편집 속성

XSL-FO 적용 예제 (계속) 쪽 순서 및 흐름 설정 개별 스타일 속성 설정 표, 목록 등 정의 fo:page-sequence, fo:static-content, fo:flow 개별 스타일 속성 설정 문단(fo:block) 및 글줄(fo:inline)의 개별 속성 font, background, border, padding, margin, alignment, indentation 등 표, 목록 등 정의 fo:list-block, fo:list-item, fo:list-item-label, fo:list-item-body fo:table, fo:table-column, fo:table-header, fo:table-body, fo:table-row, fo:table-cell, … 앞으로 문서의 스타일과 내용을 분리하는 방향 문서의 논리적인 구조를 표현하는 방향

<fo:page-sequence master-name="머리말" format="1"> 쪽순서 설정 <fo:page-sequence master-name="머리말" format="1"> <fo:static-content flow-name="xsl-region-after"> <fo:block text-align="center" font-size="small"> <fo:page-number /> </fo:block> </fo:static-content> <fo:flow flow-name="xsl-region-body" line-height="1.7"> <xsl:apply-templates select="books/book/front/intro/p[1]" /> <xsl:apply-templates select="books/book/front/intro/title" /> </fo:flow> </fo:page-sequence> <xsl:template match="ebook/books/book/front/intro/title"> <fo:block font-size="25pt" color="#11178D" font-family= "신명조" space-before="4em” keep-with-next="always" text-align="left"> <xsl:apply-templates /> </fo:block> </xsl:template> <xsl:template match="books/book/body/part[1]/chapter[2]/section[4]/p[1]"> <fo:block font-size="11pt" space-after="5pt" font-weight="bold"> 쪽고정 쪽흐름 앞으로 문서의 스타일과 내용을 분리하는 방향 문서의 논리적인 구조를 표현하는 방향 문단 속성 설정 대응되는 문단

<fo:table-column column-width="1.8in" /> <xsl:template match="books/book/body/part[1]/chapter[2]/authgrp/author/p"> <fo:table border="0pt solid black" text-align="center" border-spacing="3pt"> <fo:table-column column-width="1.8in" /> <fo:table-column column-width="1in" number-columns-repeated="1" /> <fo:table-body> <fo:table-row> <fo:table-cell padding="6pt" border="0pt solid blue" background-color="#F5FFF5" number-rows-spanned="1"> <fo:block text-align="justify" padding-before="0" font-size="8pt"> <xsl:apply-templates /> </fo:block> </fo:table-cell> <fo:table-cell padding="6pt" border="0pt solid black"> <fo:block> <fo:external-graphic src="author2.jpg" content-height="60%" content-width="60%" /> </fo:block> </fo:table-row> </fo:table-body> </fo:table> </xsl:template> 표 열 행 cell의 내용 앞으로 문서의 스타일과 내용을 분리하는 방향 문서의 논리적인 구조를 표현하는 방향 cell의 내용