Skip to content

Commit e69b04d

Browse files
RobertJGabrielRobertJGabriel
committed
Updated CSS to fix bolding issue/weight issue.
1 parent 267455a commit e69b04d

2 files changed

Lines changed: 125 additions & 46 deletions

File tree

‎app/assets/styles/core/opendyslexic.css‎

Lines changed: 124 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,167 @@
1+
/*─────────────────────────────────────────────────
2+
1) FONT FACE DECLARATIONS
3+
─────────────────────────────────────────────────*/
14
@font-face {
25
font-family: 'OpenDyslexic';
3-
src: url('{{$browser_extension_protocol}}assets/fonts/opendyslexic/regular.otf')
4-
format('opentype');
6+
src:
7+
local('OpenDyslexic Regular'),
8+
local('OpenDyslexic'),
9+
url('{{$browser_extension_protocol}}assets/fonts/opendyslexic/regular.otf')
10+
format('opentype');
11+
font-weight: 400;
512
font-style: normal;
6-
font-weight: normal;
13+
font-display: swap;
14+
/* unicode-range: U+000-5FF; */
715
}
816

917
@font-face {
10-
font-family: 'OpenDyslexic Italic';
11-
src: url('{{$browser_extension_protocol}}assets/fonts/opendyslexic/italic.otf')
12-
format('opentype');
13-
font-style: normal;
14-
font-weight: normal;
18+
font-family: 'OpenDyslexic';
19+
src:
20+
local('OpenDyslexic Italic'),
21+
url('{{$browser_extension_protocol}}assets/fonts/opendyslexic/italic.otf')
22+
format('opentype');
23+
font-weight: 400;
24+
font-style: italic;
25+
font-display: swap;
1526
}
1627

1728
@font-face {
18-
font-family: 'OpenDyslexic Bold';
19-
src: url('{{$browser_extension_protocol}}assets/fonts/opendyslexic/bold.otf')
20-
format('opentype');
29+
font-family: 'OpenDyslexic';
30+
src:
31+
local('OpenDyslexic Bold'),
32+
url('{{$browser_extension_protocol}}assets/fonts/opendyslexic/bold.otf')
33+
format('opentype');
34+
font-weight: 700;
2135
font-style: normal;
22-
font-weight: normal;
36+
font-display: swap;
2337
}
2438

2539
@font-face {
26-
font-family: 'OpenDyslexic Bold Italic';
27-
src: url('{{$browser_extension_protocol}}assets/fonts/opendyslexic/bold-italic.otf')
28-
format('opentype');
29-
font-style: normal;
30-
font-weight: normal;
40+
font-family: 'OpenDyslexic';
41+
src:
42+
local('OpenDyslexic Bold Italic'),
43+
url('{{$browser_extension_protocol}}assets/fonts/opendyslexic/bold-italic.otf')
44+
format('opentype');
45+
font-weight: 700;
46+
font-style: italic;
47+
font-display: swap;
3148
}
3249

