Sass for Meedan bidirectional layout.scss

// ========================================================================================
//  MARKUP
//   div.row
//     div.row_ar or div.row_en              <------ (1 main language per row)
//       div.column_ar and div.column_en      <------ (2 language columns per row)

!meta_header_height = 55px

=headline_big_type(!from="right")
  a
    +hover-link
    :color #000
  @if !from == "right"
    :font-size 35px
    :line-height 40px
  @if !from == "left"
    :font-size 30px
    :letter-spacing -1px
    :line-height 35px

=comment_count_layout
  :float left
  :clear both
  :font-size= !small
  :font-weight normal
  span.count
    +rounded
    :clear both
    :font-weight bold

=blocky_link
  :background #f8f8f8
  :border 1px solid #c3c3c3
  :cursor pointer
  :padding 0 5px
  :clear both
  :display inline
  :font-size= !small

=inside_column_link_and_comment_layout(!from="left",!to="right")
  :padding 0 1em 1em
  :margin 0
  :clear both
  :width 90%
  :overflow hidden
  li.posted_by
    :float= !from
    img
      :display none
    a.link_author
  li.link_title
    :margin-top 0.5em
    +headline_big_type(!from)
  li.quote
    @if !from=="left"
      :font-size 16px
      :line-height 1.4
    @if !from=="right"
      :font-size 20px
      :line-height 1.3
  li.url
    :max-width 100%
    :overflow hidden
    a
      +fancy-button(!med_grey)
      +fancy-button-size(10px, 10px, 1px)
  li.event_comment_count
    +comment_count_layout

  ul.response_actions
    :float= !from
    :position absolute
    :bottom 0
    li
      :float left
      :font-size= !small
      :margin-right 5px
      a
        :color= #888
        :text-decoration none

// =============================
// = language-dependent styles =
// =============================
        
=favicon(!from="left", !to="right")
  :float= !from
  a
    :float= !to
    img
      :float= !to

=column(!from="left", !to="right")
  :width 44%
  :float= !from
  :text-align= !from

  @if !from == "right"
    +rtl
 
  ul.link_root, ul.comment_root
    +inside_column_link_and_comment_layout(!from,!to)

=bidi_meta_row(!from="right", !to="left")
  :background= url("/static/images/#{!from}_to_#{!to}_960.png") top right no-repeat 
  span.timestamp
    :color #888
    :width 100px
    :font-size= !small
    :float= !from
  span.domain, span.translator, span.user
    :width 440px
    :height 40px
    :line-height 40px
    :vertical-align middle
    :float= !from
    a
      :color #000
    img
      :padding 5px 10px
    img.favicon
      :padding-top 10px
  span.domain, span.user
    +favicon(!from, !to)
    :border-bottom 4px double #ccc
    img.user_img
      :width 25px
  span.translator
    :float= !to
    :border-bottom 4px double #888
    img
      :float= !from
      :width 25px

    a.translator_name
      :float= !from
      :clear none
      :display block
      :width 200px
      

=bidi_post_row_layout(!from="left", !to="right")
  :background= url("/static/images/#{!from}_to_#{!to}_960_bkg.png") top right
  :width 950px
  :clear both
  :border-bottom= 1px solid #888
  :float left
  :padding-bottom 1.7em 
  :text-decoration none
  :position relative
  div.meta
    +bidi_meta_row(!from,!to)
    :height= !meta_header_height
    :margin 0
  div.column_en
    +column("left")
  div.column_ar
    +column("right")  

=indented_comment_layout
  :font-size 12px
  a
    +link-colors(#333)
  a.respond_to_comment
    :display none
  div.row_en div.meta span.user
    +left_reply_arrow
  div.row_en div.meta span.translator
    +right_reply_arrow
  div.row_ar div.meta span.translator
    +right_reply_arrow
  div.row_ar div.meta span.translator
    +left_reply_arrow
  div.column_en
    :width 40%!important
    :padding-left 80px
  div.column_ar
    :width 40%!important
    :padding-right 80px
  ul.response_actions li.respond
    :display none
    
// =================================
// = main mixin: +bidi_post_layout =
// =================================
// in screen.sass you can see how to apply this:
//  +bidi_post_layout on body.links #content
//  +link_page_layout on body.links #content
// ... this is used on event details (in parent comments and replies) and on each link on the link page

=left_reply_arrow
  :background url("/static/images/arrow_reply_left_large.png") 5% 0% no-repeat
  .timestamp
    :margin-left 60px
    
=right_reply_arrow
  :background url("/static/images/arrow_reply_right_large.png") 98% 0% no-repeat
  .timestamp
    :margin-right 60px
    
=bidi_post_layout
  div.links_page_list
    :border-top 3px solid #000
  div.links_helper
    +notice
  div.row
    div.row_en
      +bidi_post_row_layout("left","right")
    div.row_ar
      +bidi_post_row_layout("right","left")

  div.indented_comment
    +indented_comment_layout

This is an old stylesheet for bidirectional pages, I would love suggestions on how to improve it before I have to revisit it in a month. @bangpound has a great idea of using the [dir] attribute, right this way: https://gist.github.com/789061

oh and this is for this page: http://news.meedan.net/index.php?page=events&post_id=311171

and if you are wondering what the hell compass is, check out the docs: http://beta.compass-style.org/

use the opposite-position function. this way, your "from" and "to" arguments can be reduced to just "first," which is the first edge with respect to reading direction. any time you need the "to" you can just get the opposite of the first.

I had no idea that existed, thanks!