Origami Frontend Components & Services

Readme: o-crossword

o-crossword is not maintained by the Origami team. This means that the Origami team will not necessarily be able to help you with support requests. The people who maintain this component may be able to offer support, but it's not guaranteed.

o-crossword has a support status of "experimental". This means that the component's API may change without notice, and there is no guarantee that the component is ready for production use.

An experimental Origami component to implement a responsive crossword.

To build this locally

    "registry": {
        "search": [

main code

Portrait mode has been favoured, and made to work across Chrome, Safari, and Firefox (Internet Explorer still needs to be tested), which means landscape mode doesn't fit the page as nicely as it could. Note: control over page margins isn't possible in Safari.

Old notes

Features it could do with:

Testing Script

NB: The preview bar refers to the green and blue clues thumbnail on small screen.

  1. Ensure the element responds correctly to available space, never overflowing the container/viewport

  2. Ensure data-o-crossword-force-compact still works.

  3. When on small screen ensure the preview bar is visible

  4. When the preview bar is pressed a magnifying window is shown

  5. When the preview bar is dragged vertically a magnifying window is shown

  6. Ensure that the position in the preview bar matches what is shpwn in the window, check the beginning end and middle.

  7. Ensure a clue is highlighted in green and is fully legible

  8. Check that the Clue highlighted in green has the corresponding row highlighted.

  9. The clue should also be written again in the clue display box below the table

  10. swiping right on the preview box brings on the large window which can be scrolled

  11. This box should be under the finger/cursor for the majority of the swipe

  12. It should disappear if clicked on and the clicked on clue should be highlighted on the grid

  13. tapping on the preview bar should also reveal this box to the tapped postion

  14. tapping again again on the preview bar whilst the box is visible should scroll the box to that position

  15. The grid should allow you to tap on a grid cell

  16. This highlights it across (if available)

  17. tapping on the same character again should highlight the other direction

  18. tapping on another character in the highlighted word should select that character and keep the highlight the same

  19. the grid you tapped on you can enter characters into

  20. entering a character will replace the contents of the cell

  21. the next cell will then be selected and ready for entering a character

  22. clicking on the now selected cell should switch between across/row on that cell if available.

  23. highlighted words can be navigated by pressing the arrow keys

  24. pressing return exits the character entry

  25. building from JSON

  26. building from json with answers


This software is published by the Financial Times under the MIT licence.

experimental Origami v1 (Bower)
Switch component view

GitHub: o-crossword

Install o-crossword

If using the Build Service, add o-crossword@^1.10.6 to your script and link tags.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-crossword@^1.10.6".

Help & Support

o-crossword is not supported directly by the Origami team. We make no guarantees, but will help if we can. First try contacting its maintainers at:

Slack: #ftlabs
Email: ftlabs@ft.com