Skip to content

Commit a3a4b80

Browse files
MuhammadAbdullaahMuhammadAbdullaah
authored
Fix font preview handling and font-face consistency (#495)
* Fix font preview handling and font-face consistency * rename v4-tajweed-no-color to v4 * rename v4-tajweed-no-color to v4
1 parent c6e6849 commit a3a4b80

File tree

2 files changed

+147
-27
lines changed

2 files changed

+147
-27
lines changed

‎app/assets/stylesheets/shared/font_faces.scss‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,76 @@ $asset-version: "3.3";
2525
font-display: swap;
2626
}
2727

28+
@font-face {
29+
font-family: "qpc-v4-bismillah-color";
30+
src: url("#{$font-cdn}/quran_fonts/bismillah_color/QCF_Bismillah_COLOR-Regular.woff2?v=#{$asset-version}") format("woff2"),
31+
url("#{$font-cdn}/quran_fonts/bismillah_color/QCF_Bismillah_COLOR-Regular.woff?v=#{$asset-version}") format("woff"),
32+
url("#{$font-cdn}/quran_fonts/bismillah_color/QCF_Bismillah_COLOR-Regular.ttf?v=#{$asset-version}") format("truetype");
33+
font-weight: normal;
34+
font-style: normal;
35+
font-display: swap;
36+
}
37+
38+
@font-face {
39+
font-family: 'arabic-sign-font';
40+
src: url("#{$font-cdn}/arabic-sign/arabic_sign_font.woff2?v=#{$asset-version}") format("woff2"),
41+
url("#{$font-cdn}/arabic-sign/arabic_sign_font.woff?v=#{$asset-version}") format("woff"),
42+
url("#{$font-cdn}/arabic-sign/arabic_sign_font.ttf?v=#{$asset-version}") format("truetype");
43+
font-weight: normal;
44+
font-style: normal;
45+
font-display: swap;
46+
}
47+
48+
@font-face {
49+
font-family: 'v4-tajweed-ot_svg_dark';
50+
src: url("https://static-cdn.tarteel.ai/qul/fonts/quran_fonts/v4-tajweed/ot_svg_dark/ttf/p1.ttf") format("truetype"),
51+
url("https://static-cdn.tarteel.ai/qul/fonts/quran_fonts/v4-tajweed/ot_svg_dark/woff/p1.woff") format("woff"),
52+
url("https://static-cdn.tarteel.ai/qul/fonts/quran_fonts/v4-tajweed/ot_svg_dark/woff2/p1.woff2") format("woff2");
53+
font-weight: normal;
54+
font-style: normal;
55+
font-display: swap;
56+
}
57+
58+
@font-face {
59+
font-family: 'v4-tajweed-ot_svg_light';
60+
src: url("https://static-cdn.tarteel.ai/qul/fonts/quran_fonts/v4-tajweed/ot_svg_light/ttf/p1.ttf") format("truetype"),
61+
url("https://static-cdn.tarteel.ai/qul/fonts/quran_fonts/v4-tajweed/ot_svg_light/woff/p1.woff") format("woff"),
62+
url("https://static-cdn.tarteel.ai/qul/fonts/quran_fonts/v4-tajweed/ot_svg_light/woff2/p1.woff2") format("woff2");
63+
font-weight: normal;
64+
font-style: normal;
65+
font-display: swap;
66+
}
67+
68+
@font-face {
69+
font-family: 'v4-tajweed-ot_svg_sepia';
70+
src: url("https://static-cdn.tarteel.ai/qul/fonts/quran_fonts/v4-tajweed/ot_svg_sepia/ttf/p1.ttf") format("truetype"),
71+
url("https://static-cdn.tarteel.ai/qul/fonts/quran_fonts/v4-tajweed/ot_svg_sepia/woff/p1.woff") format("woff"),
72+
url("https://static-cdn.tarteel.ai/qul/fonts/quran_fonts/v4-tajweed/ot_svg_sepia/woff2/p1.woff2") format("woff2");
73+
font-weight: normal;
74+
font-style: normal;
75+
font-display: swap;
76+
}
77+
78+
@font-face {
79+
font-family: 'v4-tajweed-dark_mood';
80+
src: url("https://static-cdn.tarteel.ai/qul/fonts/quran_fonts/v4-tajweed/dark_mood/ttf/p1.ttf") format("truetype"),
81+
url("https://static-cdn.tarteel.ai/qul/fonts/quran_fonts/v4-tajweed/dark_mood/woff/p1.woff") format("woff"),
82+
url("https://static-cdn.tarteel.ai/qul/fonts/quran_fonts/v4-tajweed/dark_mood/woff2/p1.woff2") format("woff2");
83+
font-weight: normal;
84+
font-style: normal;
85+
font-display: swap;
86+
}
87+
88+
@font-face {
89+
font-family: 'v4';
90+
src: url("https://static-cdn.tarteel.ai/qul/fonts/quran_fonts/v4/woff2/p1.woff2") format("woff2"),
91+
url("https://static-cdn.tarteel.ai/qul/fonts/quran_fonts/v4/woff/p1.woff") format("woff"),
92+
url("https://static-cdn.tarteel.ai/qul/fonts/quran_fonts/v4/ttf/p1.ttf") format("truetype");
93+
font-weight: normal;
94+
font-style: normal;
95+
font-display: swap;
96+
}
97+
2898
@font-face {
2999
font-family: quran-icon;
30100
src: url("#{$font-cdn}/common/quran-common.woff2?v=#{$asset-version}"),
@@ -131,6 +201,49 @@ $asset-version: "3.3";
131201
font-size: xxx-large;
132202
}
133203