33-
@font-face {
34-
font-family: 'opendyslexicmono';
35-
src: url('{{$browser_extension_protocol}}assets/fonts/opendyslexic/regular.otf')
36-
format('opentype');
50+
/*─────────────────────────────────────────────────
51+
2) ROOT VARIABLES + SMOOTHING
52+
─────────────────────────────────────────────────*/
53+
:root {
54+
--opendyslexic-family: 'OpenDyslexic', Arial, sans-serif;
3755
}
3856

39-
:root {
40-
--opendyslexic-chrome-regular: 'OpenDyslexic';
41-
--opendyslexic-chrome-italic: 'OpenDyslexic Italic';
42-
--opendyslexic-chrome-bold: 'OpenDyslexic Bold';
43-
--opendyslexic-chrome-bold-italic: 'OpenDyslexic Bold Italic';
44-
--opendyslexic-chrome-mono: 'OpenDyslexic';
57+
body {
58+
-webkit-font-smoothing: antialiased;
59+
-moz-osx-font-smoothing: grayscale;
4560
}
4661

47-
.helperbird-font-opendyslexic-regular *:not([class*="icon"]):not([class*="material"]):not([class*="symbols"]):not([class*="font"]) {
48-
font-family: var(--opendyslexic-chrome-regular);
49-
font-weight: normal;
62+
/*─────────────────────────────────────────────────
63+
3) YOUR HELPERBIRD CLASSES
64+
─────────────────────────────────────────────────*/
65+
/* regular */
66+
.helperbird-font-opendyslexic-regular
67+
*:not([class*='icon']):not([class*='material'])
68+
:not([class*='symbols']):not([class*='font']) {
69+
font-family: var(--opendyslexic-family);
70+
font-weight: 400;
5071
font-style: normal;
51-
line-height: 150%;
72+
line-height: 1.5;
5273
}
5374

54-
.helperbird-font-opendyslexic-italic *:not([class*="icon"]):not([class*="material"]):not([class*="symbols"]):not([class*="font"]) {
55-
font-family: var(--opendyslexic-chrome-italic);
75+
/* italic */
76+
.helperbird-font-opendyslexic-italic
77+
*:not([class*='icon']):not([class*='material'])
78+
:not([class*='symbols']):not([class*='font']) {
79+
font-family: var(--opendyslexic-family);
80+
font-weight: 400;
5681
font-style: italic;
57-
line-height: 150%;
82+
line-height: 1.5;
5883
}
5984

60-
.helperbird-font-opendyslexic-bold *:not([class*="icon"]):not([class*="material"]):not([class*="symbols"]):not([class*="font"]) {
61-
font-family: var(--opendyslexic-chrome-bold);
62-
font-weight: bold;
63-
line-height: 150%;
85+
/* bold */
86+
.helperbird-font-opendyslexic-bold
87+
*:not([class*='icon']):not([class*='material'])
88+
:not([class*='symbols']):not([class*='font']) {
89+
font-family: var(--opendyslexic-family);
90+
font-weight: 700;
91+
font-style: normal;
92+
line-height: 1.5;
6493
}
6594

66-
.helperbird-font-opendyslexic-bold-italic *:not([class*="icon"]):not([class*="material"]):not([class*="symbols"]):not([class*="font"]) {
67-
font-family: var(--opendyslexic-chrome-bold);
68-
font-weight: bold;
69-
line-height: 150%;
95+
/* bold-italic */
96+
.helperbird-font-opendyslexic-bold-italic
97+
*:not([class*='icon']):not([class*='material'])
98+
:not([class*='symbols']):not([class*='font']) {
99+
font-family: var(--opendyslexic-family);
100+
font-weight: 700;
101+
font-style: italic;
102+
line-height: 1.5;
70103
}
71104

105+
/*─────────────────────────────────────────────────
106+
4) ZEBRA STRIPES & HOVER EFFECTS
107+
─────────────────────────────────────────────────*/
72108
p.helperbird-font-opendyslexic-regular:nth-child(even),
73109
p.helperbird-font-opendyslexic-italic:nth-child(even),
74110
p.helperbird-font-opendyslexic-bold:nth-child(even),
111+
p.helperbird-font-opendyslexic-bold-italic:nth-child(even),
75112
li.helperbird-font-opendyslexic-regular:nth-child(even),
76113
li.helperbird-font-opendyslexic-italic:nth-child(even),
77-
li.helperbird-font-opendyslexic-bold:nth-child(even) {
78-
opacity: rgba(0, 0, 0, 0.03);
114+
li.helperbird-font-opendyslexic-bold:nth-child(even),
115+
li.helperbird-font-opendyslexic-bold-italic:nth-child(even) {
116+
opacity: 0.03;
79117
}
80118

81119
p.helperbird-font-opendyslexic-regular:hover,
82120
p.helperbird-font-opendyslexic-italic:hover,
83121
p.helperbird-font-opendyslexic-bold:hover,
122+
p.helperbird-font-opendyslexic-bold-italic:hover,
84123
li.helperbird-font-opendyslexic-regular:hover,
85124
li.helperbird-font-opendyslexic-italic:hover,
86-
li.helperbird-font-opendyslexic-bold:hover {
125+
li.helperbird-font-opendyslexic-bold:hover,
126+
li.helperbird-font-opendyslexic-bold-italic:hover {
87127
background-color: rgba(0, 0, 0, 0.09) !important;
88128
}
129+
130+
/* force everything back to bold inside <b>/ <strong> */
131+
.helperbird-font-opendyslexic-regular b,
132+
.helperbird-font-opendyslexic-regular strong {
133+
font-family: var(--opendyslexic-family) !important; /* pick up your bold face */
134+
font-weight: bolder !important; /* or simply “bolder” */
135+
}
136+
137+
/* ─────────────────────────────────────────────────
138+
Base Bold Context (all text = 700)
139+
───────────────────────────────────────────────── */
140+
.helperbird-font-opendyslexic-bold *:not([class*="icon"]):not([class*="material"])
141+
:not([class*="symbols"]):not([class*="font"]) {
142+
font-weight: 700;
143+
}
144+
145+
/* ─────────────────────────────────────────────────
146+
Now: Make <b> & <strong> even bolder in that context
147+
───────────────────────────────────────────────── */
148+
.helperbird-font-opendyslexic-bold b,
149+
.helperbird-font-opendyslexic-bold strong {
150+
/* if your font supports 900, awesome; otherwise UA will fake it */
151+
font-weight: bolder !important;
152+
}
153+
154+
/* ─────────────────────────────────────────────────
155+
And for Bold‐Italic mode:
156+
───────────────────────────────────────────────── */
157+
.helperbird-font-opendyslexic-bold-italic *:not([class*="icon"]):not([class*="material"])
158+
:not([class*="symbols"]):not([class*="font"]) {
159+
font-weight: 700;
160+
font-style: italic;
161+
}
162+
163+
.helperbird-font-opendyslexic-bold-italic b,
164+
.helperbird-font-opendyslexic-bold-italic strong {
165+
font-weight: bolder !important;
166+
font-style: italic;
167+
}

‎config/chrome-manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "__MSG_appName__",
3-
"version": "2025.1.17",
3+
"version": "2025.5.17",
44
"manifest_version": 3,
55
"description": "__MSG_appDescription__",
66
"homepage_url": "https://opendyslexic.org",

0 commit comments

Comments
 (0)