Use pt (point) font sizes in summernote instead of px (pixel) sizing - summernote

I would like summernote to return font sizes in PT rather than PX. Any ideas. I have tried editing summernote.js but cannot find where the list of default font sizes is specified.

use pt rather than px, summernote automatically convert the font size in px.
Example -> if you set font size 36pt rather than 36px, summernote automatically convert 36pt to 48px.
If you use preview code in summernote editor,
<p><span style="font-size: 36px;">Hello</span><br/>
<span style="font-size: 36pt;">Hello</span></p>
output:
Hello -> 36px
Hello -> 48px

Related

How to stop TinyMCE to change the image size after editing its name?

I control the size of my image in a page by CSS imgType.
<img class="imgType" style="..." src="/image1.jpg" alt="..." />
If I edit the image to change its name only (the fields width & height stay empty and save the content of the editor, tiny writes a value for both the width and height.
<img class="imgType" style="..." src="/image2.jpg" alt="..." width="249" height="145" />
I tried to use object_resizing : false, but it does not do anything.
How can I stop tiny to write these values?
You can remove the image dimensions from the Insert/Edit Image dialog with:
image_dimensions: false
Docs:
https://www.tiny.cloud/docs/tinymce/6/image/#image_dimensions

how can I customize a the tick using tickFormatter in PolarAngleAxis for RadarChart?

I want the radarchart to display the labels with customized font styles and oriention (in terms of rotation).
Basically I want to decrease the font size and rotate the text, can some body give me an example of tickFormmater in PolarAngleAxis.
`
`
To format label you can use tick={{ fontSize: 11 }} in
<PolarAngleAxis tick={{ fontSize: 11 }} >
Try this code option
<YAxis tickFormatter={this.customTickFormatter}/>
customTickFormatter(e){
//e holds the actual value
return (<div className="custom-tick">
e
</div>)
}
Use .custom-tick for to apply font, rotation css.

Set default text alignment in CKEditor

By default CKEditor assumes that text should be left aligned. If you enable text-align buttons, and select text and align it left, it doesn't change the content at all e.g.
Some text >> Some text
Whereas selecting center or right alignment adds the appropriate inline styles e.g.
Some text >> <div style="text-align:center">Some text</div>
The assumption that text is left-aligned by default is not always correct. For example the editor's output may be inside a table cell with align="center". In this case the text will never be left-align-able.
Is there anyway to set the default alignment of text in the CKEditor config prior to instantiating the editor?
You can set the default alignment by changing the contents.css file.
body { text-align: center; }
Alignment buttons on the toolbar automatically recognize the style and toggle the correct button.
Use this code: config.contentsLangDirection = 'ltr'; for Left To Right alignment and config.contentsLangDirection = 'rtl'; for Right To Left:
CKEDITOR.editorConfig = function (config) {
...
// Default language direction
config.contentsLangDirection = 'rtl';
...
};

SVG text element height/width inside of display:none container

I've got an SVG that is being drawn inside of a div that has css of display:none. I need to center some of the rendered text elements, and to do this, I need the height and width. Unfortunately, when the containing html element is set to display:none, I always get 0 for height, and width. getBBox(), clientWidth, getComputedTextLength() methods all return zero. My question is: how can text width be calculated under these conditions?
e.g.
<div style='display:none;'>
<svg><g><text>some text</text></g></svg>
</div>
Have you tried setting the <div> to visibility: hidden;?
You may also want to make it position: absolute; so it doesn't affect the layout of other items on the page.

Flex 4 change popup's overlay color

How can I change the color or the transparency of the popup's overlay? I want to have another color and alpha 1.
http://mprami.wordpress.com/2008/04/22/alert_popup_modal_transparancy_color_blur_changes/
In flex ‘’ tag has mainly four attributes related to modal properties of pop-ups.
modalTransparency
modalTransparencyBlur
modalTransparencyColor
modalTransparencyDuration
In spark it looks like these were renamed slightly:
modal-transparency
modal-transparency-color
modal-transparency-duration
modal-transparency-blur (guessing on this one)
To extend on artjumble's answer, if you're using a css file, you can also declare it like that in the css file:
global {
modalTransparencyBlur: 0;
modalTransparency: 0.3;
modalTransparencyColor: black;
modalTransparencyDuration: 500;
}

Resources