o3 编辑-打字法

编辑内容的打字风格.

• o3 编辑-打字法
  • 概览
  • 标记
    • 标题样式
      • HTML 语言
      • 联合来文十
    • 身体和头盔
      • HTML 语言
      • 联合来文十
    • 编辑细节样式
      • 主题标记
      • 先站起来
      • 内容提要
      • 说明
      • 按线
    • 引用
    • 大数字
    • 名单
  • 主题修改符
  • 移徙
  • 联系人
  • 许可证

概览

o3-editorial-typography 为编辑内容提供打印样式。 它支持以下品牌:

• core
• sustainable-view

用户界面的打字法见 o3-打字法。 。 。 .

标记

o3 编辑-打字支持 用于反应用户的JSX模板,或直接 HTML。 我们建议尽可能使用JSX.

标题样式

标题样式有5个不同类型.

HTML 语言

<h1 class="o3-editorial-typography-display" data-o3-editorial-underline>
    Large headline
</h1>

<h1 class="o3-editorial-typography-headline">Headline</h1>

<h2 class="o3-editorial-typography-chapter">Chapter</h2>

<h3 class="o3-editorial-typography-subheading">Subheading</h3>

<h3 class="o3-editorial-typography-label">Label</h3>

联合来文十

同样的标题样式也可以在 JSX 环境中使用,也可以导入 <Headline> 组件和应用 type 修饰相. 该组件作为通用js模块和es模块输出。 根据您的工程设置, 您可以从 /cjs 或者说 /esm 目录.

import { Headline } from '@financial-times/o3-editorial-typography/cjs';

<Headline type="display" underline={true}>Large headline</Headline>
<Headline type="headline">Headline</Headline>
<Headline type="chapter">Chapter</Headline>
<Headline type="subheading">Subheading</Headline>
<Headline type="label">Label</Headline>

<Headline> 道具 :

++ Project ++ 类型 ++ 默认 ++ 说明 |------------------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------- - - - - -- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - - - - - - - - - - - - - qq 类型qq display | headline | chapter | subheading | label | headline * * 标题类型 主题 standard | inverse * * * * * * * 标题主题 {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}用下划线 boolean | false 在标题中添加下划线 。 仅有效 display。 。 。

身体和头盔

