From fdfce79e87b4c1973c70c9cf63b19427175e6137 Mon Sep 17 00:00:00 2001 From: wangfengming Date: Sun, 7 Jun 2020 12:38:03 +0800 Subject: [PATCH 1/5] :feat: Font for eastAsia --- src/file/paragraph/run/formatting.ts | 2 +- src/file/paragraph/run/run-fonts.ts | 42 +++++++++++++--------- src/file/paragraph/run/run.ts | 18 ++++++---- src/file/styles/defaults/run-properties.ts | 6 ++-- src/file/styles/style-options.ts | 11 ++++-- src/file/styles/style/character-style.ts | 3 +- 6 files changed, 53 insertions(+), 29 deletions(-) diff --git a/src/file/paragraph/run/formatting.ts b/src/file/paragraph/run/formatting.ts index 3055ba44e7..51b14be5cf 100644 --- a/src/file/paragraph/run/formatting.ts +++ b/src/file/paragraph/run/formatting.ts @@ -3,7 +3,7 @@ import { Attributes, XmlComponent } from "file/xml-components"; export { Underline } from "./underline"; export { EmphasisMark } from "./emphasis-mark"; export { SubScript, SuperScript } from "./script"; -export { RunFonts } from "./run-fonts"; +export { RunFonts, IFontAttributesProperties } from "./run-fonts"; export class Bold extends XmlComponent { constructor() { diff --git a/src/file/paragraph/run/run-fonts.ts b/src/file/paragraph/run/run-fonts.ts index 10a441626c..c1eed32613 100644 --- a/src/file/paragraph/run/run-fonts.ts +++ b/src/file/paragraph/run/run-fonts.ts @@ -1,14 +1,14 @@ import { XmlAttributeComponent, XmlComponent } from "file/xml-components"; -interface IRunFontAttributesProperties { - readonly ascii: string; - readonly cs: string; - readonly eastAsia: string; - readonly hAnsi: string; +export interface IFontAttributesProperties { + readonly ascii?: string; + readonly cs?: string; + readonly eastAsia?: string; + readonly hAnsi?: string; readonly hint?: string; } -class RunFontAttributes extends XmlAttributeComponent { +class RunFontAttributes extends XmlAttributeComponent { protected readonly xmlKeys = { ascii: "w:ascii", cs: "w:cs", @@ -19,16 +19,26 @@ class RunFontAttributes extends XmlAttributeComponent Date: Sun, 7 Jun 2020 12:38:31 +0800 Subject: [PATCH 2/5] :test: Font for eastAsia --- src/file/numbering/abstract-numbering.spec.ts | 33 ++++++++++++++- src/file/paragraph/run/run-fonts.spec.ts | 7 ++++ src/file/paragraph/run/run.spec.ts | 26 ++++++++++++ src/file/styles/style/character-style.spec.ts | 42 ++++++++++++++++++- src/file/styles/style/paragraph-style.spec.ts | 32 +++++++++++++- 5 files changed, 137 insertions(+), 3 deletions(-) diff --git a/src/file/numbering/abstract-numbering.spec.ts b/src/file/numbering/abstract-numbering.spec.ts index a2fb61b000..6548a4436d 100644 --- a/src/file/numbering/abstract-numbering.spec.ts +++ b/src/file/numbering/abstract-numbering.spec.ts @@ -417,7 +417,7 @@ describe("AbstractNumbering", () => { }); }); - it("#font", () => { + it("#font by name", () => { const abstractNumbering = new AbstractNumbering(1, [ { level: 0, @@ -447,6 +447,37 @@ describe("AbstractNumbering", () => { }); }); + it("#font for ascii and eastAsia", () => { + const abstractNumbering = new AbstractNumbering(1, [ + { + level: 0, + format: "lowerRoman", + text: "%0.", + style: { + run: { + font: { + ascii: "Times", + eastAsia: "KaiTi", + }, + }, + }, + }, + ]); + const tree = new Formatter().format(abstractNumbering); + expect(tree["w:abstractNum"][2]["w:lvl"]).to.include({ + "w:rPr": [ + { + "w:rFonts": { + _attr: { + "w:ascii": "Times", + "w:eastAsia": "KaiTi", + }, + }, + }, + ], + }); + }); + it("#bold", () => { const abstractNumbering = new AbstractNumbering(1, [ { diff --git a/src/file/paragraph/run/run-fonts.spec.ts b/src/file/paragraph/run/run-fonts.spec.ts index 1eacc8ecc9..a0180eae81 100644 --- a/src/file/paragraph/run/run-fonts.spec.ts +++ b/src/file/paragraph/run/run-fonts.spec.ts @@ -21,5 +21,12 @@ describe("RunFonts", () => { }, }); }); + + it("uses the font attrs for ascii and eastAsia", () => { + const tree = new Formatter().format(new RunFonts({ ascii: "Times", eastAsia: "KaiTi" })); + expect(tree).to.deep.equal({ + "w:rFonts": { _attr: { "w:ascii": "Times", "w:eastAsia": "KaiTi" } }, + }); + }); }); }); diff --git a/src/file/paragraph/run/run.spec.ts b/src/file/paragraph/run/run.spec.ts index 8712622921..32904327d8 100644 --- a/src/file/paragraph/run/run.spec.ts +++ b/src/file/paragraph/run/run.spec.ts @@ -275,6 +275,32 @@ describe("Run", () => { ], }); }); + + it("should set the font for ascii and eastAsia", () => { + const run = new Run({ + font: { + ascii: "Times", + eastAsia: "KaiTi", + }, + }); + const tree = new Formatter().format(run); + expect(tree).to.deep.equal({ + "w:r": [ + { + "w:rPr": [ + { + "w:rFonts": { + _attr: { + "w:ascii": "Times", + "w:eastAsia": "KaiTi", + }, + }, + }, + ], + }, + ], + }); + }); }); describe("#color", () => { diff --git a/src/file/styles/style/character-style.spec.ts b/src/file/styles/style/character-style.spec.ts index c660b152be..64c866a8c8 100644 --- a/src/file/styles/style/character-style.spec.ts +++ b/src/file/styles/style/character-style.spec.ts @@ -202,7 +202,7 @@ describe("CharacterStyle", () => { }); }); - it("should add font", () => { + it("should add font by name", () => { const style = new CharacterStyle({ id: "myStyleId", run: { @@ -241,6 +241,46 @@ describe("CharacterStyle", () => { }); }); + it("should add font for ascii and eastAsia", () => { + const style = new CharacterStyle({ + id: "myStyleId", + run: { + font: { + ascii: "test font ascii", + eastAsia: "test font eastAsia", + }, + }, + }); + const tree = new Formatter().format(style); + expect(tree).to.deep.equal({ + "w:style": [ + { _attr: { "w:type": "character", "w:styleId": "myStyleId" } }, + { + "w:rPr": [ + { + "w:rFonts": { + _attr: { + "w:ascii": "test font ascii", + "w:eastAsia": "test font eastAsia", + }, + }, + }, + ], + }, + { + "w:uiPriority": { + _attr: { + "w:val": 99, + }, + }, + }, + { + "w:unhideWhenUsed": EMPTY_OBJECT, + }, + ], + }); + }); + it("should add character spacing", () => { const style = new CharacterStyle({ id: "myStyleId", diff --git a/src/file/styles/style/paragraph-style.spec.ts b/src/file/styles/style/paragraph-style.spec.ts index 3331dc3513..7d01ef87e7 100644 --- a/src/file/styles/style/paragraph-style.spec.ts +++ b/src/file/styles/style/paragraph-style.spec.ts @@ -484,7 +484,7 @@ describe("ParagraphStyle", () => { }); }); - it("#font", () => { + it("#font by name", () => { const style = new ParagraphStyle({ id: "myStyleId", run: { @@ -513,6 +513,36 @@ describe("ParagraphStyle", () => { }); }); + it("#font for ascii and eastAsia", () => { + const style = new ParagraphStyle({ + id: "myStyleId", + run: { + font: { + ascii: "Times", + eastAsia: "KaiTi", + }, + }, + }); + const tree = new Formatter().format(style); + expect(tree).to.deep.equal({ + "w:style": [ + { _attr: { "w:type": "paragraph", "w:styleId": "myStyleId" } }, + { + "w:rPr": [ + { + "w:rFonts": { + _attr: { + "w:ascii": "Times", + "w:eastAsia": "KaiTi", + }, + }, + }, + ], + }, + ], + }); + }); + it("#bold", () => { const style = new ParagraphStyle({ id: "myStyleId", From 596761d78db497f368bd04ea2f8b77cfc53b441a Mon Sep 17 00:00:00 2001 From: wangfengming Date: Sun, 7 Jun 2020 12:39:17 +0800 Subject: [PATCH 3/5] :doc: doc and demo for "Font for eastAsia" --- demo/53-chinese.ts | 46 +++++++++++++++++++++++++++++++++++ docs/usage/styling-with-js.md | 2 +- 2 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 demo/53-chinese.ts diff --git a/demo/53-chinese.ts b/demo/53-chinese.ts new file mode 100644 index 0000000000..eb9afb39a2 --- /dev/null +++ b/demo/53-chinese.ts @@ -0,0 +1,46 @@ +// Chinese text - Chinese need to use a Chinese font. And ascii Text Need to use a ascii font. +// Different from the `52-japanese.ts`. +// `52-japanese.ts` will set all characters to use Japanese font. +// `53-chinese.ts` will set Chinese characters to use Chinese font, and set ascii characters to use ascii font. + +// Note that if the compute have not install `KaiTi` font, this demo doesn't work. + +// Import from 'docx' rather than '../build' if you install from npm +import * as fs from "fs"; +import { Document, HeadingLevel, Packer, Paragraph } from "../build"; + +const doc = new Document({ + styles: { + paragraphStyles: [ + { + id: "Normal", + name: "Normal", + basedOn: "Normal", + next: "Normal", + quickFormat: true, + run: { + font: { + ascii: "Times", + eastAsia: "KaiTi", + }, + }, + }, + ], + }, +}); + +doc.addSection({ + children: [ + new Paragraph({ + text: "中文和英文 Chinese and English", + heading: HeadingLevel.HEADING_1, + }), + new Paragraph({ + text: "中文和英文 Chinese and English", + }), + ], +}); + +Packer.toBuffer(doc).then((buffer) => { + fs.writeFileSync("My Document.docx", buffer); +}); diff --git a/docs/usage/styling-with-js.md b/docs/usage/styling-with-js.md index c8bbb5c8db..0dafac2904 100644 --- a/docs/usage/styling-with-js.md +++ b/docs/usage/styling-with-js.md @@ -26,7 +26,7 @@ const name = new TextRun({ - `emphasisMark({type="dot"})`: Set the emphasis mark style - `color(color)`: Set the text color, using 6 hex characters for RRGGBB (no leading `#`) - `size(halfPts)`: Set the font size, measured in half-points -- `font(name)`: Set the run's font +- `font(name)` or `font({ascii, cs, eastAsia, hAnsi, hint})`: Set the run's font - `style(name)`: Apply a named run style - `characterSpacing(value)`: Set the character spacing adjustment (in TWIPs) From f11bca728fa28c73b3bef61e9d630080d7496cfe Mon Sep 17 00:00:00 2001 From: wangfengming Date: Sun, 7 Jun 2020 12:46:21 +0800 Subject: [PATCH 4/5] :typo: update comment for the demo --- demo/53-chinese.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/demo/53-chinese.ts b/demo/53-chinese.ts index eb9afb39a2..1bacf888a6 100644 --- a/demo/53-chinese.ts +++ b/demo/53-chinese.ts @@ -1,9 +1,9 @@ -// Chinese text - Chinese need to use a Chinese font. And ascii Text Need to use a ascii font. +// Chinese text - Chinese text need to use a Chinese font. And ascii text need to use a ascii font. // Different from the `52-japanese.ts`. // `52-japanese.ts` will set all characters to use Japanese font. // `53-chinese.ts` will set Chinese characters to use Chinese font, and set ascii characters to use ascii font. -// Note that if the compute have not install `KaiTi` font, this demo doesn't work. +// Note that if the OS have not install `KaiTi` font, this demo doesn't work. // Import from 'docx' rather than '../build' if you install from npm import * as fs from "fs"; From d6fa33035a02130d1c3826547194aeb9c75b8668 Mon Sep 17 00:00:00 2001 From: wangfengming Date: Sun, 7 Jun 2020 14:58:59 +0800 Subject: [PATCH 5/5] :doc: update demo `53-chinese.ts` --- demo/53-chinese.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/demo/53-chinese.ts b/demo/53-chinese.ts index 1bacf888a6..eee6eb9032 100644 --- a/demo/53-chinese.ts +++ b/demo/53-chinese.ts @@ -7,7 +7,7 @@ // Import from 'docx' rather than '../build' if you install from npm import * as fs from "fs"; -import { Document, HeadingLevel, Packer, Paragraph } from "../build"; +import { Document, HeadingLevel, Packer, Paragraph, TextRun } from "../build"; const doc = new Document({ styles: { @@ -38,6 +38,15 @@ doc.addSection({ new Paragraph({ text: "中文和英文 Chinese and English", }), + new Paragraph({ + children: [ + new TextRun({ + text: "中文和英文 Chinese and English", + font: { eastAsia: "SimSun" }, // set eastAsia to "SimSun". + // The ascii characters will use the default font ("Times") specified in paragraphStyles + }), + ], + }), ], });