[pmg-devel] [PATCH pmg-gui] objects: use font-weight for bold text

[pmg-devel] [PATCH pmg-gui] objects: use font-weight for bold text

[Dominik Csapak]

mdn[0] recommends using `font-weight: bold;` for making the text actually bold
While it has the same effect often, it depends on the font and browser
if the font is rendered bold in a <b> tag.

0: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 js/ObjectGroup.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/ObjectGroup.js b/js/ObjectGroup.js
index d72d47c..8c72dd2 100644
--- a/js/ObjectGroup.js
+++ b/js/ObjectGroup.js
@@ -43,7 +43,7 @@ Ext.define('PMG.ObjectGroup', {
 	    me.down('#modeBox').setHidden(true);
 	    me.down('#whatWarning').setHidden(true);
 	} else {
-	    let html = '<b>' + Ext.String.htmlEncode(me.ogdata.name) + '</b>';
+	    let html = '<b style="font-weight: bold;">' + Ext.String.htmlEncode(me.ogdata.name) + '</b>';
 	    html += "<br><br>";
 	    html += Ext.String.htmlEncode(Ext.String.trim(me.ogdata.info));
 
@@ -245,7 +245,7 @@ Ext.define('PMG.ObjectGroup', {
 		    items: [
 			{
 			    xtype: 'box',
-			    html: `<b>${gettext("Match if")}</b>`,
+			    html: `<b style="font-weight: bold;">${gettext("Match if")}</b>`,
 			},
 			{
 			    xtype: 'pmgMatchModeSelector',
-- 
2.30.2

[pmg-devel] applied: [PATCH pmg-gui] objects: use font-weight for bold text

[Thomas Lamprecht]

Am 22/02/2024 um 15:29 schrieb Dominik Csapak:
> mdn[0] recommends using `font-weight: bold;` for making the text actually bold
> While it has the same effect often, it depends on the font and browser
> if the font is rendered bold in a <b> tag.
> 
> 0: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b
> 
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
>  js/ObjectGroup.js | 4 ++--
>  1 file changed, 2 insertions(+), 2 deletions(-)
> 
>

applied, thanks!

FWIW, one general option might also be to add CSS setting the font-weight to
the <b> tag in general, but not sure what would break with that..

Re: [pmg-devel] applied: [PATCH pmg-gui] objects: use font-weight for bold text

[Stefan Sterz]

On Thu Feb 22, 2024 at 3:51 PM CET, Thomas Lamprecht wrote:
> Am 22/02/2024 um 15:29 schrieb Dominik Csapak:
> > mdn[0] recommends using `font-weight: bold;` for making the text actually bold
> > While it has the same effect often, it depends on the font and browser
> > if the font is rendered bold in a <b> tag.
> >
> > 0: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b
> >
> > Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> > ---
> >  js/ObjectGroup.js | 4 ++--
> >  1 file changed, 2 insertions(+), 2 deletions(-)
> >
> >
>
> applied, thanks!
>
> FWIW, one general option might also be to add CSS setting the font-weight to
> the <b> tag in general, but not sure what would break with that..
>

just to add my two cents to this: generally it would be nice to avoid
inline css imo. maybe we could also add a css class to the element that
has some semantic meaning and use that to style the element. as is
recommendet by mdn:

> It is a good practice to use the class attribute on the <b> element in
> order to convey additional semantic information as needed (for example
> <b class="lead"> for the first sentence in a paragraph).
>
> - [0]

alternatively, we could use the more semanticaly meaninful `<strong>`[1]
element and define that as bold (which is the default, but the
recommendation is to make that explicit there too). this would imply a
"strong importance".

[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

>
> _______________________________________________
> pmg-devel mailing list
> pmg-devel@lists.proxmox.com
> https://lists.proxmox.com/cgi-bin/mailman/listinfo/pmg-devel