204+
.qpc-v4-bismillah-color {
205+
font-family: "qpc-v4-bismillah-color" !important;
206+
direction: rtl;
207+
font-size: 30px;
208+
}
209+
210+
.arabic-sign-font {
211+
font-family: 'arabic-sign-font' !important;
212+
direction: rtl;
213+
font-size: 30px;
214+
}
215+
216+
.font-v4-tajweed-ot-svg-dark {
217+
font-family: 'v4-tajweed-ot_svg_dark' !important;
218+
direction: rtl;
219+
font-size: 30px;
220+
}
221+
222+
.font-v4-tajweed-ot-svg-light {
223+
font-family: 'v4-tajweed-ot_svg_light' !important;
224+
direction: rtl;
225+
font-size: 30px;
226+
}
227+
228+
.font-v4-tajweed-ot-svg-sepia {
229+
font-family: 'v4-tajweed-ot_svg_sepia' !important;
230+
direction: rtl;
231+
font-size: 30px;
232+
}
233+
234+
.font-v4-tajweed-dark-mood {
235+
font-family: 'v4-tajweed-dark_mood' !important;
236+
direction: rtl;
237+
font-size: 30px;
238+
}
239+
240+
.v4 {
241+
font-family: 'v4' !important;
242+
direction: rtl;
243+
font-size: 30px;
244+
}
245+
246+
134247
.pdms-saleem{
135248
font-family: pdms-saleem;
136249
font-size: 30px;

‎app/views/resources/previews/_font.html.erb‎

Lines changed: 34 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,43 @@
22
resource_content = resource.resource_content
33
sample_text = resource_content.meta_value('text')
44
font_face = resource_content.meta_value('font-face')
5-
5+
66
font_base_path = resource_content.meta_value('ttf')
77
font_format = 'ttf'
88
font_extension = '.ttf'
9-
9+
1010
unless font_base_path.present?
1111
font_base_path = resource_content.meta_value('woff2')
1212
font_format = 'woff2'
1313
font_extension = '.woff2'
1414
end
15-
15+
1616
unless font_base_path.present?
1717
font_base_path = resource_content.meta_value('woff')
1818
font_format = 'woff'
1919
font_extension = '.woff'
2020
end
21-
21+
2222
unless font_base_path.present?
2323
font_base_path = resource_content.meta_value('otf')
2424
font_format = 'otf'
2525
font_extension = '.otf'
2626
end
2727

28-
ligatures = resource_content.meta_value('ligatures')
28+
preview_pattern = resource_content.meta_value('preview-pattern') ||
29+
resource_content.meta_value('preview_pattern')
30+
31+
page_key = (params[:page].presence || 'p1').to_s
2932

30-
if ligatures.present?
31-
ligatures = Oj.load(ligatures)
33+
if preview_pattern.present?
34+
preview_base = preview_pattern.sub(/p\d+$/, page_key)
35+
font_url = "https://static-cdn.tarteel.ai/qul/fonts/#{preview_base}#{font_extension}"
36+
else
37+
font_url = "https://static-cdn.tarteel.ai/qul/fonts/#{font_base_path}#{font_extension}"
3238
end
3339

34-
font_url = "https://static-cdn.tarteel.ai/qul/fonts/#{font_base_path}#{font_extension}"
40+
ligatures = resource_content.meta_value('ligatures')
41+
ligatures = Oj.load(ligatures) if ligatures.present?
3542
%>
3643

3744
<link rel="preload" href="<%= font_url %>" as="fetch" crossorigin="anonymous">
@@ -78,7 +85,7 @@
7885
</li>
7986
</ul>
8087

81-
<div class="tab-content tw-p-2 tw-mt-3" id="font-docs-tab-content"
88+
<div class="tab-content tw-p-2 tw-mt-3" id="font-docs-tab-content"
8289
data-controller="font-preview"
8390
data-font-preview-font-url-value="<%= font_url %>"
8491
data-font-preview-font-format-value="<%= font_format %>"
@@ -123,12 +130,12 @@
123130
<li>
124131
<strong>Define a <code>@font-face</code> Rule in Your CSS</strong>
125132
<pre class="tw-bg-gray-100 tw-rounded tw-p-4 tw-overflow-auto tw-text-sm"><code>
126-
@font-face {
133+
@font-face {
127134
font-family: '<%= font_face %>';
128135
src: url('<%= font_url %>') format('<%= font_format == 'woff2' ? 'woff2' : font_format == 'woff' ? 'woff' : font_format == 'otf' ? 'opentype' : 'truetype' %>');
129136
font-display: swap;
130137
}
131-
</code></pre>
138+
</code></pre>
132139
</li>
133140

134141
<li>
@@ -139,10 +146,10 @@
139146
</ul>
140147
<pre class="bg-gray-100 tw-p-4 tw-rounded text-sm overflow-auto tw-mb-4">
141148
<code><code>
142-
&lt;div style="font-family: '<%= font_face %>';"&gt;
149+
&lt;div style="font-family: '<%= font_face %>';"&gt;
143150
<%= sample_text %>
144151
&lt;/div&gt;
145-
</code></code>
152+
</code></code>
146153
</pre>
147154

148155
<ul class="list-disc list-inside tw-mb-4">
@@ -210,19 +217,19 @@
210217
</thead>
211218

212219
<tbody data-font-preview-target="ligaturesTable">
213-
<% i = 0 %>
214-
<% ligatures.each do |key, val| %>
215-
<tr>
216-
<td><%= i+=1 %></td>
217-
<td><%= val %></td>
218-
<td><%= key %></td>
219-
<td>
220-
<div class="ligature-preview">
221-
<%= val %>
222-
</div>
223-
</td>
224-
</tr>
225-
<% end %>
220+
<% i = 0 %>
221+
<% ligatures.each do |key, val| %>
222+
<tr>
223+
<td><%= i+=1 %></td>
224+
<td><%= val %></td>
225+
<td><%= key %></td>
226+
<td>
227+
<div class="ligature-preview">
228+
<%= val %>
229+
</div>
230+
</td>
231+
</tr>
232+
<% end %>
226233
</tbody>
227234
</table>
228235
</div>
@@ -264,4 +271,4 @@
264271
}
265272
</style>
266273

267-
</div>
274+
</div>

0 commit comments

Comments
 (0)