Any other suggestions?
When using CKEditor copying from one instance to another (with CTRL+C/V). You always get some changed source code. Even with Advanced Content Filtering enabled and only allowing a few plugins and content rules.
Check this example here (Code 1):
<p>nubosys GmbH ist ein
Infrastrukturanbieter und bietet für eine moderne Informations- und
Kommunikationstechnologie (ICT) das ideale Umfeld.<p>
CTRL+C/V in another instance becomes this (Code 2):
<p><span>nubosys</span> GmbH ist ein Infrastrukturanbieter und bietet
für eine moderne <span>Informations</span>-
und Kommunikationstechnologie (ICT) das ideale Umfeld.</p>
So what you see is that unnecessary span tags get inserted
When I monitor the clipboard I see this (Code 3):
So you see CKEditor does quit a good job filtering out things. But it is not 100% the same as in the original.
My approach would be to implement a source code based copy mode. So I am wondering if something like this does not exist already for CKEditor. My use case is to copy from one instance to another instance of the editor inside the CMS.
I case you want more background information. Here is the CKEditor Plugin for Orchard CMS we started: https://github.com/inteno/CustomCK/wiki/Introduction
How to force the user to copy the HTML Code from one instance to another (without source changes) with one click or by pressing CTRL+C/V.
When I use forcePasteAsPlainText: true, the problem does not occur, but the formatting is lost. I want a clean way to copy the formatting without changing the source.
Update:
In this fiddle http://jsfiddle.net/mjost/6rgo0udg/15/ the problem does not occur. CKEditor manages to filter out the bad code:
Version:0.9
StartHTML:0000000165
EndHTML:0000000886
StartFragment:0000000201
EndFragment:0000000850
SourceURL:http://fiddle.jshell.net/mjost/6rgo0udg/15/show/
<html>
<body>
<!--StartFragment--><p style="box-sizing: border-box; border-radius: 0px !important; margin: 0px 0px 10px; color: rgb(85, 85, 85); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20.7999992370605px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">nubosys GmbH ist ein Infrastrukturanbieter und bietet für eine moderne Informations- und Kommunikationstechnologie (ICT) das ideale Umfeld.</p><br class="Apple-interchange-newline"><!--EndFragment-->
</body>
</html>
(http://freeclipboardviewer.com/)
But that is because there are no spans even in the clipboard.
Update 2:
The problem occurs here when I work with none breaking spaces:
http://jsfiddle.net/mjost/r34c7fLe/5/
HTML
<body>
<textarea id="cke1"><p>nubosys GmbH wurde 2011 von inteno ag und edicomp GmbH gegründet. nubosys GmbH ist ein Infrastrukturanbieter und bietet für eine moderne Informations- und Kommunikationstechnologie (ICT) das ideale Umfeld.</p>
</textarea>
<textarea id="cke2"></textarea>
</body>
JS
CKEDITOR.replace( 'cke1', {
forcePasteAsPlainText: false,
extraAllowedContent: 'span;'
} );
CKEDITOR.replace( 'cke2', {
forcePasteAsPlainText: false,
extraAllowedContent: 'span;'
} );
Updated Question:
According to the latest experiments I think it should be a Plugin that overwrites the default Copy&Paste and works on a Source Code base. Is this possible?
It appears to be some incompatibility between CKEditor and Chrome/Webkit. I'm not sure if you have any specific reason for that javascript. But forcePasteAsPlainText: false is redundant because that's default value. And extraAllowedContent: 'span;' is what's causing your problem with inserted spans.
If you don't need to set more options you can remove all javascript and just use class="ckeditor" on textareas to load editors on them.
Another way is to hit Source button on CKEditor's toolbar and copy the source directly, that is always 1:1 then you can hit Source button on second CKEditor and paste it there, again 1:1.
Does it still bug for you in this fiddle? http://jsfiddle.net/tfoaw743/1/
Related
Using the following CSS:
.notice--info::before {
position: relative;
font-family: "Font Awesome 5 Free";
font-weight: 900;
top: .5em;
left: 0;
color: #ff980052;
content: "\f071 ";
font-size: 4em;
vertical-align: text-top;
line-height: .1em;
text-indent: 0;
}
I've managed to achieve this look:
Using this Kramdown markup in Jekyll on the Minimal Mistakes theme:
{: .notice--info}
Important: Our systems are evolving and becoming more and more interconnected and dependent upon one another. Therefore, we're providing a single checklist to handle all aspects of the morning prep so we can all work as a team on all aspects of the production.
The goal is to add font awesome icons as watermarks to the Minimal Mistakes Utility Classes defaults.
QUESTION 1: How do I get the first line to overlap without indentation?
QUESTION 2: How do I bring the text to the front so it's the top layer and isn't washed out by the alpha channel of the Font Awesome icon?
Thanks!
I've gone about re-creating your intended effect using Unicode rather than Font Awesome because you can achieve so much these days with a combination of Unicode and CSS filters that a third-party dependency like Font Awesome (which was popular in the early 2010s) may not be necessary any more.
Principally,
I've given the paragraph text-align: justify
I've made the paragraph see-through, by giving it an rgba() background-color
Finally, I've positioned the warning symbol beneath the paragraph, using a z-index of -6
Working Example:
.notice--info {
position: relative;
padding: 12px 12px 30px 12px;
font-size: 14px;
line-height: 24px;
text-align: justify;
font-family: sans-serif;
background-color: rgba(187, 197, 224, 0.3);
}
.notice--info::before {
content: '\26A0 \FE0F';
display: block;
position: absolute;
top: 42px;
left: 6px;
z-index: -6;
font-size: 80px;
filter: hue-rotate(-10deg) saturate(8);
opacity: 0.5;
}
<p class="notice--info"><strong>Important:</strong> Our systems are evolving and becoming more and more interconnected and dependent upon one another. Therefore, we're providing a single checklist to handle all aspects of the morning prep so we can all work as a team on all aspects of the production.</p>
I have the following html markup, where I want to use different font and fontsize for the first letter:
<table class="maintable">
<tr>
<td>
<span class='first-letter'>E</span>s war einmal ein Prinz, der auf der Suche nach der richtigen Frau war.
</td>
</tr>
</table>
I use the following CSS
body {
font-family: 'montserrat';
font-size: 3.5mm;
line-height: 6.0mm;
}
.first-letter {
font-family: 'arabesqueinitialen', Arial;
font-size: 15mm;
vertical-align: baseline;
}
.maintable td {
vertical-align: top;
text-align: justify;
}
If I run this in Chrome I get the following result:
which is exactly what I want.
But when I convert this with wkhtmltopdf I get this:
As you can see, the vertical alignment of the first letter is wrong.
Any ideas how to fix this?
I don't know if you still have the problem, but I had this same problem, the reason I found was that the element affected (image, table, chart, etc) was close to the page break, I think that with a <br> before your line would be enought.
Another way is specify where do you want your page break in the css file, like this
p{
page-break-inside:avoid;
}
.pagebreak {
page-break-after: always;
}
That way you won't have pagebreak inside paragraphs and can specify where do you want the page break with the class pagebreak.
If you still have problems with the vertical align, you can search in the WkHtmltoPdf GitHub page GitHub WkHtmlToPdf
Is there a recommended way to let Icon Fonts (eq. FontAwesome/Octicons) bleed into the Shadow DOM?
At the moment, when I want to use an icon in a custom element's Shadow DOM I have to include parts of the ociticons.css file inline in the Shadow DOM:
#shadowroot
<style>
.octicon, .mega-octicon {
font: normal normal normal 16px/1 octicons;
display: inline-block;
text-decoration: none;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mega-octicon { font-size: 32px; }
.octicon-search:before { content: '\f02e'} /* */
</style>
<button>
<span class="mega-octicon octicon-search"></span>
</button>
(Apparently, #font-face does bleed into the Shadow DOM.)
No, there is no “recommended way” to use icon fonts just because those are simply a bundle of css and shadow DOM is intended to hide light css. So your request contradicts the purpose of shadowing.
The common approach is to build the component for showing font-related icons. Every custom component library has in fact it’s own component to show font-icons. Just google for font-awesome polymer or like. A random example.
Sidenote: #font-face does not bleed into shadow. It’s the directive setting the relation between fontname and the file where this font to take from, for those fonts which are not known to browser yet. That said, whether you’d try to declare:
#font-face {
font-family: my-octicons;
src: url('octicons.otf');
}
and then use it like:
font: normal normal normal 16px/1 my-octicons;
in shadow, it won’t be resolved. The reason it’s resolved in your case is that the browser knows where to take the font to show. In general, it’s the same case as if you were declaring:
font: Helvetica;
without any #font-face in before.
Hope this helps.
I've tried and tried so hard to overcome this problem the past few days as I just want to get this site launched above all now. I have been developing this for the last week or so and I have been using my specific preferred browser, Google Chrome. Yes, big mistake!
Anyway, here is the demo site which shows what I want near everything to look like (apologies for some things that are out of place, haven't quite finished yet!): http://www.weburton.co.uk/content/demo/
You see the social area? It displays properly in Chrome; exactly as I want it. In IE it displays the div areas, but there are some styling issues such as the text on the Twitter side.
However, the div areas are completely ignored in other browsers it seems; its a strange problem, I'll admit that. I have them encased in a div which has a background image (selenasocial) and then have the other divs floating. Here is the code (CSS):
#selenasocial {
background: url(images/wls/social-bg.jpg) no-repeat top center;
display: inherit;
width: 100%;
min-height: 263px;
z-index: 555;
border: none;
overflow:auto;}
.selenasocial {
background: url(images/wls/social-bg.jpg) no-repeat top center;
display: inherit;
width: 100%;
min-height: 263px;
z-index: 255;
border: none;
overflow:auto;}
.selenasocial img {
border: none;}
.twitsocial {
float: left;
width: 480px;
padding-top: 10px;
text-align: center;
border: none;}
.facesocial {
float: left;
width: 480px;
padding-top: 10px;
text-align: center;
border: none;}
And here is the HTML, I am using Widgets (and yes, they have been styled correctly in functions.php):
<!-- Selena Gomez Social Networks -->
<div class="selenasocial">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Social Sidebar") ) : ?> <?php endif;?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Social Sidebar 2") ) : ?> <?php endif;?>
</div>
I overcame the error in IE (as it was happening there, too) by copying the CSS above into a separate IE.css file. I just don't understand why two browsers which are leaps and bounds ahead of IE aren't reading from the main CSS file.
Any help would be HUGELY appreciated - I've been tearing my hair out about this for the past few days.
Thanks in advance!
There's (technically) nothing wrong with your code - the part you posted. You are setting both float properties to left, which I guess is not what you want, but that did not explain why the other properties were getting ignored.
I won't read your 4700-lines CSS file to find what is wrong with it but I will try to help you do it yourself.
The first thing I did was to try to hunt the CSS code you posted with firebug and, to my surprise, it was not there. The very last line of CSS firefug gave me was the 902th which was this:
.clearfix {
zoom: 1;
}
Actually, firebug did not show that zoom thing (the brackets were empty). So I went to the CSS file directly to find it out and, after wondering why would anyone use such non-standardized property, I checked the next lines to find there was a parentheses instead of a bracket in the 907th line.
After finding such error I proceeded to run a CSS validator on your CSS file and results were not very good. Fix those errors and Firefox will draw that properly.
Deciding whether IE and Chrome's capability of interpreting wrong CSS files is actually good or bad is not to be discussed here but learning how to find and correct your mistakes can help you get things to work with stricter browsers.
Im struggling with this for the past 3 months!! - how to adapt css3 to IE7,8 and 9??
this is my page
I am using buttons there, I want to make rounded corners (basic, no?)
so I have used this css
body .main_title {
font-size: 16px;
padding: 0.3em 1.5em;
display: inline-block;
cursor: pointer;
line-height: 1.5;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
background-color: #222222;
color: white;
behavior: url(PIE.htc);
}
and the button is
<button type="submit" id="1" class="main_title">מאפיינים</button>
as you noticed, I also used an "extention" called css3pie to make it work but nothing!!
any suggestion?
any suggestion?
Sit back. Relax. Don't worry about minor cosmetic details in old browsers with falling marketshare.
CSS3 pie is kind of buggy. Try putting a position:relative; on it. Also make sure that's the correct path to PIE.htc — if I remember correctly, it may help to link to it absolutely.
I think you can probably use jquery for this http://jquery.malsup.com/corner/ in your javascript.
Anything from IE9 onwards will be ok with this in the css
border-radius:10px
http://caniuse.com/#search=border-radius