Webpage using Rendered Local Font instead of @import

See also questions close to this topic

• JSON-LD created by javascript is not displayed in view-source

  There are 'duplicates' to my question but nobody answer my question :(

  I am trying to generate JSON-LD structured data with javascript. Everything was fine until I checked from the tool, the JSON-LD code generated by javascript doesn't show up on the test table. When I proceed to view source on chrome it do not display the JSON-LD code.

  You can see it live here

  The code is below

  <script id='myJSONID' type='application/ld+json'></script>
  <script type='text/javascript'>
  //<![CDATA[
  $('#myJSONID').text(function() {
      return JSON.stringify({
          "@context":"https://schema.org",
          "@type":"Review",
          "author": {
              "@type":"Person",
              "name":"Nhà đất Sơn Nghĩa",
              "sameAs":"https://www.nhadatsonnghia.com/"
          },
          "inLanguage":"vi",
          "itemReviewed": {
              "@type":"Product",
              "name": "" + document.title,
              "description":"" + document.getElementsByName("description")[0].content,
              "aggregateRating": {
                  "@type": "AggregateRating",
                  "ratingValue": "5",
                  "bestRating": "5",
                  "ratingCount": "20"
               }
          }
      });
  });
  //]]>
  </script>
  

  Does the above code have any problem? If not then how the JSON-LD code generated by javascript can be displayed when view-source (Ctrl + U)

  Any suggestions are appreciated!

  Thanks so much!
• fabricJS: Scale canvas view

  I have converted a pdf to image format using PDF.JS and rendered that to the canvas. While that process the rendered pdf image is showing blurred in the canvas.

  I have no idea how to scale the image to some viewable format rather than being so blurred.

  Image of the pdf in canvas:

  

  Here in the image you can clearly see that the rendered image is not in readable format!

  Here is the fiddle link: https://jsfiddle.net/kjxes63f/

  var fabricCanvas;
  fabricCanvas = new fabric.Canvas('firtcanvas');
  
  document.querySelector("#pdf-upload").addEventListener("change", function (e) {
      var file = e.target.files[0]
      console.log("pdf evente");
      console.log(e);
      if (file.type != "application/pdf") {
          console.error(file.name, "is not a pdf file.")
          return
      }
  
      var fileReader = new FileReader();
  
      fileReader.onload = function () {
          var typedarray = new Uint8Array(this.result);
          console.log("typedarray");
          console.log(typedarray);
          console.log("this.result");
          console.log(this.result);
          PDFJS.getDocument(typedarray).then(function (pdf) {
              // you can now use *pdf* here
              console.log("the pdf has ", pdf.numPages, "page(s).")
              pdf.getPage(pdf.numPages).then(function (page) {
                  // you can now use *page* here
                  var viewport = page.getViewport(2.0);
                  var fabricCanvas = document.querySelector("#firtcanvas")
                  fabricCanvas.height = viewport.height;
                  fabricCanvas.width = viewport.width;
  
                  page.render({
                      canvasContext: fabricCanvas.getContext('2d'),
                      viewport: viewport
                  }).then(function () {
  
                      bg = fabricCanvas.toDataURL("image/png");
  
                      fabric.Image.fromURL(bg, function (img) {
                          img.scaleToHeight(800);
                          img.scaleToWidth(600);
                          console.log("img");
                          console.log(img);
                          console.log(bg);
                          var imgCanvas = img.set({ left: 0, top: 0, width: 150, height: 150 });
                          fabricCanvas.add(imgCanvas);
  
                      });
                  });
              });
          });
      };
      fileReader.readAsArrayBuffer(file);
  });
  
• Creating Vue.js edit-in-place functionality, need to change div visiblity based on toggling a variable

  I am trying to build edit-in-place place functionality into my app. The simplest way I can think of is to have two divs, one which displays the value and the other which displays the value within a form-field. If the user clicks the non-editable version it is replaced with the editable version.

  The HTML looks like this:

  <div class="row" v-for="x in items">
      <div class="col-md-10" v-if="!x.show_name" @click="toggle_show_name(x)">{{x.name}}</div>
      <div class="col-md-10" v-if="x.show_name">
          <input type="text" :value="x.name" class="form-control"/>
      </div>
  </div>
  

  And the method looks like this:

  methods: {
      toggle_show_name: function(x){
          x.show_name = !x.show_name
      },
  }
  

  Note: the x.show_name variable is set after loading the items via an Ajax call.

  The first question is, is this possible? I've read that Vue.js won't recompute the v-if condition, and so it won't toggle the divs, but I've also seen similar examples of toggling data visibility that suggest it will work. The second question, if this is possible have I done it right, or is there a mistake in here or is there a better way to do this.
• CSS Bootsrap Carousel padding disappearing on slide

  I am trying to create a bootstrap carousel and I have it completed but for some reason the padding disappears when the slider slides. You can view it at: https://test.albright.edu/home-copy/ near the "Learn about yourself and the world around you" text. The code I am using to move the slider is:

  .page-id-39896 .carousel-inner .item.left.active {
    transform: translateX(-33%);
  }
  .page-id-39896 .carousel-inner .item.right.active {
    transform: translateX(33%);
  }
  
  .page-id-39896 .carousel-inner .item.next {
    transform: translateX(33%)
  }
  .page-id-39896 .carousel-inner .item.prev {
    transform: translateX(-33%)
  }
  
  .page-id-39896 .carousel-inner .item.right,
  .page-id-39896 .carousel-inner .item.left { 
    transform: translateX(0);
  }
  

  I am using this to make it not appear as though it is not sliding 3 slides at a time since the normal "slide" bootstrap carousel will slide all three slides at once so i am giving the appearance of only sliding one at a time.
• MouseParallax and classic js transition doesn't work

  I have a problem which I can not find any solution: In fact I use the parallax.js library of matthew that allows me to have a parallax effect on a mousemove but when I put a js classic transition to the CSS class parallax becomes ultra slow and buged, how to fix it plz?

  
  <body>
          <div id="fullpage">
                  <div class="section">Some section</div>
                  <div class="section section-2">
                          <div id="device">
                                  <div data-depth="0.2" class="ordi"><img src="./img/ordi.png" alt="ordi"></div>
                                  <div data-depth="0.2" class="clavier"><img src="./img/clavier.png" alt="test"></div>
                                  <div data-depth="0.2" class="smartphone"><img src="./img/smartphone.png" alt="test"></div>
                          </div>
  
                  </div>
                  <div class="section">Some section</div>
                  <div class="section">Some section</div>
              </div>
  </body>
  

  
  document.getElementsByClassName('ordi')[0].classList.add('transition-device');
  document.getElementsByClassName('clavier')[0].classList.add('transition-device');
  document.getElementsByClassName('smartphone')[0].classList.add('transition-device');
  
  var scene = document.getElementById('device');
  var parallaxInstance = new Parallax(scene);
  console.log(parallaxInstance)
  
  

  
  
  
  #device img {
      width: 30vw;
  }
  
  #device .transition-device{
      top: 0%;
      left: 10%;
      opacity: 1; 
  }
  
  .ordi{
      opacity: 0;
      top: -30%;
      left: 10%;
     position: absolute;
     transition: all 1.5s cubic-bezier(.71,-0.03,.25,.78);
  }
  
  .clavier{
      opacity: 0;
      top: 20%;
      left: -10%;
     position: absolute;
     transition: all 1.5s cubic-bezier(.71,-0.03,.25,.78);
  }
  
  .smartphone{
      opacity: 0;
      top: 20%;
      left: 20%;
     position: absolute;
     transition: all 1.5s cubic-bezier(.71,-0.03,.25,.78);
  }
  
