If I have 2 fonts with the same family name - for example Arial Regular and Arial Bold. How can I know what font is being used by default and how can I tell to use Arial Regular for the regular text and Arial Bold for the bold text?
CKEditor uses <strong> tags to denote content that was made bold using the editor.*
You can use this to achieve what you want in the editor's content.css by telling it to use a specific font for <strong> tags. Pseudocode:
body { font-family: "Arial" }
strong { font-family: "Arial Bold"; }
How can I know what font is being used by default
The easiest way is to look in the content.css file, or enter some text into CKEditor and do right-click -> "inspect element" and see which font is being used.
* = this may not necessarily apply to bold content copy & pasted from somewhere else, say MS Word. But all bets are off with that anyway.
Related
I have use the following code to set default font and font size in CKEditor 4:
config.font_defaultLabel = 'Tahoma';
config.fontSize_defaultLabel = '24px';
But above code is not working on Mozilla Firefox.
I changed the font-size and font-family using below,
CKEDITOR.addCss(".cke_editable{cursor:text; font-size: 14px; font-family: Arial, sans-serif;}");
This is a complicated issue. Those settings only set the label in dropdown meaning if there will be a font which doesn't match any defined in font dropdown or there will be no font defined then Tahoma will be shown in the dropdown (there doesn't have to be a match). Labels don't force particular font in the editor.
If you want to have Tahoma as default font, you need to set it in CSS. For classic editor you need to set it in ckeditor/contents.css for body element. For inline editor, you need to set it in main page CSS file.
NOTE: There are ways to force particular fixed set of fonts inside the editor (even when pasting different fonts from external resources) but they require usage of Advanced Content Filter (ACF) and transformations. If you wish to learn more about ACF please see below links:
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_acf.html
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_advanced_content_filter.html
https://ckeditor.com/docs/ckeditor4/latest/guide/dev_disallowed_content.html
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-allowedContent
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-extraAllowedContent
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-disallowedContent
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_filter.html#method-addTransformations
Basically, with addTransformations method, you can check all the spans and see if the font used for it is on the list of defined fonts or not. If it is not, you can either delete it or apply default Tahoma font. Please also note that ACF can't be disabled if you want to use transforrmations.
I'm working on a site which is in Arabic (default text direction is "right to left") and I'm using "Noto Naskh Arabic" font for arabic text and Latin-Modern for latin text which I'm definig by the following css code:
*[dir="ltr"] {
font-size: 20px !important;
font-family:"Latin-Modern";
}
Users may need to enter mathematical equations and I'm using 'Mathjax' for this purpose, the problem is that:
Fractions are displayed without the horizontal line
Equations are displayed with different sizes between arabic and latin paragraph as when I write
some text in english here $\int f(x)dx $
I have come to a slution to the first problem using css
span:lang(ar).MathJax {
direction: ltr !important;
font-family:"Latin-Modern";
}
For the second problem, I need to know if there is a way to automatically specify scale separately for equation which are embedded in Arabic paragraph end those embedded in English paragraph.
It seems like the main issue is that you have to scale in the first place. I'm guessing you did that because MathJax is rendering too large in RTL contexts.
It looks like MathJax is having issues detecting the correct ex-height of the surrounding font. That can be caused by various problems, from fonts not having a correct ex-height to bad CSS interactions; from a quick test it's not the fonts.
As a workaround you can disable font matching in the MathJax configuration
MathJax.Hub.Config({
"HTML-CSS": {matchFontHeight: false},
SVG: {matchFontHeight: false},
CommonHTML: {matchFontHeight: false}
});
You should then also disable the scaling you applied.
How can I prevent the reset.css from clearing out the bold or italic style formats in the kendo editor? since, I need reset.css for other parts of the applications.
I'm not really sure why reset.css wants to change "font" to "inherit" on strong elements but it is not very logic. Kendo editor uses to make text bold so it creates a conflict.
Add this CSS
strong { font-weight: bold }
or
strong { font-weight: bold!important }
or use another reset css like normalize.css
For more information, take a look at this SO question: YUI Reset CSS Makes <strong><em>this not work</em></strong>
I'm using Sphinx to generate documentation which uses reStructured Text as it's markup. However, when I use some inline formatting to make text show up in a fixed width font --no-cache the rendered HTML shows the text in a smaller font.
How do I increase the fixed-width font size in Sphinx / reStructured Text so it matches the normal text font-size?
Answer
With Chris's help I was able to override the default font style in the CSS to increase the fixed-width font size:
Edit conf.py to specify html theme and css file:
html_theme = 'default'
html_style = 'overrides.css'
Next, I created a new css file static/overrides.css with the following contents:
#import url("default.css");
tt {
font-size: 130%;
}
I selected to use 130% because default.css defines this:
div.body p, div.body dd, div.body li {
text-align: justify;
line-height: 130%;
}
And now I get fixed width text matching the regular text in the generated html.
You can edit the CSS stylesheet for whichever theme you are using. For example, for the default theme, you can edit the default.css_t file. Specifically you can specify an increased font-size (for example, use font-size: 1.1em or similar) in the pre rule on line 274.
I'm trying to find solution for the following problem:
If I select text in editor and change font with 'Font'-dropdown, this dropdown will show correct font when I step on edited part of the text in the editor. But if I haven't yet changed font, then 'Font'-dropdown doesn't display actual font. And there is the same problem with a 'Size' dropdown.
If it's possible, help me please at least to determine the direction in which I have to dig to resolve this annoying problem.
Thank you for your time.
before editing:
http://farm9.staticflickr.com/8440/8019979666_cac44116c6_b.jpg
after editing:
http://farm9.staticflickr.com/8170/8019969770_d7e1456f86_z.jpg
This is as expected because there actually isn't any user-inputted definition for the font or the size at the time before editing happened. It could be basically any font and can be defined with the CSS stylesheet of the page that is viewing the content. When the text is in the editor, it is specified by the content.css of the editor, which by default uses the font
font-family: Arial, Verdana, sans-serif;
Often, however the actual output of the editor does not use the same stylesheet and so the font could be whatever the default of the browser is or what is defined in the stylesheet of the page that hosts the content from the editor.
The dropdowns specify the font that the user has selected for text - if the user has not selected anything and leaves it as the default values the box should not display anything :)