Zenn
🦁

PDFにTwitter風の画面を組む（挫折）

2020/12/13に公開
xslfo
idea

XSL Advent Calendar 2020 12日目の遅刻です。
https://adventar.org/calendars/5027

力尽きた。突貫だったのでマージン計算とかフォントサイズ計算もしてないんで、その辺りは間違っても参考にしてはいけない。
Free 版のFont Awesomeでやるのは厳しかった。
region-startとregion-endを使っているものの、本来はregion-body3つでやった方がよさそう。
拡張使わないとCSS3なデザインは厳しいので、AH Formatterを使っています。嘘です。買ったので使いたかった。丸い画像失敗してるのはcolorの指定ミスかな。

こういう繰り返しだとtable使いたくなるしその方がある程度楽なんですが、テーブルレイアウトへの怨嗟の声を聞いて育った世代なので。

<?xml version="1.0" encoding="UTF-8" ?>
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format"
xmlns:axf="http://www.antennahouse.com/names/XSL/Extensions"
font-size="20pt"
font-family="sans-serif"
line-height="1.5"
xml:lang="ja"
>
    <fo:layout-master-set>
        <fo:simple-page-master master-name="screen"
        writing-mode="lr-tb"
            page-width="1220px" page-height="1080px">
            <fo:region-start region-name="leftPane" extent="180px"/>
            <fo:region-end region-name="rightPane" extent="500px" />
            <fo:region-body region-name="xsl-region-body" 
                margin-left="180px" margin-right="500px"
                margin-top="0px" margin-bottom="0px"
                
                border-right="0.3pt solid gray"
                border-left="0.3pt solid gray"
                />
        </fo:simple-page-master>
    </fo:layout-master-set>
    <fo:page-sequence master-reference="screen" writing-mode="from-page-master-region()" >
    <fo:static-content flow-name="leftPane">

    <fo:wrapper
    text-align="center"
     font-family="'Font Awesome 5 Brand', fantasy" font-size="60px" ><fo:block>twitter</fo:block>
    <fo:block  font-family="'Font Awesome 5 Free Solid'">home</fo:block>
    <fo:block  font-family="'Font Awesome 5 Free Solid'">hashtag</fo:block>
    <fo:block font-family="'Font Awesome 5 Free'">bell</fo:block>
     <fo:block font-family="'Font Awesome 5 Free'">envelope</fo:block>
      <fo:block font-family="'Font Awesome 5 Free'">bookmark</fo:block>
      <fo:block font-family="'Font Awesome 5 Free'">list-alt</fo:block>
      <fo:block font-family="'Font Awesome 5 Free'">user</fo:block>
    </fo:wrapper>
    
    </fo:static-content>
    <fo:static-content flow-name="rightPane">
    <fo:wrapper start-indent="50px" end-indent="100px">
    <fo:block axf:border-radius="10% 10%" 
    margin="10px"
    background-color="gray"><fo:inline font-family="'Font Awesome 5 Free Solid'">search</fo:inline></fo:block>
    </fo:wrapper>
    </fo:static-content>
        <fo:flow flow-name="xsl-region-body" >
        <fo:block-container border-bottom="0.3pt solid gray" >
            <fo:block 
            
            margin="10px" font-weight="bold" text-align="left">ホーム</fo:block>
        </fo:block-container>
        <fo:block-container >
        <fo:list-block provisional-distance-between-starts="50px + 10px" provisional-label-separation="10px">
        <fo:list-item border-bottom="0.2pt solid gray">
        <fo:list-item-label start-indent="10px" end-indent="label-end()">
        <fo:block-container axf:background-content-width="scale-to-fit"
        axf:background-content-height="scale-to-fit"
         background-image="radial-gradient(circle,rgba(0,0,0,0),rgba(0,0,0,0), rgba(0,0,0,0), transparent,transparent),
          url(./t7mXRMOr_400x400.jpg)" width="50px" height="50px" />
        </fo:list-item-label>
        <fo:list-item-body start-indent="body-start()" end-indent="20px">
        <fo:block space-after="1lh" font-size="large" color="gray">いま、どうしてる？</fo:block>
         <fo:block font-size="large">
         <fo:inline color="skyblue" font-family="'Font Awesome 5 Free Solid'">image gif poll-h smile calendar  </fo:inline>
         </fo:block>
        </fo:list-item-body>
        </fo:list-item>
        <fo:list-item>
        <fo:list-item-label start-indent="0px" end-indent="0px"></fo:list-item-label>
        <fo:list-item-body start-indent="0px" end-indent="0px"><fo:block background-color="gray"></fo:block></fo:list-item-body>
        </fo:list-item>
        </fo:list-block>
        </fo:block-container>
        </fo:flow>

    </fo:page-sequence>
</fo:root>

補足：AH FormatterだとHTMLのURL指定してもPDFを出してくれる。
https://blog.antenna.co.jp/ILSoft2/archives/11583

Discussion