=> {
- const allData = pinyin(source, { type: 'all' });
-
- const charBlocks: CharBlock[] = [];
+ const pinyinData = pinyin(source, { type: 'all' });
await new Promise((resolve) => {
setTimeout(resolve, 0);
});
- const measureChineseCharWidth = document.createElement('span');
- measureChineseCharWidth.className = styles.measureChineseCharWidth;
- element.appendChild(measureChineseCharWidth);
+ const container = element.createDiv();
+ container.className = styles.container;
- const measurePinyinWidth = document.createElement('span');
- measurePinyinWidth.className = styles.measurePinyinWidth;
- element.appendChild(measurePinyinWidth);
+ const pinyinLine = container.createDiv();
+ pinyinLine.className = styles.pinyinLine;
- for (const data of allData) {
- measureChineseCharWidth.textContent = data.origin;
- const chineseCharWidth =
- measureChineseCharWidth.getBoundingClientRect().width;
+ const chineseCharLine = container.createDiv();
+ chineseCharLine.className = styles.chineseCharLine;
- measurePinyinWidth.textContent = data.pinyin;
- const pinyinWidth = measurePinyinWidth.getBoundingClientRect().width;
+ for (const pinyinDatum of pinyinData) {
+ const pinyinSpan = pinyinLine.createSpan();
+ pinyinSpan.textContent = pinyinDatum.pinyin;
+ const pinyinWidth = pinyinSpan.getBoundingClientRect().width;
- const charBlock: CharBlock =
+ const chineseCharSpan = chineseCharLine.createSpan();
+ chineseCharSpan.textContent = pinyinDatum.origin;
+ const chineseCharWidth = chineseCharSpan.getBoundingClientRect().width;
+
+ const { pinyinPadding, chineseCharPadding } =
pinyinWidth >= chineseCharWidth
? ({
- chineseChar: {
- text: data.origin,
- horizontalPadding:
- (pinyinWidth - chineseCharWidth) / 2 + gap,
- },
- pinyin: {
- text: data.pinyin,
- horizontalPadding: gap,
- },
+ pinyinPadding: `${gap}px`,
+ chineseCharPadding: `${
+ (pinyinWidth - chineseCharWidth) / 2 + gap
+ }px`,
} as const)
: ({
- chineseChar: {
- text: data.origin,
- horizontalPadding: gap,
- },
- pinyin: {
- text: data.pinyin,
- horizontalPadding:
- (chineseCharWidth - pinyinWidth) / 2 + gap,
- },
+ pinyinPadding: `${
+ (chineseCharWidth - pinyinWidth) / 2 + gap
+ }px`,
+ chineseCharPadding: `${gap}px`,
} as const);
- charBlocks.push(charBlock);
- }
-
- const pinyinLine = (
-
- {charBlocks.map(({ pinyin }) => (
-
- {pinyin.text}
-
- ))}
-
- );
-
- const chineseCharLine = (
-
- {charBlocks.map(({ chineseChar }) => (
-
- {chineseChar.text}
-
- ))}
-
- );
+ pinyinSpan.style.paddingLeft = pinyinPadding;
+ pinyinSpan.style.paddingRight = pinyinPadding;
- const el = (
-
- {pinyinLine}
- {chineseCharLine}
-
- );
-
- element.innerHTML = render(el);
+ chineseCharSpan.style.paddingLeft = chineseCharPadding;
+ chineseCharSpan.style.paddingRight = chineseCharPadding;
+ }
};
export default class MyPlugin extends Plugin {
diff --git a/src/playground.tsx b/src/playground.tsx
deleted file mode 100644
index ec9789e..0000000
--- a/src/playground.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { render } from 'preact-render-to-string';
-import { pinyin } from 'pinyin-pro';
-
-const input = '你先来学校，(然后)我们再一起去找老师。';
-const allData = pinyin(input, { type: 'all' });
-
-const app = document.getElementById('app')!;
-
-type CharBlock = Readonly<{
- pinyin: readonly [string, number];
- chineseChar: readonly [string, number];
-}>;
-
-const charBlocks: CharBlock[] = [];
-
-const gap = 2;
-
-for (const data of allData) {
- const charBlock = document.createElement('span');
- charBlock.style.position = 'absolute';
- charBlock.style.visibility = 'hidden';
- charBlock.textContent = data.origin;
- app.appendChild(charBlock);
-
- const chineseCharWidth = charBlock.getBoundingClientRect().width;
-
- charBlock.textContent = data.pinyin;
- const pinyinWidth = charBlock.getBoundingClientRect().width;
-
- charBlocks.push(
- pinyinWidth >= chineseCharWidth
- ? ({
- pinyin: [data.pinyin, gap],
- chineseChar: [
- data.origin,
- (pinyinWidth - chineseCharWidth) / 2 + gap,
- ],
- } as const)
- : ({
- pinyin: [
- data.pinyin,
- (chineseCharWidth - pinyinWidth) / 2 + gap,
- ],
- chineseChar: [data.origin, gap],
- } as const),
- );
-
- app.removeChild(charBlock);
-}
-
-const output = document.createElement('div');
-output.style.position = 'relative';
-
-output.innerHTML = render(
- <>
-
- {charBlocks.map(({ pinyin }) => (
-
- {pinyin[0]}
-
- ))}
-
-
- {charBlocks.map(({ chineseChar }) => (
-
- {chineseChar[0]}
-
- ))}
-
- ,
-);
-
-app.appendChild(output);
diff --git a/src/style.css.ts b/src/style.css.ts
index 3d88d66..4b16897 100644
--- a/src/style.css.ts
+++ b/src/style.css.ts
@@ -1,16 +1,5 @@
import { style } from '@vanilla-extract/css';
-export const measureChineseCharWidth = style({
- position: 'absolute',
- visibility: 'hidden',
-});
-
-export const measurePinyinWidth = style({
- position: 'absolute',
- visibility: 'hidden',
- fontSize: '0.8rem',
-});
-
export const container = style({
position: 'relative',
});