I have an interesting issue I can't seem to figure out.
Chrome and FireFox are adding a default styling of margin-block-start:1em; margin-block-end:1em; and Safari is adding margin-before:1em; margin-after:1em; to paragraph and header elements. This is resulting in more space than intended between paragraphs as well as headers and their associated copy.
I'm able to add a reset that works for viewing the HTML directly in the browser. But this reset is not pulling through on Outlook.com, Office 365 and Gmail. It appears these webmail clients do not support these CSS properties and are filtering them out.
This is what I have attempted to use so far:
p, h1, h2, h3, h3, h4, h4 {
margin-block-start:0px;
margin-block-end:0px;
margin-inline-start:0px;
margin-inline-end:0px;
-webkit-margin-before:0px;
-webkit-margin-after:0px;
margin-before:0px;
margin-after:0px;
}
This CSS styling is not making it into the style tag on the email clients. For example, Outlook.com shows the brackets as being empty with no properties within it. Therefore no global reset is taking place and the value of 1em is being applied by the browser.
Has anyone found a workaround to this issue yet? Setting margin and padding properties don't appear to override margin-block.
It looks like setting a global reset for all the elements for margin:0; resolves the issue.
If you only say define margin-bottom both inline or globally, or define all your margins in class Chrome, Firefox and Safari start adding margin-block which is not supported by the webmail clients, so you can't directly reset it.
Adding this reset to the style tag in the head of the HTML document should resolve any margin-block margins being added.
p, h1, h2, h3, h3, h4, h5 {
Margin:0;
}
Related
I know most of you are lucky not to deal with this, but unfortunately I have to, so...
I have a client who is sending emails from Outlook, and I've been creating some .oft templates for her. All is good, she is fine that email is not responsive and most of these are internal emails that got opened in Outlook anyway.
But, whenever I have an image header as a first thing in the email, the Outlook preview pane is displaying IMAGE URL as a first line in message preview instead of image alt tag or anything else for that matter.
Not sure if there's a fix for this? Any help is appreciated.
Tried adding the alt tag to the header image, changing it in Outlook before sending - nothing helps.
Outlook 2013-2019 will preview the first 35 characters of an email. You have two choices, you could instruct your client to always start with text and treat it like a secondary subject line or you can add a hidden area with 35 in a row so that the client can start with an image, but then you lose out on preview text.
<div style="font-size: 1px; line-height:1px; display: none !important; mso-hide:all;"> </div>
Or...
<div style="font-size: 1px; line-height:1px; display: none !important; mso-hide:all;">Dealing with Outlook's shortcomings</div>
The easiest might be to convince them to make it a second subject line for every message so they get into the habit of using this so that the url issue never shows up again.
More information on preview text:
https://litmus.com/blog/the-ultimate-guide-to-preview-text-support
Good luck.
Our product is used by many corporate and government bodies.
Many of them are only allowed use IE and have security policies applied to their IE which they are not allowed adjust.
One such setting is the disabling of downloading web fonts.
We have work around in place to check if the font can be downloaded.
If not, we replace all <i> on the page with <img>.
var haveFont = detectFontIcons();
//Iterate over each icon on the page and replace if necessary
if (!haveFont)
$('[class^="mce-i-"]').each( function(e) {
console.log("Found element = ", this);
// Replace all <i></i> with <img>
....
}
}
This works fine for all our custom Html.
The Problem:
For some reason it will not work for tinyMCE <i> tags.
I have adjusted the class prefeix to allow for the TinyMCE 'mce-i-'.
It finds no elements in the DOM with 'mce-i' even though I can see them using firebug.
I have even set a timeout on the call to do this check, incase it was an issue with the DOM not been fully rendered yet. No luck.
Questions:
1: Any ideas on why no TinyMCE elements are not been found?
2: How can I update tinyMCE to use images directly instead of web fonts?
Thanks
I can't take credit for this, but I found a font-free, custom skin that replaces the fonts with images. I added the skin, updated my init method and it appears to work as I'd hoped.
It can be found here:
- https://pollyshaw.wordpress.com/2014/02/03/a-font-free-skin-for-tinymce-version-4/
- https://bitbucket.org/pollyshaw1/tinymce-4-lightgray-no-fonts-skin
I am using CKEditor in DIV mode, as compared to an IFRAME and I am attempting to assign a class to the editor itself. I have found where to add it to things within the editor, but not the editor itself. And, I would prefer to not wrap the editor within another DIV to get the effect I want.
I am also using version 4 of CKEditor.
Edit: The following was my questions to Reinmar after he suggested the Shared Space plugin, which at least for now I have chosen not to use.
Edit: In response to Reinmar I have begun using the Shared Space plugin, and do see the potential benefits of using it over a DIV.
With that said I have the following code:
<div id="topSpace"></div>
<textarea name="data[ArchiveQuarter][description]" class="userContent" id="editor1" cols="30" rows="6"></textarea>
At the bottom of the page I have:
<script type="text/javascript">
CKEDITOR.disableAutoInline = true;
CKEDITOR.replace( 'editor1', {
extraPlugins: 'sharedspace',
sharedSpaces: {
top: 'topSpace',
}
});
</script>
It currently creates the toolbar within the top space, and has the textarea, but both of them are disabled. I probably just messed up some of the configuration, but I'm not sure what.
I would greatly prefer it to use the textarea configuration as it is part of a form instead of extracting the data from inline.
You might be interested in using Shared space plugin:
addon page,
sample.
I'm proposing this instead of using div, because I've got mixed feelings regarding divarea plugin. Your original container is wrapped with editor's structure what changes the real context. IMO it's better to use real inline editing + the shared spaces feature to place toolbar and bottom bar where you need them.
Update:
When you're using inline editor, you don't need textarea. Textarea is only a data container which framed or div based editors replace with themselves.
Inline editing is all about editing real existing elements. So this can be your HTML:
<div id="topSpace"></div>
<div class="userContent" id="editor1"><h1>My page</h1><p>Fooo!</p></div>
And JS:
<script type="text/javascript">
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline( 'editor1', {
extraPlugins: 'sharedspace',
sharedSpaces: {
top: 'topSpace',
}
} );
</script>
Note that I used CKEDITOR.inline not CKEDITOR.replace.
And the huge advantage of inline editing is that that <div> is a real element on your page - it is not wrapped (as in div based editor) and its contents is not moved to the frame (as in framed editor). So your content will inherit styles of your page.
The downside is that you need to implement custom data saving, because there's no form. The simplest way is to add a "save" button which clicked will send editor.getData() via AJAX to your server.
BTW. You probably was confused by the fact that in the shared spaces sample 2 editors are framed and 2 are inline. All of them reuses one top space and one bottom space.
BTW2. To make use of inline editing you don't need shared spaces in fact. Then the "floating toolbar" will be used as in here: http://ckeditor.com/demo#inline
How do I insert an internal link in an email?
Here's html I open in browser, copy-paste in gmail, send it to myself and expect its internal links to be working:
<html>
<body>
<p>Birds</p>
<p>Trees</p>
<p>Flowers</p>
<h4 id="Title1">Birds</h4>
<p> There are many different birds. There are... </p>
<h4 id="Title2">Trees</h4>
<p> Trees have many different colors and branches... </p>
<h4 id="Title3">Flowers</h4>
<p> The Lignum Vitae is the national flower of Jamaica... </p>
</body>
</html>
Edit:
I'm sending the following to my self:
<html>
<body>
<p>Birds</p>
<p>Trees</p>
<p>Flowers</p>
<h4 id="Title1"><a name="Title1">Birds</a></h4>
<p> There are many different birds. There are... HOWEVER, it should be noted that Gmail appears to override the default browser/HTML functionality with JavaScript (and inserts a prefix into the named anchor and corresponding href so as not to interfere with its web interface). Consequently it seems that Gmail will only scroll to the named anchor if it is currently out of view - if it is already visible then no scroll occurs. HOWEVER, it should be noted that Gmail appears to override the default browser/HTML functionality with JavaScript (and inserts a prefix into the named anchor and corresponding href so as not to interfere with its web interface). Consequently it seems that Gmail will only scroll to the named anchor if it is currently out of view - if it is already visible then no scroll occurs.</p>
<h4 id="Title2"><a name="Title2">Trees</a></h4>
<p> Trees have many different colors and branches... HOWEVER, it should be noted that Gmail appears to override the default browser/HTML functionality with JavaScript (and inserts a prefix into the named anchor and corresponding href so as not to interfere with its web interface). Consequently it seems that Gmail will only scroll to the named anchor if it is currently out of view - if it is already visible then no scroll occurs. HOWEVER, it should be noted that Gmail appears to override the default browser/HTML functionality with JavaScript (and inserts a prefix into the named anchor and corresponding href so as not to interfere with its web interface). Consequently it seems that Gmail will only scroll to the named anchor if it is currently out of view - if it is already visible then no scroll occurs.</p>
<h4 id="Title3"><a name="Title3">Flowers</a></h4>
<p> The Lignum Vitae is the national flower of Jamaica... HOWEVER, it should be noted that Gmail appears to override the default browser/HTML functionality with JavaScript (and inserts a prefix into the named anchor and corresponding href so as not to interfere with its web interface). Consequently it seems that Gmail will only scroll to the named anchor if it is currently out of view - if it is already visible then no scroll occurs. HOWEVER, it should be noted that Gmail appears to override the default browser/HTML functionality with JavaScript (and inserts a prefix into the named anchor and corresponding href so as not to interfere with its web interface). Consequently it seems that Gmail will only scroll to the named anchor if it is currently out of view - if it is already visible then no scroll occurs.</p>
</body>
</html>
and links aren't clickable. What do I do wrong?
In gmail you will need to use named anchors:
<a name="Title1">Birds</a>
As you might expect, different email clients... work differently. Some support internal links to IDs; some don't; some support both. AFAIK gmail only supports named anchors. Bear in mind that there will likely be some email clients that won't support internal linking at all.
The id in the h4 isn't strictly necessary since the named anchor should work in the majority of email clients. However, there is no reason not to have both as far as I can tell. The following works for me in Gmail:
<h4 id="Title1"><a name="Title1">Birds</a></h4>
HOWEVER, it should be noted that Gmail appears to override the default browser/HTML functionality with JavaScript (and inserts a prefix into the named anchor and corresponding href so as not to interfere with its web interface). Consequently it seems that Gmail will only scroll to the named anchor if it is currently out of view - if it is already visible then no scroll occurs.
Is there a way to style Tooltips in Google chart API? I've managed to only change the color of text using tooltip.textStyle. So is there any solution to change the white background to some other color (as shown on picture):
Test playground http://jsfiddle.net/nyNAg/
I found a solution through serendipity:
<style>
path {
fill: yellow;
}
</style>
Anyway, I did not find any configuration option for background in the google charts API.
Enable the tooltip to be handled by the HTML by writing this code in your options of google charts
CODE: tooltip: { isHtml: true } (,) add a comma if needed. :)
Now you can style tooltip using HTML and css. :)
/CSS Styling/
To style the tooltip box :
div.google-visualization-tooltip {}
To style the content like font size, color, etc
div.google-visualization-tooltip > ul > li > span {}
Use !important whenever needed ;)
http://jsfiddle.net/nyNAg/66/
It's possible to completely replace the label with custom HTML. It's maybe a bit complicated, but gives you full control of the content and style. See https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content
As the Google Chart Tools API implements its SVG charts via an iframe hosted on it's servers, as per the Same Origin Policy you may not access or modify the content of another domain, unless via server-side manipulation prior to sending the client a response.
Given that, I'm not sure how you managed to change the text colour - perhaps a browser bug?
Another option might be to override inline-style rules e.g.
li.google-visualization-tooltip-item span[style] { font-weight: normal !important; }
http://css-tricks.com/override-inline-styles-with-css/