o3-foundation 提供打字机使用符号,包括编辑机构副本(见 o3-type-body-content-* (第1条). o3-editorial-typography 在此基础上,通过提供一种可选的倒盖样式, o3-editorial-typography-drop-cap。 。 。 .

HTML 语言

<p class="o3-editorial-typography-drop-cap o3-type-body-content-base">
    This is a small paragraph of text with a drop cap.
</p>

主题标记

也叫显示标签,是FT中的分类标签. 用于取笑者(物品卡)来表示职位的类别. 主题标记通常是一个锚,但如果没有页面链接则不必是. 纯 HTML 标记如下:

<a class="o3-editorial-typography-topic-tag" href="#">Topic Link</a>
<span class="o-editorial-typography-topic-tag">Topic Without Link</span>

或 JSX 导入:

import {TopicTag} from '@financial-times/o3-editorial-typography/cjs'; // or /esm

<TopicTag href="#">Topic Link</TopicTag>
<TopicTag>Topic Without Link</TopicTag>

<TopicTag> 道具 :

主题标签的颜色和徘徊颜色可以通过使用下列 CSS 变量来定制:

先站起来

标题下面的简短的介绍,提供一个员额的背景。 与上部组件中的页眉结合使用. 纯 HTML 标记如下:

<p class="o3-editorial-typography-standfirst">Standfirst</p>

或 JSX 导入:

import {Standfirst} from '@financial-times/o3-editorial-typography/cjs'; // or /esm

<Standfirst>Standfirst</Standfirst>;

<Standfirst> 道具 :

内容提要

用于提供文章的简明摘要,为关键要点提供快速,高层次的概述. 它使读者能够不读整篇文章而掌握主要思想.

<p class="o3-editorial-typography-summary">Summary</p>

或 JSX 导入:

import {Summary} from '@financial-times/o3-editorial-typography/cjs'; // or /esm

<Summary>Summary</Summary>;

说明

欲获取关于一件或多件图像的额外信息,这些信息应不那么突出。 纯 HTML 标记如下:

<figcaption class="o3-editorial-typography-caption">Caption</figcaption>

或 JSX 导入:

import {Caption} from '@financial-times/o3-editorial-typography/cjs'; // or /esm

<Caption>Caption</Caption>;

<Caption> 道具 :

按线

Byline是一个包含作者名称,位置和时间戳的复合组件. 它用于在编辑内容中显示作者细节.

作者名称通常是一个锚地,但如果没有页面链接则不必被. 纯 HTML 标记如下:

<div class="o3-editorial-typography-byline">
    <a class="o3-editorial-typography-byline-author" href="#">Joe Doe</a> in
    London
    <time
        class="o3-editorial-typography-byline-timestamp"
        datetime="2019-10-11T20:51:54Z"
        title="October 11 2019 9:51 pm"
        >October 11 2019</time
    >
</div>

或 JSX 导入:

import {Byline} from '@financial-times/o3-editorial-typography/cjs'; // or /esm

<Byline>
    <a className="o3-editorial-typography-byline-author" href="#">
        Joe Doe
    </a>
    {''} in London {''}
    <time
        className="o3-editorial-typography-byline-timestamp"
        dateTime="2019-10-11T20:51:54Z"
        title="October 11 2019 9:51 pm">
        October 11 2019
    </time>
</Byline>;

<Byline> 道具 :

可以通过使用下列 CSS 变量来定制旁线作者颜色和徘徊颜色 :

引用

引文是一个包含引文,作者和标题的复合组件. 用来显示一个人直接说的词. 它有两种类型: block 财务报告和审定财务报表 pull两者的区别在于 block 引文左侧有垂直行,而 pull 引文没有。 纯 HTML 标记如下:

<blockquote class="o3-editorial-typography-blockquote">
    <p>
        Origami is about empowering developers of all levels to build robust,
        on-brand products ranging from simple static sites through to rich, dynamic
        web applications, to do it faster, to do it cheaper, and leave them more
        supportable and more maintainable.
    </p>
    <cite>
        <span class="o3-editorial-typography-blockquote__author">Quote Author</span>
        <span class="o3-editorial-typography-blockquote__caption"
            >Quote Source</span
        >
    </cite>
</blockquote>

或 JSX 导入:

import {Quote} from '@financial-times/o3-editorial-typography/cjs'; // or /esm

<Quote
    type="pull"
    quoteAuthor="Quote Author"
    quoteSource="Quote Source"
    quoteIcon={true}>
    Origami is about empowering developers of all levels to build robust, on-brand
    products ranging from simple static sites through to rich, dynamic web
    applications, to do it faster, to do it cheaper, and leave them more
    supportable and more maintainable.
</Quote>;

<Quote> 道具 :

大数字

Big Number是一个包含大量和标签的复合组件. 它被用来描述编辑内容中的大量数字. 纯 HTML 标记如下:

<div class="o3-editorial-typography-big-number">
    <div class="o3-editorial-typography-big-number__title">£27,5m</div>
    <div class="o3-editorial-typography-big-number__content">
        Cost expected to increase by £13.7m a year.
    </div>
</div>

import {BigNumber} from '@financial-times/o3-editorial-typography/cjs'; // or /esm

<BigNumber title="£27,5m">
    Cost expected to increase by £13.7m a year.
</BigNumber>;

<BigNumber> 道具 :

名单

o3-editorial-typography 支持命令和未命令的清单。 使用类 o3-editorial-typography-list-ordered 或者说 o3-editorial-typography-list-unordered。 。 。 .

列表可能用于不同的上下文,它们继承了大小和家族等字体属性. 因此它需要将字体样式应用到母元素上. 例如,可以用下列方法做到这一点: o3-editorial-typography-body数字 :

<div class="o3-editorial-typography-body">
    <ol class="o3-editorial-typography-list-ordered">
        <li>Lorem ipsum adipiscing elit.</li>
        <li>Sed feugiat turpis at massa tristique.</li>
        <li>Curabitu r accumsan elit luctus.</li>
    </ol>
</div>

import {Body, List} from '@financial-times/o3-editorial-typography/cjs'; // or /esm

<Body>
    <List
        type="ordered"
        listItems={[
            'Lorem ipsum adipiscing elit.',
            'Sed feugiat turpis at massa tristique.',
            'Curabitu r accumsan elit luctus.',
        ]}
    />
</Body>;

<List> 道具 :

主题修改符

所有组件都可以有主题修饰符. 默认,主题是 standard 无需这样做. o3-editorial-typography 还支持 inverse 主题。 添加中 data-o3-theme="inverse" 改为折叠元素,或者在元素本身将文本的颜色改为白色。 反向主题得到所有导出组件的支持. 纯 HTML 标记如下:

<h3 class="o3-editorial-typography-label" data-o3-theme="inverse">Label</h3>

或者如果你使用 JSX 模板,主题可以作为主题道具传递:

import {Heading} from '@financial-times/o3-editorial-typography/cjs';

<Heading type="headline" theme="inverse">
    Headline
</Heading>;

移徙

联系人

如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 提出问题访问 #origami - 支持 或电子邮件 折纸支持。 。 。 .

许可证

本软件由金融时报根据以下规定出版: 麻省理工学院许可证。 。 。 .