[Pro] Blockquotes?

How do I use block quotes in FWP?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’d love to be wrong about this, but I can’t see any way to make one in Freeway directly.

You can create a style for these manually, but the result will not be valid HTML.

In the Styles palette, pull down the “gear” menu to New Style, and in the Tag field, enter ‘blockquote’ (without the quotation marks). You may leave the Name field with its auto-entered value, or you may edit it (or remove that name and tab out of it to ensure that Freeway doesn’t sneak a name back in). In the Paragraph Style section of the new style editor interface, add a left indent (padding-left) or whatever other style you want your blockquote to have.

Highlight the paragraph you want to be in a blockquote, and click on your ¶blockquote style to add the style to it.

The reason why I said this was invalid is that Freeway will replace the normal paragraph tag directly with the blockquote, leaving orphan text content in the blockquote – which is not a direct text container according to any level of the HTML spec.

<blockquote>Your quote here</blockquote>

should really be:

<blockquote>
	<p>Your quote here</p>
</blockquote>

I imagine you could work around this by creating an inline DIV (at the flashing text cursor, choose Insert / HTML Item from the main menu, then double-click inside this 100px square block and paste in your paragraphs of block quoted text) and then apply the blockquote style to that inline DIV, but I imagine that Freeway will throw an error if you do that – the paragraph styles are not supposed to be applied to HTML boxes.

So really, if you want to do this properly, you will need my CrowBar Action (so named because it allows you to pry code into Freeway where it resolutely refuses to put it).

  1. Create your blockquote style as before, but be absolutely certain not to put anything in the Name field of the Edit Style dialog.
  2. Locate the first paragraph of your blockquote, and place the flashing text cursor before the first character of that paragraph.
  3. From the main menu, choose Insert / Action Item/CrowBar. You will see a little box inline in your text, with a tiny gear icon in one corner of that box. Click once on that box to highlight it (corner handles showing) and then look in your Actions palette. Click the Code button, and paste in <blockquote>.
  4. Repeat at the end (last character before the return) of your last paragraph of the blockquote. This time, enter </blockquote> in the Code editor.

This will give you a (sorry, non-WYSIWYG) properly-coded blockquote, one which can contain multiple paragraphs (or lists, or headers) of text as per the spec.

Walter

On Jun 16, 2014, at 10:12 AM, RavenManiac wrote:

How do I use block quotes in FWP?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Walter.

I think Ernie was able to do this within FWP, but you are correct, it’s not properly formatted. But does it really matter?

http://cssway.thebigerns.com/products/inline-basic-layout/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’m not sure that “orphan text” was always a bad thing in relation to
blockquote - although in html5 it’s described as a tag that specifies a
section that is quoted from another source
. As a “section” element,
perhaps the easier FWP trick is add blockquote to an action like Walter’s
still-more-useful-than-ever HTML5 action - create a div (or inline div) to
transform into a blockquote container, and let FWP treat the content as
normally p stuff.


Ernie Simpson

The reason why I said this was invalid is that Freeway will replace the

normal paragraph tag directly with the blockquote, leaving orphan text
content in the blockquote – which is not a direct text container according
to any level of the HTML spec.

    <blockquote>Your quote here</blockquote>

should really be:

    <blockquote>
            <p>Your quote here</p>
    </blockquote>

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Not to pat my own back, but Man! do I love me some of the new ActionsForge features.

http://actionsforge.com/actions/html5

Added the blockquote (and a couple of others I missed earlier) and the new Action was uploaded and updated everywhere in one click.

To make a blockquote with this Action, create your blockquote style first, but make sure that it does not have a Name attribute. This will force Freeway to publish the style whether it sees it being used in the page or not. THen, resolutely DO NOT USE that style anywhere. Don’t click anything and apply the style to it. Trust that CSS will make any actual blockquotes look the way you designed them to look.

Then insert an HTML item inline in the paragraph where you want the blockquote to appear, Apply the HTML5 Element Action to this box and set it to the blockquote output type, then double-click inside of the inline box and paste your blockquote text inside it. The inline DIV will be converted to a

, the text will be output normally (in a

or other legal text container), and all will be well with the world (and the W3C).

Enjoy!

Walter

On Jun 16, 2014, at 11:31 AM, Ernie Simpson wrote:

perhaps the easier FWP trick is add blockquote to an action like Walter’s
still-more-useful-than-ever HTML5 action - create a div (or inline div) to
transform into a blockquote container, and let FWP treat the content as
normally p stuff.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hey Ernie, good to hear from you. I’m not sure I understand how you’re getting the big light blue quote mark in the example page I listed above.

When I open your FWP file I see four blockquote styles. Two of them I understand and I see how they’re being used, but the other two I can’t figure out.

They look like this: blockquote::before. One is a tag, the other is a class. Plus, I’ve never seen this attribute before:

The tag has this: Content: " 07E 0A0"
The class has this: Content: “201C”


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter, you’re too good to us. I’ll check it out.

K

On 16 Jun 2014, 3:44 pm, waltd wrote:

Not to pat my own back, but Man! do I love me some of the new ActionsForge features.

http://actionsforge.com/actions/html5

Added the blockquote (and a couple of others I missed earlier) and the new Action was uploaded and updated everywhere in one click.

To make a blockquote with this Action, create your blockquote style first, but make sure that it does not have a Name attribute. This will force Freeway to publish the style whether it sees it being used in the page or not. THen, resolutely DO NOT USE that style anywhere. Don’t click anything and apply the style to it. Trust that CSS will make any actual blockquotes look the way you designed them to look.

