$30 off During Our Annual Pro Sale. View Details »

より良いタイポグラフィのための知られざるCSS

 より良いタイポグラフィのための知られざるCSS

CSS組版 Vivliostyle ユーザーと開発者の集い 2020秋 https://vivliostyle.connpass.com/event/189940/

Takeru Suzuki

October 24, 2020
Tweet

More Decks by Takeru Suzuki

Other Decks in Technology

Transcript

  1. ླ໦ ৎ
    Α
    Γྑ͍λΠϙάϥϑ
    ΟͷͨΊͷ
    ஌ΒΕ͟Δ$44

    View Slide

  2. Χʔχϯά
    ʕɹάϦϑ͕શ֯෯ͷͱ͖͸ແޮʹ
    ʕɹάϦϑ͕ϓϩϙʔγϣφϧ෯ͷͱ͖͸༗ޮʹ
    font-kerning

    View Slide

  3. font-kerning: auto; /* ϒϥ΢β͕ܾఆʢॳظ஋ʣ */
    font-kerning: normal; /* ΧʔχϯάΛద༻͢Δ */
    font-kerning: none; /* ΧʔχϯάΛద༻͠ͳ͍ */

    View Slide

  4. font-kerning: normal;
    font-kerning: none;

    View Slide

  5. body {
    font-kerning: none; /* ϖʔδશମͰແޮʹ */
    }
    :lang(en) {
    font-kerning: normal; /* ԤจͰ͸༗ޮʹ */
    }
    h1 {
    font-feature-settings: "palt" 1;
    font-kerning: normal;
    /* ϓϩϙʔγϣφϧϝτϦΫε͕༗ޮͳΒΧʔχϯά΋༗ޮʹ */
    }

    View Slide

  6. font-feature-settings: normal;
    font-kerning: none;
    /* σϑΥϧτ */
    font-feature-settings: normal;
    font-kerning: normal;
    font-feature-settings: "palt" 1;
    font-kerning: none;
    font-feature-settings: "palt" 1;
    font-kerning: normal;

    View Slide

  7. ໿෺ͷͿΒԼ͛
    ʕɹे෼ͳϚʔδϯΛ֬อ͢Δ͜ͱ
    hanging-punctuation

    View Slide

  8. hanging-punctuation: none; /* ͿΒԼ͛ͳ͠ʢॳظ஋ʣ */
    hanging-punctuation: first; /* ߦ಄Ҿ༻ූɾׅހ */
    hanging-punctuation: last; /* ߦ຤Ҿ༻ූɾׅހ */
    hanging-punctuation: force-end; /* ߦ຤۟ಡ఺Λڧ੍ */
    hanging-punctuation: allow-end; /* ߦ຤۟ಡ఺Λڐ༰ */

    View Slide

  9. hanging-punctuation: none;
    hanging-punctuation: allow-end;

    View Slide

  10. ϋΠϑωʔγϣϯ
    ʕɹԤจͷίϯςϯπͰ͸ࣗಈϋΠϑωʔγϣϯʹ
    ʕɹlangଐੑʹΑΔݴޠͷࢦఆΛ๨Εͣʹ
    hyphens

    View Slide

  11. hyphens: manual; /* ࢦఆͷҐஔͰϋΠϑωʔγϣϯʢॳظ஋ʣ */
    hyphens: auto; /* ϒϥ΢βʔʹΑΔࣗಈϋΠϑωʔγϣϯ */
    hyphens: none; /* ϋΠϑωʔγϣϯ͠ͳ͍ */

    View Slide

  12. hyphens: manual;
    hyphens: auto;

    View Slide


  13. View Slide

  14. վߦنଇʢېଇʣ
    ʕɹϒϥ΢βʹΑͬͯσϑΥϧτͷېଇ͕ҟͳΔ
    line-break

    View Slide

  15. line-break: auto; /* ϒϥ΢β͕ܾఆʢॳظ஋ʣ */
    line-break: anywhere; /* ېଇͳ͠ */
    line-break: loose; /* ऑ͍ېଇ */
    line-break: normal; /* ඪ४తͳېଇ */
    line-break: strict; /* ڧ͍ېଇ */

    View Slide

  16. line-break: anywhere;
    line-break: loose;
    line-break: normal;
    line-break: strict;

    View Slide

  17. ૷০ઢͷଠ͞
    ԼઢͷҐஔ
    ʕɹϦϯΫͳͲͷԼઢͷελΠϧ੍͕ޚՄೳʹ
    text-decoration-thickness
    text-underline-offset

    View Slide

  18. text-decoration-thickness: auto; /* ॳظ஋ */
    text-decoration-thickness: 1px;
    text-decoration-thickness: 0.05em;
    text-underline-offset: auto; /* ॳظ஋ */
    text-underline-offset: 2px;
    text-underline-offset: 0.125em;

    View Slide

  19. text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.125em;

    View Slide

  20. ݍ఺
    ʕɹे෼ͳߦؒΛ֬อ͢Δ͜ͱ
    ʕɹϑΥʔϧόοΫͷελΠϧΛ๨Εͣʹ
    text-emphasis

    View Slide

  21. text-emphasis: none; /* ॳظ஋ */
    text-emphasis: dot;
    text-emphasis: open sesame;
    text-emphasis: "ˎ";
    text-emphasis: "\25c6" #d70c19;

    View Slide

  22. text-emphasis: dot;
    text-emphasis: open sesame;
    text-emphasis: "ˎ";
    text-emphasis: "\25c6" #d70c19;

    View Slide

  23. em {
    font-style: normal;
    font-weight: bold; /* σϑΥϧτͰ͸ϘʔϧυͰ */
    }
    /* text-emphasisΛαϙʔτ͍ͯ͠Δ؀ڥͰ͸ݍ఺Ͱ */
    @supports (text-emphasis: dot) {
    em {
    font-weight: inherit;
    text-emphasis: dot;
    }
    }

    View Slide

  24. ΑΓྑ͍λΠϙάϥϑΟͷͨΊͷ஌ΒΕ͟Δ$44
    ೥݄೔
    ླ໦ৎ
    UFSLFMKQ
    ϑΥϯτ
    ஜࢵΰγοΫ1SP#ʢϑΥϯτϫʔΫεʣ
    5IF4BOT.POP$POEFOTFEʢ-VDBT'POUTʣ
    ΞΠίϯ
    'POU"XFTPNFʢGPOUBXFTPNFDPNMJDFOTFʣ

    View Slide