From a6027b15efc7dcd6fbaa00247b305ac2f9c9c3ee Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Thu, 28 Oct 2021 17:50:40 +0200
Subject: [PATCH] Improve 'strong' text style to be less bold and have letter
spacing
This improves bold text readability.
This has to be done in the actual element, in the TextEditor and on the
properties panel.
---
projects/common/element-components/text.component.ts | 9 +++++----
.../src/app/text-editor/rich-text-editor.component.css | 5 +++++
.../properties-panel/element-properties.component.css | 5 +++++
3 files changed, 15 insertions(+), 4 deletions(-)
diff --git a/projects/common/element-components/text.component.ts b/projects/common/element-components/text.component.ts
index 5e47a4d27..2265a2972 100644
--- a/projects/common/element-components/text.component.ts
+++ b/projects/common/element-components/text.component.ts
@@ -28,21 +28,22 @@ import { TextElement } from '../models/text-element';
<mat-icon>clear</mat-icon>
</button>
</div>
- <div [style.background-color]="elementModel.backgroundColor"
+ <div #container class="text-container"
+ [style.background-color]="elementModel.backgroundColor"
[style.color]="elementModel.fontColor"
[style.font-family]="elementModel.font"
[style.line-height.%]="elementModel.lineHeight"
[style.font-weight]="elementModel.bold ? 'bold' : ''"
[style.font-style]="elementModel.italic ? 'italic' : ''"
[style.text-decoration]="elementModel.underline ? 'underline' : ''"
- [innerHTML]="elementModel.text | safeResourceHTML"
- #container>
+ [innerHTML]="elementModel.text | safeResourceHTML">
</div>
</div>
`,
styles: [
'.marking-bar{position: sticky; top: 0; margin-bottom: 15px}',
- '.marking-button{color: #333}'
+ '.marking-button{color: #333}',
+ '::ng-deep .text-container p strong {letter-spacing: 0.04em; font-weight: 600}'
]
})
export class TextComponent extends ElementComponent {
diff --git a/projects/editor/src/app/text-editor/rich-text-editor.component.css b/projects/editor/src/app/text-editor/rich-text-editor.component.css
index 7f45b364d..ee5ad876c 100644
--- a/projects/editor/src/app/text-editor/rich-text-editor.component.css
+++ b/projects/editor/src/app/text-editor/rich-text-editor.component.css
@@ -27,3 +27,8 @@ app-rich-text-editor .editor-control-line {
height: 50px;
margin-bottom: 5px;
}
+
+.ProseMirror p strong {
+ letter-spacing: 0.04em !important;
+ font-weight: 600 !important;
+}
diff --git a/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.css b/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.css
index 800b66bb6..8109723df 100644
--- a/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.css
+++ b/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.css
@@ -37,3 +37,8 @@ mat-divider {
border-top-width: 9px;
border-top-style: dotted;
}
+
+::ng-deep app-element-properties p strong {
+ letter-spacing: 0.04em !important;
+ font-weight: 600 !important;
+}
--
GitLab