diff --git a/client/src/components/ExportModal.vue b/client/src/components/ExportModal.vue index 8191f70..8878146 100644 --- a/client/src/components/ExportModal.vue +++ b/client/src/components/ExportModal.vue @@ -3,6 +3,7 @@ {{ $t("buttons.exportsvg") }}
(); -const { cellSize, textSize, textFont, defSize, defFont } = useSvgSizes(props); +const { cellSize, textSize, textFont, defSize, defSizePx, defFont } = useSvgSizes(props); const transform = computed(() => useTransform(props, props.cell)); function onChange(evt: Event) { const { x, y } = props.cell; @@ -288,9 +288,9 @@ textarea:focus-visible { color: #777; } .definition { - line-height: v-bind(defSize); - font-size: v-bind(defSize); font: v-bind(defFont); + line-height: v-bind(defSizePx); + text-wrap: nowrap; background: #aaa; } diff --git a/client/src/components/svg-renderer/utils.ts b/client/src/components/svg-renderer/utils.ts index 6157710..1c1636c 100644 --- a/client/src/components/svg-renderer/utils.ts +++ b/client/src/components/svg-renderer/utils.ts @@ -17,14 +17,15 @@ export function useSvgSizes(props: Props) { const cellSizeC = computed(() => cellSize(props)); const textSize = computed(() => props.style.grid.cellSize * (props.zoom || 1)); const textFont = computed(() => `${textSize.value}px roboto`); - const defSize = computed(() => props.style.definition.size * (props.zoom || 1)); - const defFont = computed(() => `${defSize.value}px ${props.style.definition.font}`); + const defSize = computed(() => props.style.grid.cellSize / 4 * props.style.definition.size * (props.zoom || 1)); + const defFont = computed(() => `${defSize.value}px ${props.style.definition.family}`); return { cellSize: cellSizeC, textSize, textFont, defSize, + defSizePx: `${Math.floor(defSize.value)}px`, defFont, }; } diff --git a/client/src/views/print/Book.vue b/client/src/views/print/Book.vue index cb02d1e..3e518e3 100644 --- a/client/src/views/print/Book.vue +++ b/client/src/views/print/Book.vue @@ -9,7 +9,7 @@