• How do I change the weight and color of the border of the Material UI Dialog?

  Hello I am trying to add an external frame to the Dialog Box from Material UI. I was trying to do this but nothing happened:

  overrides: {
    MuiDialog :{
      paper : { 
        borderWidth : 10,
        borderRadius: 10,
        borderColor : "#FFFFFF",
        backgroundColor : "#101010"
      }
  }, .......
  

  Do you know a way to do by using overrides in the MUI theme?

  Thanks
• How can i apply CSS to components in VAADIN 8

  I am trying to apply CSS to Vaadin 8 component. I have followed this example and still unable to apply CSS. I understand that i can call the addStyleName method and i am able to apply the build in ValoTheme styles (for example ValoTheme.PANEL_BORDERLESS does make a button smaller), but my custom styles are ignored. I have tried defining my custom CSS rules in the following files:

  /src/Main/webapp/VAADIN/themes/apptheme/styles.css

  @import "../reindeer/styles.css";
  
  .mystyle {
      color: red;
      background: #012345;
      background-color: #012345;
  }
  

  Then in Java i create a button:

  Button btn = new Button(" Test ");
    btn.addStyleName("mystyle");
  

  My custom style does not get applied to the button. I suspect that i am not defining CSS correctly. Please share your knowledge of how to do this correctly in Vaadin 8.
• Setup SASS in an existing Drupal project (windows)

  I've never used Drupal before (and SASS only a couple of times in personal projects).

  However, I was given this Drupal project and I'm having trouble trying to setup sass and watch/compile the changes.

  This is what I've done so far:

  1-installed sass: gem install sass

  2-installed compass: gem install compass

  3-watch and compile changes with compass: cd path/to/my/project (so, the root of my project, not the "web" folder)

  And then compass watch.

  And this is the folder structure:

  project
    -web
      -templates
        -custom
          -project_name
            -assets
              -css
                -style.css
              -scss
                -style.scss
  

  However, when I edit the style.scss file, no changes are being compiled to the style.css file. Also, I tried editing the style.css file DIRECTLY and nothing happens aswell...

  the config.rb file has:

  preferred_syntax = :scss
  css_dir = 'assets/css'
  sass_dir = 'assets/scss'
  line_comments = true
  output_style = :expanded
  

  EDIT: i got the first part working, so the SCSS files are now being compiled to CSS. The folder location in terminal was wrong.

  However, when I refresh the browser (and clear cache), no changes are happening...
• Generate list of classes from SCSS list

  QUESTION: Is it possible to use a SCSS list to generate a number of classes without repeating the attributes?

  The point is to keep the file easy maintainable by have ONE list ($svgs) of names which then can be used for classes or variables (see example below, $svg). This list is much larger in reality.

  Note that I can't use .box i[class*=".icon-"] or similar selectors, as there are other elements that would be affected.

  Here's the current SCSS, which works, but creates bloated CSS. .

  $svgs: cancel, danger, exit;
  
  @each $svg in $svgs {
    .box i.icon- {
      &#{$svg} {
        background-image: url($svg + '.svg');
  
        height: 24px;
        width: 24px;
        background-repeat: no-repeat;
        background-size: contain;
      }
    }
  }
  

  Result CSS is:

  .box i.icon-cancel {
    background-image: url("cancel.svg");
    height: 24px;
    width: 24px;
    background-repeat: no-repeat;
    background-size: contain;
  }
  
  .box i.icon-danger {
    background-image: url("danger.svg");
    height: 24px;
    width: 24px;
    background-repeat: no-repeat;
    background-size: contain;
  }
  
  .box i.icon-exit {
    background-image: url("exit.svg");
    height: 24px;
    width: 24px;
    background-repeat: no-repeat;
    background-size: contain;
  }
  

  Desired CSS:

  .box i.icon-cancel, .box i.icon-danger, .box i.icon-exit {  
    height: 24px;
    width: 24px;
    background-repeat: no-repeat;
    background-size: contain;
  }
  
  .box i.icon-cancel {
    background-image: url("cancel.svg");
  }
  
  .box i.icon-danger {
    background-image: url("danger.svg");
  }
  
  .box i.icon-exit {
    background-image: url("exit.svg");
  }
  
