How to automatically apply style to all images/diagrams with asciidoctor? - asciidoc

I would like that all images/diagram to be centered in my document.
I know I can center them this way:
[plantuml, align="center"]
....
Some diagram
....
But I would like it to be automatic.

You need to apply some CSS to achieve that, assuming that your output is HTML. If your need to achieve the same for PDF, you'd need to adjust the theme that you are using.
To add some CSS for HTML, see the section on Docinfo Files.
To customize a PDF theme, refer to the theming guide.

Related

How do I generate Asciidoctor admonition in the top left corner

Looking into the official Asciidoctor documentation about Admonitions the addmonition look like:
The admonition is in the top left corner.
However, when I use the same admonition in my documentation the it looks like:
The admonition is on the left side of the text.
Are there some special Asciidoctor attributes I need to set in order to get the same look as in the official documentation?
The first example uses the CSS in the Antora UI, the second uses the standard Asciidoctor CSS. The HTML created in both scenarios is the same.
If you want the a similar styled HTML output as with the Antora UI, you'll need to borrow the necessary CSS from the Antora UI and integrate it into the theme you use for your HTML output.

Make CKEditor 5 accept <br> or inline styles

Lokking through the documentation of CKEditor5, I could not find instructions on how to allow <br> tags.
I read somewhere online that you can use inline styles like style = "margin:0px" but it strips those as well.
Any help would be greatly appreciated.
The soft line break feature is on the project's TODO list. Please leave your comment in the GitHub issue so we can understand your use–case better and provide the best possible solution.
Saw somewhere online where you can use inline styles like style="margin:0px" but it strips those as well!
Read why the editor does so in the project's FAQ. Anyway, I strongly advise you to use global styles sheets instead of inline styles because they are against the idea of the semantic content. All the more that your style is associated with the layout (margin, spacing), not the content itself (font color, font size). CKEditor 5 is a content editor, not a layout editor.

Can't insert html with <object> tag

I'm struggling with ckeditor 4.5, as I'm creating plugins to insert specific tags in current document after having uploaded a file on my server.
For some specific file types, I want to embed the element. I can add <audio> or <video> tags (by using allowContent=true in my config file), but when I insert an <object> tag (to embed a pdf file), the tag is just ignored.
I already tested adding config.extraAllowedContent = 'object[id, name, width, height, data, type] to the config file, with no avail.
I found some workarounds by adding a <div> around the <object>, but the pdf viewer is not displayed in the editor (but the <object> tag is there).
I think I'm doing something wrong with ACF, but I really don't see what.
only wrapped the tag with or , and if you use wordpress , or drupal try to disable Advanced content filter from cms
<object> is not recommended for PDF and should not be a part of an editable area. There is no way it can be editable like text or paragraph. However, it can be a non-editable element inside the editor, with some editable parts. This is what CKEditor call widget, here is a tutorial how to create it: https://ckeditor.com/docs/ckeditor4/latest/guide/widget_sdk_intro.html
Note PDF format is not normally classed as "Media" more generally "Document" but there are two ways to embed. One is to use the allMedia plugin that does include PDF as a media format ;-) the other is to include content via google docs. So review the various "Demonstrations" on the website.

CKeditor, colour of text seems to be not retained although HTML is correct, how to resolve?

I am using CKEditor 4.4.5.
Users use the text colour icon to change the colour of a word which works fine. When one checks the underlying HTML, it shows:
<p><span style="color:#FF0000">test </span></p>
However when clicks the "source" icon again to return to the standard non HTML view, the colouring has gone, although the underlying HTML is still correct. If you take this HTML and render it in a browser it will work correctly. So it seems that CKEditor is not able to render text colour correctly, unless freshly changed using the text colour icon.
We had customers thinking that the colour had not changed, and then trying to fix the issue in the HTML, which resulted in the total corruption of the HTML due to human error.
Is this a bug, or am I missing something?
Thanks.
As for CKEditor it might so happen that Advanced Content Filter will strip undesired tags / attributes.
If you don't have colorbutton plugin, CKEditor will strip this span (see standard demo).
You have 2 simple solutions:
Add colorbutton plugin.
Simply add to your config:
config.extraPlugins = 'colorbutton';
Add ACF proper rule.
config.extraAllowedContent = 'span{color}';
For more informations about ACF see Content Filtering (ACF).

Content attribute in CSS to show image icon

While creating and learning bootstrap page. I came across the content attribute of css I read few articles and I got how it works. But following code snippet shows me an image icon but the content attribute value really isn't the image url but a code. I'm not clear as how we can show the image without the url and where is the image coming from?
.test.glass i:before {
content: "\e001";
}
Following is the html element to show an image icon using above css:
<span class="test glass"><i></i></span>
But what is "\e001" is that an image code or something else?
they are utf8 codes. there are plenty of sites describing the glyphs for different standard fonts but you can also define your own font set with whatever images you choose as whatever character.
if you use a webfont, from fontello for example but are plenty of sites like that one, you can define what image to use as character \e0001 and whenever you want to use that image, you must make sure you use that font-face for the element and use the utf8 code to display the image. in html it would be someting like <span class="iconfont"></span>. if you add the image with css then is like in your example.

Resources