From 87b05cf224659da1df8eb35469cfbb0c6ef6b64a Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Mon, 23 Sep 2019 13:16:10 +0000 Subject: [PATCH] [REF] website, *: improve use of unicode support font * web, theme_bootswatch Improvement of https://github.com/odoo/odoo/commit/02a321cffb2da60a86b960e75c445e37094567b4 - Clarify the name of the support font (to distinguish it from standard and google fonts and avoid confusion with Noto Sans and Noto Serif). - Make sure the support font is added and can be added for all font definitions in odoo scss files thanks to a scss function. Could be backported in 12.0 if judged necessary. Part of https://github.com/odoo/odoo/pull/37293 --- .../lib/bootswatch/cyborg/_variables.scss | 2 +- .../static/src/scss/bootstrap_overridden.scss | 2 +- .../src/scss/bootstrap_overridden_report.scss | 4 ++-- addons/web/static/src/scss/fonts.scss | 8 +++---- addons/web/static/src/scss/utils.scss | 23 +++++++++++++++++++ .../static/src/scss/primary_variables.scss | 2 +- .../static/src/scss/secondary_variables.scss | 7 ++++++ 7 files changed, 39 insertions(+), 9 deletions(-) diff --git a/addons/theme_bootswatch/static/lib/bootswatch/cyborg/_variables.scss b/addons/theme_bootswatch/static/lib/bootswatch/cyborg/_variables.scss index dc354a087ac..f3c820ce00d 100644 --- a/addons/theme_bootswatch/static/lib/bootswatch/cyborg/_variables.scss +++ b/addons/theme_bootswatch/static/lib/bootswatch/cyborg/_variables.scss @@ -45,7 +45,7 @@ $body-color: $gray-500 !default; // Fonts -$font-family-sans-serif: "Roboto", "Noto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; +$font-family-sans-serif: o-add-unicode-support-font(("Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif), 2) !default; $font-size-base: .875rem !default; diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss index dc1c2bab30c..2bfbc0ea266 100644 --- a/addons/web/static/src/scss/bootstrap_overridden.scss +++ b/addons/web/static/src/scss/bootstrap_overridden.scss @@ -61,7 +61,7 @@ $component-active-bg: $gray-200 !default; // // Font, line-height, and color for body text, headings, and more. -$font-family-sans-serif: "Noto", "Lucida Grande", Helvetica, Verdana, Arial, sans-serif !default; +$font-family-sans-serif: o-add-unicode-support-font(("Lucida Grande", Helvetica, Verdana, Arial, sans-serif), 1) !default; $font-size-base: $o-font-size-base !default; $line-height-base: $o-line-height-base !default; diff --git a/addons/web/static/src/scss/bootstrap_overridden_report.scss b/addons/web/static/src/scss/bootstrap_overridden_report.scss index a6e1cd23b32..33af8de1637 100644 --- a/addons/web/static/src/scss/bootstrap_overridden_report.scss +++ b/addons/web/static/src/scss/bootstrap_overridden_report.scss @@ -1,2 +1,2 @@ -// remove Noto Color Emoji -$font-family-sans-serif: "Noto", "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; +// remove Emoji fonts +$font-family-sans-serif: o-add-unicode-support-font(("Lucida Grande", Helvetica, Verdana, Arial, sans-serif), 1); diff --git a/addons/web/static/src/scss/fonts.scss b/addons/web/static/src/scss/fonts.scss index d1387316e68..26996d89c4c 100644 --- a/addons/web/static/src/scss/fonts.scss +++ b/addons/web/static/src/scss/fonts.scss @@ -6,7 +6,7 @@ $lato-font-path: '../fonts/lato'; @mixin lato-font($type, $weight, $style) { // Cyrillic: U+0400-04FF, U+0500-052F @font-face { - font-family: 'Noto'; + font-family: 'Odoo Unicode Support Noto'; src: url('https://fonts.odoocdn.com/fonts/noto/NotoSans-#{$type}.woff2') format('woff2'), url('https://fonts.odoocdn.com/fonts/noto/NotoSans-#{$type}.woff') format('woff'), url('https://fonts.odoocdn.com/fonts/noto/NotoSans-#{$type}.ttf') format('truetype'); @@ -16,7 +16,7 @@ $lato-font-path: '../fonts/lato'; } // Hebrew: U+0590-05FF, U+FB1D-FB4F @font-face { - font-family: 'Noto'; + font-family: 'Odoo Unicode Support Noto'; src: url('https://fonts.odoocdn.com/fonts/noto/NotoSansHebrew-#{$type}.woff2') format('woff2'), url('https://fonts.odoocdn.com/fonts/noto/NotoSansHebrew-#{$type}.woff') format('woff'), url('https://fonts.odoocdn.com/fonts/noto/NotoSansHebrew-#{$type}.ttf') format('truetype'); @@ -26,7 +26,7 @@ $lato-font-path: '../fonts/lato'; } // Arabic: U+0600-06FF, U+0750-077F @font-face { - font-family: 'Noto'; + font-family: 'Odoo Unicode Support Noto'; src: url('https://fonts.odoocdn.com/fonts/noto/NotoSansArabic-#{$type}.woff2') format('woff2'), url('https://fonts.odoocdn.com/fonts/noto/NotoSansArabic-#{$type}.woff') format('woff'), url('https://fonts.odoocdn.com/fonts/noto/NotoSansArabic-#{$type}.ttf') format('truetype'); @@ -34,6 +34,7 @@ $lato-font-path: '../fonts/lato'; font-style: $style; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF; } + @font-face { font-family: 'Lato'; src: url('#{$lato-font-path}/Lato-#{$type}-webfont.eot'); @@ -44,7 +45,6 @@ $lato-font-path: '../fonts/lato'; font-weight: $weight; font-style: $style; } - @font-face { font-family: 'Lato-#{$type}'; src: url('#{$lato-font-path}/Lato-#{$type}-webfont.eot'); diff --git a/addons/web/static/src/scss/utils.scss b/addons/web/static/src/scss/utils.scss index 9c3187d01bc..77d9749111f 100644 --- a/addons/web/static/src/scss/utils.scss +++ b/addons/web/static/src/scss/utils.scss @@ -173,6 +173,29 @@ } } +// Odoo defines a limited Noto font-family for a small variety of unicode +// characters that are not necessary defined in the user system or even defined +// but not properly readable. This function allows to add this font family in a +// given font list. +// +// @param {list} $font - a list of font names ending with the generic one. +// @param {integer} [$index] - the position where to add the support font, if +// not given, it will be placed before the generic one. +@function o-add-unicode-support-font($font, $index: false) { + @if $index == false { + $index: length($font); + } + + $-with-support-font: (); + @for $i from 1 through length($font) { + @if $i == $index { + $-with-support-font: append($-with-support-font, 'Odoo Unicode Support Noto', $separator: comma); + } + $-with-support-font: append($-with-support-font, nth($font, $i), $separator: comma); + } + + @return $-with-support-font; +} // Mixin which allows to extend the BS4 bg-variant mixin @mixin o-bg-color-extension($color, $text-color, $with-muted) {} diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss index 102b0e9abb8..d6b84ff52e0 100644 --- a/addons/website/static/src/scss/primary_variables.scss +++ b/addons/website/static/src/scss/primary_variables.scss @@ -69,7 +69,7 @@ $o-user-website-values: () !default; //------------------------------------------------------------------------------ $o-theme-fonts: ( - ('Roboto', Noto, sans-serif), + ('Roboto', sans-serif), ('Open Sans', sans-serif), ('Source Sans Pro', sans-serif), ('Raleway', sans-serif), diff --git a/addons/website/static/src/scss/secondary_variables.scss b/addons/website/static/src/scss/secondary_variables.scss index 5c2a9a53e1e..e1a8f4462cf 100644 --- a/addons/website/static/src/scss/secondary_variables.scss +++ b/addons/website/static/src/scss/secondary_variables.scss @@ -58,6 +58,13 @@ $o-website-values-palette-number: length($o-website-values-palettes); } } +// Add odoo unicode support for all fonts +$-with-support-theme-fonts: (); +@each $font in $o-theme-fonts { + $-with-support-theme-fonts: append($-with-support-theme-fonts, o-add-unicode-support-font($font)); +} +$o-theme-fonts: $-with-support-theme-fonts; + $o-theme-navbar-logo-height: o-website-value('logo-height') !default; $o-theme-font: nth($o-theme-fonts, o-website-value('font-number')) !default; $o-theme-headings-font: nth($o-theme-fonts, o-website-value('headings-font-number')) !default;