• On iOS 13, picking between the "display" system font and the "text" system font

  I am familiar with the new Apple guidelines that the system fonts should no longer be accessed by the names and only the system API should be used. Beyond this new requirement, it seems like the SF display and text fonts have been merged into one font. The app I work on has user content where the users in the past have freely used SF Display or SF Text at any size and we are hoping to still support this behavior. This appears to no longer be possible. Some code:

      UIFont *fontDisplay = [UIFont systemFontOfSize:10];
      UIFont *fontText = [UIFont systemFontOfSize:20];
      NSLog(@"display font %@ and %@", fontDisplay.fontName, fontDisplay.familyName);
      NSLog(@"text font %@ and %@", fontText.fontName, fontText.familyName);
  

  On ios12, we get two distinct fonts:

  display font .SFUIText and .SF UI Text text font .SFUIDisplay and .SF UI Display

  On ios13, we get one font:

  display font .SFUI-Regular and .AppleSystemUIFont text font .SFUI-Regular and .AppleSystemUIFont

  On ios12, we used to be able to use "UIFont fontWithSize" with either fontDisplay and fontText to get a small point version of Display or a large point version of Text to support what the authors have created. On ios 13, this is no longer possible.

  Does anyone know any workarounds for this new behavior?
• unicode character Robot Face

  i'M having some issue showing unicode character Robot Face on different browsers

  Here is my code

  <Grid data-rows={rows} data-cols={cols}>
        {grid.map((row, x) =>
              row.map((_, y) => (
                  <Cell
                       id={`${x}${y}`}
                       data-direction={Helpers.rotationMapper(currentPosition.direction)}
                  >
                       {Helpers.isCurrentPos(x, y, currentPosition.currentPosition) && '\u1F916'}
                  </Cell>    
              )) 
        )}
  </Grid>
  

  it create a Grid with cell's and in position[0,0] it should display a robot-face but it doesn't render correctly. This is what i'm getting (ᾑ6). I've tried render the unicode character with css (font-family: 'Symbola') but it didn't help.

  Any ideas how to solve it?
