Asciidoctor :: Discussion

What AsciiDoc syntax outputs inline CSS?

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

6 messages Options

wesruv

What AsciiDoc syntax outputs inline CSS?

Hiya, I'm working to make Red Hat product documentation templates as slick as possible for web presentation.

One thing we've run into is inline CSS getting added in certain contexts that doesn't end well on small breakpoints. I'm trying to create guidance for the authors on what to avoid, but I'm having a hard time finding what AsciiDoc syntax will create inline styles.

The syntax that brought this up was:

[[table-variable-names-differences-between-ansible-2.1-and-2.2]]
.Differences in Variable Names Between Ansible 2.1 and 2.2 
[width="40%",frame="topbot",options="header"]

It created something like:

<table style="width: 40%">

Which does very poorly at 320px wide screens

The docs didn't seem to have anything specific I could find, is there something I can search for in the AsciiDoc parsing code to find what results in inline styles? I'm not familiar with Ruby, but if I can get a lead on what to look for I'm sure I can parse the relevant parts.

I'm most considered with things like width, margin, padding, border, font/background color. Anywhere AsciiDoc adds CSS classes I'm happy with, just worried about style attributes.

Thanks for your time!

David Jencks

Re: What AsciiDoc syntax outputs inline CSS?

Awful as it is, you may get more/better advice on the asciidoctor gitter channel.

I’m slightly surprised width turns into an inline style. I think all the other things you mention are handled in the stylesheet. I’d suggest you investigate roles; these turn into classes in the html and you can then style them in the stylesheet.

David Jencks