Then insert an HTML item inline in the paragraph where you want the blockquote to appear, Apply the HTML5 Element Action to this box and set it to the blockquote output type, then double-click inside of the inline box and paste your blockquote text inside it. The inline DIV will be converted to a


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, that worked perfectly.

However, as silly as this might sound, my goal was to get those big quote marks Ernie has in his example page: http://cssway.thebigerns.com/products/inline-basic-layout/ For whatever reason, I thought the blockquotes tag did that. :slight_smile:

BTW, I was able to achieve the quote styling I wanted using a standard style tag, albeit not a blockquote. What does using a blockquote do for me in terms of semantics or otherwise.

Thanks!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

201C is for “left double quotation mark”.

http://brajeshwar.github.io/entities/

Todd

The class has this: Content: “201C”


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Gotcha. Tried using 201C and 201D in the updated HTML5 Action, but no joy. Is there something else I need to do?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On Jun 16, 2014, at 12:05 PM, RavenManiac wrote:

Okay, that worked perfectly.

However, as silly as this might sound, my goal was to get those big quote marks Ernie has in his example page: http://cssway.thebigerns.com/products/inline-basic-layout/ For whatever reason, I thought the blockquotes tag did that. :slight_smile:

Ernie is using some of the features of CSS2 (generated content) to place non-semantic design elements into the page. He is floating an open and close quote mark into place around the blockquote element. I haven’t seen his example before, but it’s a neat way to add this effect without needing additional markup that doesn’t mean anything related to the actual content…

BTW, I was able to achieve the quote styling I wanted using a standard style tag, albeit not a blockquote. What does using a blockquote do for me in terms of semantics or otherwise.

Blockquote is an actual HTML tag (going all the way back to the beginning of the spec, I think), and it means something specific when it is encountered by a “web crawler” or other quasi-intelligent device. The way that it looks on screen is almost entirely meaningless – so don’t use it just to get the appearance. Conversely, a thing that looks like a blockquote, but is not actually coded in a blockquote element, is utterly meaningless in terms of the page outline.

Every tag that you choose in an HTML document means something – over and above whatever its contents may be – in terms of the overall page outline. Recall what a PowerPoint slideshow looks like in outline view. Each page in your site has the same sort of outline, which may be used by tools to scan that document and figure out what is most or least important within it. Blockquote means that the content within it did not originate in the current document – it belongs to a different document entirely, and has a different author and authority tree.

Walter

Thanks!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You don’t put those in the document itself – remember, they are not semantic content, they are pure decoration.

You would add these in the CSS, in a tag-only style constructed according to Ernie’s specifications.

If you aren’t using the blockquote element, then you can’t follow his recipe – remember, the important thing is not how it looks, but how it is coded and what the actual document outline is.

Walter

On Jun 16, 2014, at 12:17 PM, RavenManiac wrote:

Gotcha. Tried using 201C and 201D in the updated HTML5 Action, but no joy. Is there something else I need to do?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, I think I understand. So I need to create a separate element named .blockquote::before and stylize it accordingly. Should this be a class (as shown) or a tag?

What, if anything, should I put in the two dialog boxes in the HTML5 Action?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, I figured it out. Definitely need to go with a tag. The only problem I’m having is getting the quote mark positioned correctly. Any suggestions?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Blockquote is a tag, so no leading period.


Ernie Simpson

On Mon, Jun 16, 2014 at 12:34 PM, RavenManiac email@hidden
wrote:

Okay, I think I understand. So I need to create a separate element named
.blockquote::before and stylize it accordingly. Should this be a class (as
shown) or a tag?

What, if anything, should I put in the two dialog boxes in the HTML5
Action?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Make sure that your blockquote element is position: relative (extended interface to add this). Then a position: absolute child will be positioned relative to the parent (the blockquote). Even though the pseudo-class is named :after or :before, the content is actually added within the parent element, not outside of it, so you treat it as a child.

http://jsfiddle.net/Yw2Dt/

Walter

On Jun 16, 2014, at 12:44 PM, RavenManiac wrote:

Okay, I figured it out. Definitely need to go with a tag. The only problem I’m having is getting the quote mark positioned correctly. Any suggestions?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
List Options | FreewayTalk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, I’m almost there. Should my quote marks be closer in? If so, how do I do that?

And, how do I get the author on a separate line under the quote?

http://mtc.idealynx.com/about-us.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

the correct answer is in your question - how do you get the author on a
separate line after the blockquote.


Ernie Simpson

On Mon, Jun 16, 2014 at 1:49 PM, RavenManiac email@hidden wrote:

Okay, I’m almost there. Should my quote marks be closer in? If so, how do
I do that?

And, how do I get the author on a separate line under the quote?

Learn More About More Than Cake | The Creators of Perfect Palate™ and Edible Petals™


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I think your quotes look fine where they are. If you want to put the author on a separate line, just type a return before it, and then right-align that paragraph, for the usual “name on the right behind a dash” style. You can set the space-before (margin-top) on the author line and the space-after (margin-bottom) on the quotation to bring those two together closer than they ordinarily would. Normal spacing is one em (width of the capital M in that font) before and after, and the two spaces collapse into one another, so you see only one of them.

Walter

On Jun 16, 2014, at 1:49 PM, RavenManiac wrote:

Okay, I’m almost there. Should my quote marks be closer in? If so, how do I do that?

And, how do I get the author on a separate line under the quote?

Learn More About More Than Cake | The Creators of Perfect Palate™ and Edible Petals™


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

So it appears the quote marks are throwing off the center of my quoted text, plus I’m having issues with the after quote on this page. What should I do?

http://mtc.idealynx.com/become-a-distributor.php


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options