• Why does compiling Font Awesome Sass to CSS create a fonts folder in the wrong location?

  I'm compiling Font Awesome Sass files to CSS, and it's putting a fonts folder with all the font files at the root level of my project, which I don't want.

  Specifically, I installed the free Font Awesome npm package as follows:

  npm install --save-dev @fortawesome/fontawesome-free
  

  I then added the following to a vendor.scss file:

  $fa-font-path: '../../../../public/fonts' !default;
  
  @import '~@fortawesome/fontawesome-free/scss/fontawesome';
  @import '~@fortawesome/fontawesome-free/scss/brands';
  @import '~@fortawesome/fontawesome-free/scss/regular';
  @import '~@fortawesome/fontawesome-free/scss/solid';
  

  This is the directory structure of the project:

  (Project root)
  |---fonts (I don't want this one.)
  |---node_modules
  |   |---@fortawesome
  |       |---fontawesome-free
  |           |---scss
  |               |---_variables.scss (Contains original $fa-font-path being overridden.)
  |---public
  |   |---css
  |   |---fonts (This is the one I want.)
  |---src
      |---sass
          |---vendor.scss (Contains new $fa-font-path definition and FA Sass imports.)
  

  If I change $fa-font-path to '../../../public/fonts' !default; or '../../public/fonts' !default; then the build process errors out and won't compile, but '../../../../public/fonts' !default; puts all the Font Awesome font files in a fonts folder at both the project root level and in the public/fonts folder. Why is it doing this, and more importantly, how can I stop it from creating the fonts folder at the root level? Thank you.
• Google web font renders differently on mobile Safari vs. desktop Chrome?

  A Google web font (Signika) renders differently on desktop versus mobile. As illustrated by these screenshots, the kerning (space between letters) is larger on mobile than desktop, and the stroke is thinner. The letters on desktop also seem crisper, though this is more subjective.

  Desktop (Chrome):

  

  Mobile (Safari, iOS 12):

  

  Codepen:

  https://codepen.io/Crashalot/pen/3ff682e5aa123e1ac293ab19b06f1285

  #pageBox h1 {
    margin: 30px auto;
    text-align: center;
  }
  
  h1 {
    font-size: 2em;
    font-weight: bold;
    line-height: 1.2em;
  }
  
  h1,
  h2,
  h3,
  h4 {
    font-family: "Signika", Verdana, Tahoma, Arial, Sans-Serif;
    color: #7C7A7D;
  }

  <head>
    <link href="https://fonts.googleapis.com/css?family=Lato|Roboto|Signika|Source+Sans+Pro:400,700" rel="stylesheet">
  </head>
  
  <body>
    <div id="pageBox">
  
      <div class="header">
        <h1> Icon Editor </h1>
      </div>
  
    </div>
  </body>
• Browsers: Is it possible to to reload font without refreshing page?

  Consider an app that renders something on a canvas. There is the following scenario: A user loads applications and uses it for some time. He goes to some different views or changes the used font but the font can not be loaded because of no connection issue or timeout. After some time the connection is back and we could load the font for the user.

  Is it possible to load the font again? I tried to inject again font-face CSS and wait for the font to be loaded (using FontFaceObserver) but the browser remembers state when font loading failed.

  One more requirement: User can choose from many fonts (around 100) so I do not want to load all of them on initialization - fonts should be loaded on demand.
• fontface wp costum font

  I've a wp site, and I add it to "style.css":

  @font-face {
    font-family: "BowlbyOneSC";
    src: url("fonts/Bowlby_One_SC/BowlbyOneSC-Regular.ttf") format("truetype");
  }
  

  then on my functions.php:

  function ocean_add_custom_fonts() {
      return array( 'BowlbyOneSC' ,'Nunito_Sans-bold');
  }
  

  the name font are loaded and the rule showed on live css loaded by the browser:

  #site-logo a.site-logo-text {
      font-family: BowlbyOneSC;
      font-weight: 700;
      font-size: 39px;
      line-height: 0.8;
      text-transform: uppercase;
  }
  

  the fonts are in my child theme folder, in a folder called "fonts".

  But the live result is def not the font that ive manually added! where im wrong?