When you create a contentEditable div, include the Buefy/Bulma stylesheet, open the web page in Safari, place your cursor in the editable div, and try to enter text, Safari freezes.
HTML that triggers the error:
<div contentEditable="true"></div>
I'm using Safari v13.0.3 and Buefy v0.8.8.
Turns out this is a bug in WebKit: https://bugs.webkit.org/show_bug.cgi?id=202262
Using a contenteditable div, when text-rendering is set to optimizeLegibility and font-family includes -apple-system, the bug is triggered. This text-rendering and font-family combination is used by Buefy / Bulma. From the stylesheet:
html {
background-color: white;
font-size: 16px;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
min-width: 300px;
overflow-x: hidden;
overflow-y: scroll;
text-rendering: optimizeLegibility;
text-size-adjust: 100%;
}
...
body,
button,
input,
select,
textarea {
font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
The fix is to override font-family for the editable div. I include the fonts from Bulma's stylesheet, except -apple-system, and Safari doesn't crash:
<div contentEditable="true"
style="font-family: BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;"></div>
Related
so i have my svg image which i want to convert it to icon using Fontello to convert and import it to my nuxt project. but the configuration doesn't seem to work
this is what in my nuxt.config.js file
head: {
css: [
'~/assets/css/main.css',
'~/assets/css/animation.css',
'~/assets/css/fontello.css',
'~/assets/css/fontello-ie7.css',
'~/assets/css/fontello-ie7-codes.css', /*if IE 7 */
],
}
in my html page, i'm using
<i #click="goToChat" class="the-icons demo-icon icon-chat menu ic-menu"></i>
and my css file,
.demo-icon {
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: 0.2em;
text-align: center;
font-variant: normal;
text-transform: none;
line-height: 1em;
margin-left: 0.2em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
the problem is the css file counldn't read font-family: "fontello"; did i config it wrong?
Stumble on the same issue just tonight and searched how to do it, I tried your config and it works..
Have you also imported the font folder provided by fontello which contains the actual font?
If you open the fontello.css file you will see the #font-face property with url reference to thos font files make sure the url is the right one (easiest solution is to import font and css folder from fontello.zip) so that your assets foolder looks something like that
Assets
- css
- font
- images
i've just created new component with navbar code within:
<template>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
.....
</template>
and my index.html without any changes.
I've tried to make changes based on my googling results, actually set my own style to nav tag didn't help.
If you are using VUE CLI then in you App.vue there will be a style block like this
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
because of this margin-top: 60px this white space is there. Vue CLI provides this default styling for their default components, you can remove it.
I hope this helps
So use this in App.vue, reasons to set the default for the web base
<style>
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
</style>
Typically, to insert a Glyphicon inside a Bootstrap 3 app, it's as simple as:
<span class="glyphicon glyphicon-envelope"></span>
etc. In many apps, however, it is typical for Glyphicons to be "customized" so that they appear with numeric superscripts like so:
Above, this red/white "5" bubble might indicate that the user has 5 notifications. I'm wondering how this "numeric superscript" effect can be achieved in Bootstrap 3.
You mean something like this?
This is just some CSS basic styling, there is afaik no "standard" and certainly no special HTML tags nor "secret" bootstrap features that supports it. Below my suggestion - modify so it fit your expectations :
.rw-number-notification {
position: absolute;
top: -7px;
right: -6px;
padding: 3px 3px 2px 3px;
background-color: red;
color: white;
font-family: arial;
font-weight: bold;
font-size: 10px;
border-radius: 4px;
box-shadow: 1px 1px 1px silver;
}
markup :
<span class="glyphicon glyphicon-envelope">
<span class="rw-number-notification">7</span>
</span>
demo with some examples -> http://jsfiddle.net/rqfthhkx/
NB: Not completely related, but I do believe, though, that it is common practice to use the <i> tag when you are using glyphicons, fontawesome etc
<i class="glyphicon glyphicon-envelope"></i>
at least it renders as exactly the same -> http://jsfiddle.net/rqfthhkx/1/
Font Awesome
Example:
<i class="fa fa-envelope text-primary">
<span class="number-notification">7</span>
</i>
The .number-notification CSS is the same, except it seems impossible to adjust the position of the number container to fa-xx sizes and different font-sizes. The solution is to wrap the <i> element into <h> elements and specify the relative position in rem units :
.number-notification {
position: relative;
padding: 3px 3px 2px 3px;
background-color:red;
color:white;
font-family: arial;
font-weight:bold;
font-size: 10px;
border-radius: 4px;
box-shadow:1px 1px 1px silver;
}
.fa .number-notification {
top: -1rem;
right: 1rem;
}
h3 .fa .number-notification {
top: -1.2rem;
right: 1.2rem;
}
h2 .fa .number-notification {
top: -1.5rem;
right: 1.5rem;
}
h1 .fa .number-notification {
top: -2.2rem;
right: 1.8rem;
}
This should look more or less the same with different font sizes.
New fiddle -> http://jsfiddle.net/b86oj9gd/
I need to place the text over the black panel at the position I need. So here is my layout
<div class="wrap">
<img src="img/portfolio/geometria/thumb.jpg" alt="Geometria.ru" title="Geometria.ru" width="360" height="240">
<div class="description">Приложение для <b>Geometria.ru</b></div>
</div>
.description {
font-size: 20px;
font-family: "Calibri Light", "Calibri", sans-serif;
padding-top: 11px;
padding-bottom: 7px;
}
.description b {
font-size: 24px;
font-family: "Calibri Bold", "Calibri", sans-serif;
font-weight: normal;
}
The text in Firefox, Safari 7 (yes, I know it's on WebKit) and Chrome is almost the same (+/- 2px isn't a problem), but Opera render it completely weird. Can I handle this?
Update
Chrome 32 on Windows render as bad as Opera do. On Mac OS all is ok.
how rotate div element in TCPDF with xhtml or html
test with rotate css3 no work
i need help, css3 working in last version TCPDF?
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
writing-mode: lr-tb;
TCPDF has a good XHTML+CSS sample sample I've changed it a bit.
// define some HTML content with style
$html = <<<EOF
<style>
...
div.test {
color: #CC0000;
background-color: #FFFF66;
font-family: helvetica;
font-size: 10pt;
border-style: solid solid solid solid;
border-width: 2px 2px 2px 2px;
border-color: green #FF00FF blue red;
text-align: center;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
}
</style>
<div class="test">example of rotated DIV with border and fill.<br />Some text.</div>
EOF;
// output the HTML content
$pdf->writeHTML($html, true, false, true, false, '');
//Close and output PDF document
$pdf->Output('RotatedDIV_Sample.pdf', 'I');