On Sep 2, 2020, at 9:09 AM, wesruv [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Hiya, I'm working to make Red Hat product documentation templates as slick as possible for web presentation.

One thing we've run into is inline CSS getting added in certain contexts that doesn't end well on small breakpoints. I'm trying to create guidance for the authors on what to avoid, but I'm having a hard time finding what AsciiDoc syntax will create inline styles.

The syntax that brought this up was:
[[table-variable-names-differences-between-ansible-2.1-and-2.2]]
.Differences in Variable Names Between Ansible 2.1 and 2.2 
[width="40%",frame="topbot",options="header"]
It created something like:
<table style="width: 40%">
Which does very poorly at 320px wide screens <img class="smiley" src="x-msg://12/images/smiley/smiley_unhappy.gif">

The docs didn't seem to have anything specific I could find, is there something I can search for in the AsciiDoc parsing code to find what results in inline styles? I'm not familiar with Ruby, but if I can get a lead on what to look for I'm sure I can parse the relevant parts.

I'm most considered with things like width, margin, padding, border, font/background color. Anywhere AsciiDoc adds CSS classes I'm happy with, just worried about style attributes.

Thanks for your time!

If you reply to this email, your message will be added to the discussion below:
https://discuss.asciidoctor.org/What-AsciiDoc-syntax-outputs-inline-CSS-tp8207.html

To start a new topic under Asciidoctor :: Discussion, [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML

mojavelinux

Re: What AsciiDoc syntax outputs inline CSS?

Administrator

In reply to this post by wesruv

A width can only be translated into a CSS style since that's the only way to satisfy the request for an explicit width. What I would recommend is instructing authors to not use that attribute.

As an alternative, you can give writers a list of predefined roles, which then translate into CSS classes. For example, instead of width=40%, it would be "width-half" or "width-narrow". That would look like this:

.Differences in Variable Names Between Ansible 2.1 and 2.2
[%header.width-half, frame=topbot]

You can find out what settings generate inline CSS by studying the converter. See https://github.com/asciidoctor/asciidoctor/blob/master/lib/asciidoctor/converter/html5.rb It's rare, but it mostly has to do with setting column widths for tables.

Best Regards,

-Dan

On Wed, Sep 2, 2020 at 10:09 AM wesruv [via Asciidoctor :: Discussion] <[hidden email]> wrote:

Hiya, I'm working to make Red Hat product documentation templates as slick as possible for web presentation.

One thing we've run into is inline CSS getting added in certain contexts that doesn't end well on small breakpoints. I'm trying to create guidance for the authors on what to avoid, but I'm having a hard time finding what AsciiDoc syntax will create inline styles.

The syntax that brought this up was:
[[table-variable-names-differences-between-ansible-2.1-and-2.2]]
.Differences in Variable Names Between Ansible 2.1 and 2.2 
[width="40%",frame="topbot",options="header"]
It created something like:
<table style="width: 40%">
Which does very poorly at 320px wide screens

The docs didn't seem to have anything specific I could find, is there something I can search for in the AsciiDoc parsing code to find what results in inline styles? I'm not familiar with Ruby, but if I can get a lead on what to look for I'm sure I can parse the relevant parts.

I'm most considered with things like width, margin, padding, border, font/background color. Anywhere AsciiDoc adds CSS classes I'm happy with, just worried about style attributes.

Thanks for your time!

If you reply to this email, your message will be added to the discussion below:
https://discuss.asciidoctor.org/What-AsciiDoc-syntax-outputs-inline-CSS-tp8207.html

To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML

Dan Allen (he, him, his) | @mojavelinux | https://twitter.com/mojavelinux

mojavelinux

Re: What AsciiDoc syntax outputs inline CSS?

Administrator

In reply to this post by David Jencks

> I’m slightly surprised width turns into an inline style.

How else would you honor a request for user-defined width? As far as I can see, there's no other way.

Best Regards,

-Dan

On Wed, Sep 2, 2020 at 10:35 AM David Jencks [via Asciidoctor :: Discussion] <[hidden email]> wrote:

Awful as it is, you may get more/better advice on the asciidoctor gitter channel.

I’m slightly surprised width turns into an inline style. I think all the other things you mention are handled in the stylesheet. I’d suggest you investigate roles; these turn into classes in the html and you can then style them in the stylesheet.
David Jencks
On Sep 2, 2020, at 9:09 AM, wesruv [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Hiya, I'm working to make Red Hat product documentation templates as slick as possible for web presentation.

One thing we've run into is inline CSS getting added in certain contexts that doesn't end well on small breakpoints. I'm trying to create guidance for the authors on what to avoid, but I'm having a hard time finding what AsciiDoc syntax will create inline styles.

The syntax that brought this up was:
[[table-variable-names-differences-between-ansible-2.1-and-2.2]]
.Differences in Variable Names Between Ansible 2.1 and 2.2 
[width="40%",frame="topbot",options="header"]
It created something like:
<table style="width: 40%">
Which does very poorly at 320px wide screens <img class="smiley" src="x-msg://12/images/smiley/smiley_unhappy.gif">

The docs didn't seem to have anything specific I could find, is there something I can search for in the AsciiDoc parsing code to find what results in inline styles? I'm not familiar with Ruby, but if I can get a lead on what to look for I'm sure I can parse the relevant parts.

I'm most considered with things like width, margin, padding, border, font/background color. Anywhere AsciiDoc adds CSS classes I'm happy with, just worried about style attributes.

Thanks for your time!

If you reply to this email, your message will be added to the discussion below:
https://discuss.asciidoctor.org/What-AsciiDoc-syntax-outputs-inline-CSS-tp8207.html

To start a new topic under Asciidoctor :: Discussion, [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML
If you reply to this email, your message will be added to the discussion below:
https://discuss.asciidoctor.org/What-AsciiDoc-syntax-outputs-inline-CSS-tp8207p8208.html

To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML

Dan Allen (he, him, his) | @mojavelinux | https://twitter.com/mojavelinux

David Jencks

Re: What AsciiDoc syntax outputs inline CSS?

Indeed…. I reserve the right to be surprised at completely obvious and sensible things :-)

David

On Sep 2, 2020, at 12:41 PM, mojavelinux [via Asciidoctor :: Discussion] <[hidden email]> wrote:
> I’m slightly surprised width turns into an inline style.

How else would you honor a request for user-defined width? As far as I can see, there's no other way.

Best Regards,

-Dan
On Wed, Sep 2, 2020 at 10:35 AM David Jencks [via Asciidoctor :: Discussion] <<a href="x-msg://17/user/SendEmail.jtp?type=node&node=8212&i=0" target="_top" rel="nofollow" link="external" class="">[hidden email]> wrote:
Awful as it is, you may get more/better advice on the asciidoctor gitter channel.

I’m slightly surprised width turns into an inline style. I think all the other things you mention are handled in the stylesheet. I’d suggest you investigate roles; these turn into classes in the html and you can then style them in the stylesheet.
David Jencks
On Sep 2, 2020, at 9:09 AM, wesruv [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Hiya, I'm working to make Red Hat product documentation templates as slick as possible for web presentation.

One thing we've run into is inline CSS getting added in certain contexts that doesn't end well on small breakpoints. I'm trying to create guidance for the authors on what to avoid, but I'm having a hard time finding what AsciiDoc syntax will create inline styles.

The syntax that brought this up was:
[[table-variable-names-differences-between-ansible-2.1-and-2.2]]
.Differences in Variable Names Between Ansible 2.1 and 2.2 
[width="40%",frame="topbot",options="header"]
It created something like:
<table style="width: 40%">
Which does very poorly at 320px wide screens <img class="smiley" src="<a href="x-msg://12/images/smiley/smiley_unhappy.gif" class="">x-msg://12/images/smiley/smiley_unhappy.gif">

The docs didn't seem to have anything specific I could find, is there something I can search for in the AsciiDoc parsing code to find what results in inline styles? I'm not familiar with Ruby, but if I can get a lead on what to look for I'm sure I can parse the relevant parts.

I'm most considered with things like width, margin, padding, border, font/background color. Anywhere AsciiDoc adds CSS classes I'm happy with, just worried about style attributes.

Thanks for your time!

If you reply to this email, your message will be added to the discussion below:
https://discuss.asciidoctor.org/What-AsciiDoc-syntax-outputs-inline-CSS-tp8207.html

To start a new topic under Asciidoctor :: Discussion, [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML
If you reply to this email, your message will be added to the discussion below:
https://discuss.asciidoctor.org/What-AsciiDoc-syntax-outputs-inline-CSS-tp8207p8208.html

To start a new topic under Asciidoctor :: Discussion, email <a href="x-msg://17/user/SendEmail.jtp?type=node&node=8212&i=1" target="_top" rel="nofollow" link="external" class="">[hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML
--
Dan Allen (he, him, his) | @mojavelinux | https://twitter.com/mojavelinux

If you reply to this email, your message will be added to the discussion below:
https://discuss.asciidoctor.org/What-AsciiDoc-syntax-outputs-inline-CSS-tp8207p8212.html

To start a new topic under Asciidoctor :: Discussion, [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML

wesruv

Re: What AsciiDoc syntax outputs inline CSS?

In reply to this post by mojavelinux

That's extremely helpful, thanks so much!